Javascript - ES6 문법 소개

JavaScript의 ES란?

• ES는 ECMAScript의 약어로, JavaScript 언어의 표준화된 버전을 의미합니다.
• ECMAScript는 자바스크립트의 언어 사양을 정의하는 국제 표준화 기구인 ECMA에 의해 관리됩니다.
• ECMAScript는 JavaScript의 핵심 기능과 문법, 브라우저에서 실행되는 웹 어플리케이션에서 사용되는 다양한 API들을 정의합니다.
• 새로운 버전의 ECMAScript는 새로운 기능을 도입하고, 기존 기능을 향상시키기 위해 주기적으로 발표됩니다.

이미지 참고링크 :  https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

ES5/ES6 문법 차이

• ES5는 2009년에 출시된 ECMAScript 5의 줄임말이며, ES6는 2015년에 출시된 ECMAScript 6의 줄임말입니다.
• ES6은 ES2015라고도 불립니다. 이 두 가지 버전은 JavaScript 언어의 핵심 문법, 표준 라이브러리, 개발자가 사용할 수 있는 새로운 기능 등에서 중요한 차이점이 있습니다.

ES6 문법의 변경점으로 아래와 같습니다.

1. 변수 선언

ES5에서는 var 키워드를 사용하여 변수를 선언하였습니다. ES6에서는 let과 const 키워드가 추가되어서 변수 선언 방식이 변경되었습니다. let은 블록 스코프 변수, const는 상수 변수입니다.

추가적으로 var와 let과 const의 차이를 아래 표와 같이 정리 해봤습니다.

	var	let	const
선언	어느 스코프에서든 재선언 가능	전역 스코프로는 1회만 선언 가능, 그림자 변수로 블록 스코프로에서 추가 선언 가능	전역 스코프로는 1회만 선언 가능, 그림자 상수로 블록 스코프로에서 추가 선언 가능
할당	어느 스코프에서든 재할당 가능	어느 스코프에서든 재할당 가능	상수임으로 재할당 불가능

** 선언 : 변수명을 자바스크립트 엔진에 알리는 행위

** 할당 : 선언된 변수에 값을 저장하는 행위

2. 함수 선언

ES5에서는 함수를 선언할 때 function 키워드를 사용한 선언만 가능했습니다. 반면에 ES6에서는 이를 약식으로 표현하는  arrow function 표현식이 추가되었습니다.

화살표 함수는 function이나 return이라는 키워드 없이 함수를 만드는 방법입니다. 일반적인 함수 선언과 화살표 함수의 차이는 아래와 같습니다.

// ES5까지 사용되던 함수의 선언
function func() {
	return true
}

//ES6에 새로 추가된 화살표 함수
const func = () => true
const func = () => {
	return true
}

화살표 함수는 위에 샘플처럼 "(파라미터 부분) => {로직 부분}" 형태로 표현되며, 로직 부분이 한줄이라면 중괄호를 생략하여 약식 표현이 가능합니다.

3. 객체 리터럴

 ES5에서는 객체를 생성하는 방법이 비교적 복잡하였지만, ES6으로 오면서 객체 리터럴 문법이 확장되어서 객체를 더욱 쉽게 생성할 수 있게 되었습니다. 또한 객체에 대해서 구조 분해 할당, 단축 속성명 등이 사용 가능해졌습니다.

• 구조분해 할당 : 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

// 구조 분해 할당 예시
// user 라는 객체의 value 값을 name과 age 변수에 분해 할당 
let user = {name: "nbc", age: 30};
let {name, age} = user;

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

 

• 단축 속성명 : 아래 샘플과 같이 객체의 key와 value 값이 같다면 생략이 가능

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

 

4. 매개 변수 변경 점

ES6로 오면서 전개 구문, 나머지 매개 변수, 매개 변수 기본값 지정 등의 새로운 기능이 추가되었습니다.

• 전개 구문 : 배열이나 객체를 전개하는 문법

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

• 나머지 매개변수 : 함수에 전달되는 매개변수 값이 몇개일지 예상되지 않을 경우 사용 가능한 방법으로 아래 샘플에서 a, b는 사용자가 예상한 매개변수이며, ...args가 나머지 매개변수 입니다. 나머지 매개변수를 사용하면 a,b 외의 추가 매개변수가 함수에 전달되도 해당 매개변수에 대한 처리가 가능 합니다.

function func (a, b, ...args) {
	console.log(...args)
}

func(1, 2, 3) // 3
func(1, 2, 3, 4, 5, 6, 7) // 3 4 5 6 7

•  매개 변수 기본값 : 매개변수에 값이 전달되지 않은 경우 기본값으로 사용할 값을 정의 가능해졌습니다.

function func (a, b, c = 3) {
	console.log(a,b,c)
}

func(1, 2) // 1, 2, 3

 

5. 템플릿 리터럴

ES5에서는 여러줄의 문자열을 표현하기 위해서는 연결 연산자를 사용해야 하는 불편함이 있었습니다. 하지만 ES6에서는 템플릿 리터럴이 추가되어서 문자열을 더욱 쉽게 다룰 수 있게 되었습니다. 템플릿 리터럴을 사용하면 아래의 코드 샘플처럼 여러 줄의 문자열을 쉽게 작성하거나 변수를 문자열에 삽입할 수 있게 되었습니다. 

let name = "peter"
let age = 30

// ES5에서의 문자열 표현
console.log(${name} + "의 나이는" + ${age} + "입니다.")

// ES6에서의 문자열 표현 (템플릿 리터럴 사용)
console.log(`
	${name}의 나이는 ${age}입니다.
	또한 두줄 표현도 가능합니다.
`)