ES는 자바스크립트를 이루는 코어(Core)스크립트 언어로써, 다양한 환경에서 운용될 수 있게 확장성을 갖고 있기때문에 사용처가 웹환경으로 국한되어 있지는 않다. 자바스크립트는 웹브라우저에서 돌아갈 수 있도록 BOM과 DOM을 함께 사용하는 확장성이 된다. 이러한 확장성들은 ES 버전에 따른 문법과 기능의 확장을 가능하게 한다.
DOM (Document Object Model) : 문서 객체 모델
문서 객체 모델은 객체지향 모델로써 구조화된 문서를 표현하는 형식이다
-> 문서, 즉 열려진 페이지에 대한 정보를 따로 객체화 시켜서 관리
BOM (Browser Object Model) : 브라우저 객체
BOM은 자바스크립트가 브라우저와 소통하기 위해서 만들어진 모델이다
-> 뒤로가기, 북마크, 즐겨찾기, 히스토리, URL 정보 등..
-> 브라우저가 가지고 있는 정보를 따로 객체화 시켜 관리
let과 const
자바스크립트는 함수스코프와 전역스코프만을 지원하여 변수의 생명주기 및 접근을 제어해왔다. 하지만 ES6에서부터는 블록스코프도 지원하게 되었다. 이를 가능하게 해주는 것이 let과 const이다.
아래의 코드는 블록 스코프를 따르는 여타 언어에서는 에러를 발생시켰을 것이다. 하지만 함수스코프와 전역스코프를 따르는 자바스크립트에서는 문제없이 작동한다. 그러나 이는 많은 에러와 버그의 원인이었으며, let과 const가 도입된 이유이다.
if (false) {
var x = 'hello';
}
console.log(x); // undefined
let으로 바꿔보자
if (false) {
let x = 'hello';
}
console.log(x); // ReferenceError: x is not definedlet을 사용하면 선언한 변수는 블록 안에서만 유효하게 된다. 따라서, 블록 밖에서 접근했더니 ReferenceError를 발생시켰다.
const역시 마찬가지로 블록스코프를 따른다. const와 let의 차이점은 const는 상수로 값을 할당한다는 점이다. 따라서 값을 변경시키려고하면 에러를 발생시킨다.
화살표 함수 (Arrow Function)
ES6에서 소개된 가장 인상적인 기능중의 하나는 화살표 함수의 지원이다. 화살표 함수는 함수 정의를 보다 간결한 구문으로 콜백을 정의할 때 특히 유용하다.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const even = numbers.filter(function (x) {
return x % 2 === 0;
})위의 코드를 아래와 같이 바꿀 수 있다.
const numbers = [1, 2, 3, 4, 5, 6, 7, 8, 9];
const even = numbers.filter(x => x % 2 === 0);Template 표기법
문자열을 연결하기 위해 더하기 연산자를 사용할 필요 없이, 백틱을 사용하여 문자열 내에서 변수 사용 가능
let a = "울보훈이"
let b = "코린이"
let str = "내 닉네임은 " + a + "이고 " + b + " 입니다"
console.log(str) // '내 닉네임은 울보훈이이고 코린이 입니다'
// let a = "울보훈이"
let b = "코린이"
let str = `내 이름은 ${a}이고, ${b}입니다.`
console.log(str) // '내 닉네임은 울보훈이이고 코린이 입니다'참고 | https://bctr.tistory.com/4
ES6 특징 | https://fz7948.tistory.com/56
