ECMAScript6은 넷스케이프에서 인터넷상의 다양한 스크립트 언어들을 하나로 묶기위해서 제시한 표준안이며 es6은 2015년에 출시되었다.
ES6으로 업데이트되면서 추가된 주요한 기능들은 아래와 같다
템플릿리터럴
기존 문자열을 연결하기 위해서는 "", +를 이용하였다. 이를 보완한기능이 템플릿 리터럴이다.
템플릿 리터럴은 (백택)을 이용한 기능이다. 백틱을 사용하여 문자열 내에서 변수를 사용할 수 도있다. 변수를 사용할 때는 ${변수} 이런형식으로 이용하면된다.
과거문법
ex)
let name = 철수
let age = 10
"안녕" + name + "야 나는 " + age + "살이야!"
출력 : 안녕 철수야 나는 10살이야
템플릿리터럴 문법
ex) 안녕 ${name}야 나는 ${age}살이야!
출력 : 안녕 철수야 나는 10살이야!
멀티라인 문자열
기존 멀티라인 문자열을 처리하기 위해서는 문장 + 문장2+ 문장3 을 사용했다. 이럴 보완하기위해 템플릿리터럴과 마찬가지로 (백틱)을 이용하여 간단히 처리할 수 있도록 하였다.
비구조화 할당
비구조화할당이란 배열이나 객체의 속성 또는 값을 해체하여 그 값을 변수에 따로담아 사용하는 JS 표현식입니다.
이전 방식으로는
let animalList = ["cat", "dog", "tiger"]
let cat = animalLIst[0]
let dog = animalLIst[1]
let tiger = animalLIst[2]
총 4줄의 코드가 필요했다면
비구조화할당을 이용한 문법으로는
const [cat1, dog1, tiger1] = ["CAT", "DOG","TIGER"]
이렇게 한줄료 표현할 수 있다.
const [변수명1,변수명2,변수명3] = [값1, 값2, 값3]
화살표 함수
화살표 함수는 ES6에서 새로 나온 함수의 형태입니다.
기존함수 문법으로는 함수선언문, 함수표현식이있었다.
함수선언문은 function 함수이름(매개변수) {
} 와같이 함수를 선언하는 부분과 호출하는 부분으로 나누어 작성하였다.
함수표현식은 const 함수이름 = (매개변수) {
}의 방식으로 함수명으로 선언하는것과달리 변수에 담아서 처리하였다.
화살표함수는 function이라는 말을 생략하고 '=>' 라는 화살표 기호를 사용했다고하여 화살표 함수라고 부른다. 화살표함수는 구문을 짧고 간결하게 작성할 수 있도록 해준다.
예시
const 함수이름 = (매개변수) => {
}
const and let
기존 ES5 에는 var 만 사용되었는데, 이를 보완하고자 const와 let기능이 추가되었다.
기존 var 같은 경우 재선언 재할당이 모두 되었지만
const의 경우 재선언 재할당이 모두 불가능하고, let의 경우 재할당만 가능한 기능으로 추가되었다. 또한, const와 let의 경우 모두 블럭범위이기 때문에 변수는 범위 내에서만 사용될 수 있다.
