[Javascript] ES2015+

이승연·2021년 2월 21일
0

const, let

  • 기존 var로 선언하던 변수를 const와 let으로 선언
  • const는 나중에 값변경 불가능, let은 가능
  • var은 함수 스코프를 가지므로 if문의 블록과 관계없이 접근할 수 있음. 하지만 const와 let은 블록 스코프를 가지므로 블록 밖에서는 변수에 접근할 수 없음.
  • 자바스크립트는 한 번 초기화했던 변수에 다른 값을 대입하는 경우는 의외로 적음. 따라서 기본적으로 변수 선언 시에는 const를 사용하고, 다른 값을 대입해야 하는 상황이 생겼을 때 let을 사용.

템플릿 문자열 (백틱 사용하여 변수를 문자열에 넣기

  • ${num3} 더하기 ${num3}는 ${num3}

객체 리터럴 (객체에 동적으로 속성 추가하기)

const sayNode = function() {
  console.log('Node');
};
const es = 'ES';

const oldObject = {
  sayJS: function(){
    console.log('JS');
  },
  sayNode: sayNode,
};
oldObject[es + 6] = 'Fantastic';

const newObject = {
  sayJS(){
    console.log('JS');
  },
  sayNode,
  [es + 6]: 'Fantastic',
};

oldObject.sayNode();        //Node
oldObject.sayJS();          //JS
console.log(oldObject.ES6); //Fantastic

newObject.sayNode();        // Node
newObject.sayJS();          //JS
console.log(newObject.ES6); //Fantastic
  • oldObject는 ES6가 도입되기 전, newObject는 ES6가 도입 된 후
  • 달라진 점1: oldObject는 oldObject[es + 6] = 'Fantastic';가 함수 밖에서 선언되었다면 newObject는 함수 내에서 선언이 가능하다. 동적으로 객체의 속성명을 생성하는 것.oldObject에는 속성에 두개 있었다면 newObject에는 세개가 있는 것을 볼 수 있다.
  • 달라진 점2: newObject에서:를 사용하지 않고 {}를 사용해서 바로 함수선언을 한다. 또한, 함수명과 속성명이 같다면 sayNode한번만 써서 코드의 중복을 피할 수 있다.

화살표 함수

  • 화살표 함수를 쓰면 다음과 같이 코드를 줄일 수 있다
function add1(x, y) {
  return x+y;
}

const add2 = (x, y) => {
  return x+y;
} 

const add3 = (x, y) => x+y;

const add4 = (x, y) => (x+y);

function not1(x) {
  return !x;
}

const not2 = x => !x;
  • = 다음에는 매개변수를 소괄호로 감싸주고 => 다음에는 리턴할 함수를 써준다. 매개변수가 하나인 경우 소괄호를 쓰지 않아도 된다.

비구조화 할당

  • 객체와 배열로부터 속성이나 요소를 쉽게 꺼낼 수 있는 기능
const candyMachine = {
  status: {
    name: 'node',
    count: 5,
  },
  getCandy() {
    this.status.count--;
    return this.status.count;
  }
};

const { getCandy, status} = candyMachine; //candyMachine 객체에 있는 속성을 getCandy와 status변수에 같은 이름끼리 넣어준다.
const {status: { count }} = candyMachine; //status안에 있는 count 속성을 count변수에 넣어준다.

console.log(getCandy); // getCandy()
console.log(status);  // { name: 'node', count: 5 }
console.log(count);   // 5

프로미스

const condition = false;
const promise = new Promise((resolve, reject) => {
  (condition) ? resolve('성공') : reject('실패');
});

promise
.then((message) => {
  console.log(message);
})
.catch((error) => {
  console.log(error);
});

0개의 댓글