최근에 본 면접에서 면접관님이 ES6 특징에 대해서 이야기 해줄수 있냐고 물어봤는데 예전에 찾아봤던 내용이 하나도 기억이 안나서 대답을 못했습니다. 보통 면접에서 대답을 못한 질문에 대해 기억이 잘 안나는데 이번엔 대답을 못한게 많아서 그런지 대답 못한 질문들이 기억이 많이 나네요..
1. let과 const
기존에 변수는 var 예약어로 선언을 했습니다. ES6부터는 let과 const가 나왔는데 let은 변수에 사용하며 const는 상수에 사용합니다.
- let은 var와 다르게 재선언이 불가능합니다. 위에서 이미 사용한 변수명을 아래에서 또 사용하면 SyntaxError를 발생시킵니다. 그렇지만 const와 다르게 let과 var은 둘다 재할당이 가능합니다.
- let과 const는 block레벨 스코프를 지원하고 var는 함수 레벨 스코프를 지원합니다. 그래서 var를 많이 쓸 경우 전역변수가 너무 남발되는 경우가 생깁니다.
- javascript 엔진은 변수선언 -> 초기화 -> 할당 이렇게 세단계로 나뉘어지는데 var의 경우 선언과 초기화가 같이 이루어져 값을 할당하지 않은 변수를 참조해도 에러가 발생하지 않고 undefined라고 나옵니다. 하지만 let이나 const는 선언, 초기화, 할당이 각각 이루어지기 때문에 값을 할당하지 않은 변수를 참조할 경우 ReferenceError가 발생합니다.
2. Arrow function
function과 return 키워드 없이 함수를 작성할 수 있습니다. 함수의 파라미터가 하나라면 ()도 필요 없습니다. 만약 함수의 내용이 한줄에 끝나지 않는다면 {}를 추가하여 작성할 수 있고 return 키워드가 필요합니다.
let sumTwoNum = (a,b) => a+b;
sumTwoNum(1,2)
3
let negativeNum = a => a*(-1);
negativeNum(90)
-90
3. 기본 파라미터
함수 파라미터에 기본 값을 정할 수 있습니다.
let sumTwoNum = function(a=100, b=10) {
return a+b;
}
sumTwoNum()
110
sumTwoNum(200,20)
220
4. String template
`와 ${parameter_name}을 이용하면 변수를 손쉽게 String에 넣을 수 있습니다.
let name = 'John'
let sentence = `my name is ${name}`
sentence
'my name is John'
5. Array Destructuring와 Object Destructuring
배열과 객체에 있는 값을 새 변수에 간단히 할당 가능합니다.
let fruits = ["Apple", "Banana"];
let [fruit1, fruit2, fruit3] = fruits;
fruit1
'Apple'
fruit2
'Banana'
fruit3
undefined
6. Promise
비동기 처리를 위해 기존에는 콜백함수를 썼었는데 Promise 객체를 이용해 콜백을 대신 할 수 있습니다. 또한 어플리케이션이 복잡질수록 많은 콜백 함수로 인해 알아보기 힘들었던 점을 개선할 수 있습니다. Promise의 상태가 fullfiled면 이후 프로세스는 .then()안에, rejected상태면 .catch()안에 이후 작업을 해 줄 수 있습니다.
7. 모듈
export와 import 예약어를 통해 다른 js파일에 있는 함수, 클래스, 변수등을 가져오고 내보낼수 있습니다.
8. 클래스
자바와 같은 다른 객체지향언어가 가지고 있는 클래스라는 개념이 ES6에 처음 생겼습니다. 객체 생성시에 편리하며 extends 예약어를 통해 상속도 받을 수 있습니다.