ES란 ECMAScript의 약자로 자바스크립트의 표준, 규격을 나타내는 용어
ES6는 버전 6를 의미한다(2015년 출시)
기존에는 var만 사용할 수 있었는데 let과 const가 ES6부터 지원이 되었다고 한다.
let은 재할당 가능, 재선언 불가능한 변수
const는 재할당 불가, 재선언 불가능한 변수
백틱(`)과 $표시로 기존에 +를 이용해 지저분했던 문자열 + 변수를 가독성 좋게 작성할 수 있다
전체를 백틱으로 감싸고 변수를 ${ }안에 넣어주면 끝
기존에 function name( ){ return }의 방식을
const name = () => { }의 방식으로 사용할 수 있게 되었다.
// ES5 함수표현식
function add(a, b) {
return a + b;
}
// ES6 함수표현식 - 화살표 함수
const add = (a, b) => {
return a + b;
}
// ES6 함수표현식 - 화살표 함수 return 생략
const add = (a, b) => a + b;
주의할 점
1. 화살표 함수에서 받는 인자가 2개일 경우에는 ( )안에 넣어서 사용
2. 화살표 함수의 유일한 문장이 'return'일 때 'return'과 중괄호{ }를 생략할 수 있다.
객체와 배열에 일일이 변수를 할당하기 어려울 때 사용
const child = {
name : "철수",
age : 58,
school : "개발 공장"
}
const {name, age, school} = child
const classmates = ["철수","영희","훈이"]
const [child1, child2, child3] = classmates
배열 연산자를 ...형태로 사용하면 문자데이터 형태로 출력된다.
(1 레벨 깊이에서 효과적으로 동작, 다차원배열을 복사하는데 부적합하다)
parameter의 초기값을 지정해주는 것
기존에는 함수안에 if문을 써서 값이 없을 때를 나타냈어야 했는데, 이를 다른 형식으로 사용할 수 있다.
기존에는 ( ) 값을 주면 undefined가 뜸
parameter 옆에 값을 지정해주면 값을 넣지 않아도 초기값이 형성된다.
삼항 연산자, short-hand-property, promise, class 등이 있다.
참조:
https://www.youtube.com/watch?v=36HrZHzPeuY
https://velog.io/@quin1392/ES6%EC%9D%98-%ED%8A%B9%EC%A7%95
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Arrow_functions