#4. ES6 - JavaScript Version

ES6란?

ECMAScript 6의 준말. 자바스크립트의 버전 중 하나이다.

2015년에 업데이트 되면서 대규모 문법적 향상 및 변경이 있어서 자주 언급되곤 한다.

 

대표적인 문법 향상으로 let, const 가 있다.

이전에는 자료형을 나타내기 위해 var 만 사용하였지만, ES6를 통해 let, const 를 사용하게 되면서 재할당 가능 여부를 나타낼 수 있게 되었다.

 

구조분해할당 : Destructuring

구조를 분해하여 다른 메모리에 할당하는 과정을 말한다.

배열이나 객체같이 여러 개의 데이터를 가지고 있는 이 속성들을 하나씩 분해하여 할당하는 문법이다.

배열의 경우

//기본 구조
let [value1, value2] = [1, "new"];
//value1 = 1, value2 = "new"

//예시 코드
let arr = ["value1", "value2", "value3"];
let [a, b, c]  = arr;
// a = "value1", b = "value2", c = "value3"
// 여기서 a,b,c 는 변수

 

만약 이렇게 분해할당하는 과정에서, 대입되는 메모리의 크기를 기존 배열보다 크게 잡은 경우 어떻게 될까?

//예시 코드
let [a,b,c,d] = arr;
// 출력 : a = "value1", b = "value2", c = "value3"
// d = undefined

d에 할당한 값이 없어서 값이 들어가지 않고, 이는 의도하지 않은 동작이므로 undefined 가 출력된다.

let [a, b, c, d = 4] 등과 같은 방법으로 기존 배열의 값 외에 직접적으로 d에 값을 넣어주면 문제없이 동작한다.

 

객체의 경우

//기존 객체 선언
let user = {
	name = "abc";
	age = 30;
}
//구조분해할당
let {name, age} = {
	name : "abc",
	age : 30
};
//출력 : name = "abc", age = 30

//새로운 이름으로 할당
let
{
	name:newName,
	age:newAge
} = user
//출력 : newName = "abc", newAge = 30

배열의 경우와 전반적으로 동일한 과정을 지닌다.

기존 배열의 크기보다 더 큰 메모리에 분해할당 할 경우 undefined 가 출력되는 것, 값을 직접적으로 넣어주는 경우 또한 동일하다.

 

다만 이 직접적으로 값을 넣어주는 과정은 객체나 배열 모두 주의해야 할 점이 있는데, 초기값에만 의미가 있다는 것이다.

//예시 1
let user = { name = "minu", age : 25, gender = "male" };
let {personName, personAge, personGender = "female"} = user;
//출력 : personName = "minu", personAge = 25
// personGender = "male"

값을 선언 시에 직접적으로 넣어준다고 하더라도 이는 초기값에만 적용, 이후 다른 객체/배열을 대입하면서 덮어씌워지기 때문에 없는 값이 되어버린다.

 

Property ShortHand

const name = "abc";
const newAge = 30;

const obj = {
	name: name,
	age : newAge
}

코드를 작성하다보면 obj 와 같이 key 와 value 의 변수명이 동일한 경우가 생길 수 있다.

이런 경우를 고려하여 코드를 더 간결하게 하고자 나온 기법으로, 같은 변수명을 생략하여 작성할 수 있다.

const obj = {name, age};

위의 name : name, ... 의 과정을 거진 obj 객체와 동일한 값을 가진다.

 

Spread Operator : 전개 구문

구조분해할당과 같이 가장 많이 사용되는 ES6 문법 중 하나이다.

어떠한 배열/객체의 값들을 나열할 때 사용한다.

let arr = [1,2,3];
console.log(...arr);
//출력 : 1 2 3

이전에 설명했던 구조분해할당은 이 arr 을 1, 2, 3 으로 완전히 분해했다면, 이 전개 구문 ' ... ' 은 분해는 아니지만 요소들을 전개한 형태이다.

이 전개된 형태에 다른 요소를 추가해서 다시 결합할 수 있다.

let newArr = [...arr, 4];
//출력 : [1,2,3,4]

 

배열 뿐만 아니라 객체에도 적용 가능하다.

let user = {
	name : "abc",
	age : 30
}
let user2 = {...user};
//출력 : user 와 user2 가 동일한 형태

 

Rest Parameter : 나머지 매개변수

function exampleFunc(a,b,c, ...args)
{
	console.log(a, b, c);
	console.log(...args);
}
exampleFunc(1,2,3,4,5,6,7);
//출력 : 1 2 3 / 4 5 6 7

console.log(args) 로 바꿨을 경우 배열의 형태로 출력
// 1 2 3 / [4,5,6,7]

 

Template Literal

const testValue = "Hello";
console.log(`Hello World ${testValue}`);

HTML 파트에서 학습했던 ` 백틱 기호를 활용한다.

이 백틱 기호를 활용하면 이전 " " 의 큰따옴표와 달리 줄넘김을 사용할 수 있어, 더 다양한 표현이 가능해진다.