ES6

유연희·2022년 6월 30일
0

ES6

ES6는 6번째 ECMAScript이다.

ECMAScrip는 자바스크립트를 표준화 하기 위해 만들어진 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어이다.

특징

변수 선언 방법의 변화

let과 const
전통적으로 자바스크립트는 함수스코프와 전역스코프만을 지원하여 변수의 생명주기 및 접근을 제어해왔다. 하지만 ES6에서부터는 블록스코프도 지원하게 되었다. 이를 가능하게 해주는 것이 let과 const이다.
아래의 코드는 블록 스코프를 따르는 여타 언어에서는 에러를 발생시켰을 것이다. 하지만 함수스코프와 전역스코프를 따르는 자바스크립트에서는 문제없이 작동한다. 그러나 이는 많은 에러와 버그의 원인이었으며, let과 const가 도입된 이유이다.

화살표 함수 (Arrow Function)

ES6이 가지는 특징중 하나는 화살표 함수이다. 화살표 함수는 함수 정의를 보다 간결한 구문으로 콜백을 정의할 때 특히 유용하다.

	const myName = (name) => {
    	reutrn `내 이름은 ${name}`
    }
    console.log(myName("홍길동")
    

클래스 구문

ES6에서 클래스 구문이 도입되었다. 하지만 자바스크립트 런타임에 의해 내부적으로 객체가 관리되는 방식이 바뀐 것은 아니어서 여전히 프로토타입을 통해 속성과 함수를 상속한다는 점이 중요하다. 클래스 구문의 도입은 개발자에게 유용하고 뛰어난 가독성을 제공하며, 단지 편의를 위한 것이다. 아래는 전통적인 프로토타입 기반의 Person 함수를 보여준다.

템플릿 표기법

ES6에서 문자열을 연결하기 위해 + 연산자 없이 ``(백틱)을 이용해 나열해서 나타낼 수 있어 가독성이 향상 되었다.

const name = "홍길동"
cosnt age = 14
console.log(`내이름은 ${name}이고 ${age}살 입니다.`)

참고 -
https://mozzioi.tistory.com/223
https://bctr.tistory.com/4

객체 리터럴

ES6에서 속성과 할당하고자 하는 값이 일치하는 경우 생략 가능하다.(short hand property)

const a = 'Apple';
const b = 'Banana';

const es5 = { a: a, b: b };
const es6 = { a, b};
profile
developer

0개의 댓글