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();
oldObject.sayJS();
console.log(oldObject.ES6);
newObject.sayNode();
newObject.sayJS();
console.log(newObject.ES6);
- 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;
const {status: { count }} = candyMachine;
console.log(getCandy);
console.log(status);
console.log(count);
프로미스
const condition = false;
const promise = new Promise((resolve, reject) => {
(condition) ? resolve('성공') : reject('실패');
});
promise
.then((message) => {
console.log(message);
})
.catch((error) => {
console.log(error);
});