항해 99 - ES6 문법 정리

JS 만의 문법을 가득 담고 있는 ES6 문법!

현재 더 새로운 문법이 나왔음에도 ES6를 표준으로 사용하고 있다고 하니 강의 외의 다양한 문법에 대해 공부할 필요가 있는 것 같다. 우선은 배운거라도 완벽하게 익히자!

앞서 설명하셨던 변수 할당 하는 let, const도 ES6 문법이라고 한다.

또한, 자연스럽게 사용하던 템플릿 리터럴과 삼항 연산자, 화살표 함수도 ES6 문법이다.

(화살표 함수는 책의 함수 챕터를 정리하면서 같이 정리 할 예정)

 

---

[ ES란? ]

ES는 ECMAScript의 약자인데 사실 ECMA도 약자이다.

다 풀어서 쓰자면, European Computer Manufacturers Association Script의 약자인 것이다.

JavaScript의 문법체계라면서 갑자기 유럽? 이라는 의문이 들어서 배경에 대해 더 찾아보았다.간단히 말하자면, 웹 브라우저 언어 간의 싸움이 격해지자 보다못한 ECMA에서 표준 규격을 정해준 것이다.ECMA에서는 JavaScript 뿐만 아니라 다른 언어의 표준 규격까지 관리하기 때문에 ECMA내에서는 ECMA 262라는 코드로 불린다.

 

웹의 시장이 발달함에 따라 표준 규격이 계속 변화하고 있는데, 현재 많은 개발자들이 따르고 있는 규격이 ES6이다.그럼 바로 그 전 버전인 ES5와는 어떤 차이점이 있길래 ES6를 사용하게 되었는지 알아보자.

---

1. 템플릿 리터럴(백틱 ; ` `)

웹개발 종합반에서는 백틱(` `)을 활용한 append할 때만 사용할 수 있는 문법인 줄 알았는데 JS 공부를 하다보니 문자열의 확장판이라는 것을 알게 되었다.

${ }을 사용하면 JS 문법을 적용할 수도 있고 변수도 넣을 수 있고 html을 넣을 수도 있는 만능 문자열이었다!

기존의 문자열(" ")은 멀티라인이 지원되지 않았지만 템플릿 리터럴은 멀티라인이 지원된다.

// 변수 사용
const testValue = "안녕하세요!";
console.log(`Hello World ${testValue}`);

// JS 문법 적용
console.log(`안녕 => ${testValue.strString(0, 2)}`);

// 멀티 라인 지원
console.log(`
    Hello
    My name is Carrot!!
`)

 

2. 삼항 연산자

// 삼항연산자 기본구조
조건문 ? true인경우 : false인경우

간단하게 조건문을 나타내며 참/거짓의 경우가 한줄로써 반환되며 한 눈에 보기 쉬울 때 사용한다.

예시를 들어보자.

// 사용자에게 실행 여부를 받아서 반환하자.
console.log(confirm('실행하시겠습니까?') ? '실행' : '취소')

 

3. 구조분해할당(Destructuring)

정해진 구조에 갇혀있는 배열과 객체를 분해하여 새로운 변수에 할당해주는 것을 말한다.

배열의 경우, 인덱스 순서대로 변수에 할당된다.

객체의 경우, 변수 명과 key 값이 같을 때 value 값이 할당된다. (key가 중요하기 때문에 순서는 섞여도 문제없다.)

// (1) 배열의 경우
let [value1, value2] = [1, "new"]  // value1 -> 1 , value2 -> "new"

console.log('1', value1);    // 1
console.log('2', value2);    // new


// (2) 객체의 경우
let user = {
    name : 'carrot',
    age : 28
}

let {name, age} = user
console.log("name => ", name);    // carrot
console.log("age => ", age);      // 28

 

이렇게 배열/객체의 길이와 분해할당 받을 변수의 개수와 key값이 같다면 문제가 없지만, 만약 할당 받을 변수가 적거나 같다면 어떻게 될까?

 

할당 받는 변수가 적을 땐, 배열은 뒤의 값들을 버리고, 객체는 없는 key값을 버린다.

// (1) 배열의 경우
let [value1, value2] = [1, 2, 3] // value1 -> 1 , value2 -> "new"

console.log(value1);	// 1
console.log(value2);	// 2


// (2) 객체의 경우
let user = {
    name : 'carrot',
    age : 28
}

let {name} = user
console.log("name => ", name);    // carrot

 

할당받는 변수가 많을 땐, undefined 가 할당된다.

이때, undefined 가 아닌 초기값을 설정해줄 수 있다. 초기값은 해당 변수 자리에 값이 있으면 그 값으로 할당된다.

// (1) 배열의 경우
let [value1, value2, value3=5, value4=10, value5] = [1, 2, 3]

console.log(value1);    // 1
console.log(value2);    // 2
console.log(value3);    // 3
console.log(value4);    // 10
console.log(value5);    // undefined


// (2) 객체의 경우
let user = {
    name : 'carrot',
    age : 28,
    birthday : 'August'
}

let {name, age, birthday='January', gender='female', address} = user
console.log("name => ", name);          // carrot
console.log("age => ", age);            // 28
console.log("birthday => ", birthday);  // August
console.log("gender => ", gender);      // female
console.log("address => ", address);    // undefined

 

4. 단축 속성명 (property shorthand)

객체의 key와 value의 변수명이 같다면 생략이 가능하다는 문법

많은 개발자들이 사용하고 있기 때문에 모른다면 해석이 힘들 수도 있다.

어렵지 않지만 python의 set 개념과 혼동이 올 수도 있으니 한번 더 기억하자.

const name : 'carrot',
const age : 28

const user = {name, age}
// user = {name : 'carrot', age : 28}

 

5. 전개 구문(Spread Operator)

구조분해할당과 함께 가장 많이 사용되는 ES6문법 중의 하나

해당 구조를 벗어버리고 새로운 구조를 덧입혀야 할 때 사용한다.

 

지금은 단순하게 확장하는 개념만 보자

// (1) 배열의 경우
let arr = [1, 2, 3];
console.log(arr);		// [1, 2, 3]
console.log(...arr);	// 1 2 3

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


// (2) 객체의 경우
let user = {
    name : 'carrot',
    age : 28
};
let user2 = {...user, gender : 'female'};

console.log(user);		// {name : 'carrot', age : 28}
console.log(user2);		// {name : 'carrot', age : 28, gender : 'female'}

 

 

6. 나머지 매개변수 (Rest Parameter)

전개 구문을 이용함 함수의 매개변수 문법이다.

정확하게 매개변수의 개수를 알고 있다면 사용하지 않겠지만, 매개변수의 개수를 가늠할 수 없을 때 즉, 가변 매개변수 함수일 때 사용한다.

...args 를 활용하여 매개변수를 받는다.

(args가 아닌 다른 변수명을 사용해도 되지만 일반적으로 args 사용)

// ...을 사용해야 나머지 매개변수를 할당하는 것!
function exampleFunc (a, b, c, ...args){
    console.log(a, b, c);	// 1 2 3
    console.log(args);      // [4, 5, 6, 7] => ...로 전개하지 않으면 배열로 받는다.
    console.log(...args);	// 4 5 6 7
    
}

exampleFunc(1, 2, 3, 4, 5, 6, 7);

 

---

ES6 문법을 살펴보니 JS만의 매력을 보게 된 것 같아서 너무 재미있다.

JS는 에러를 최대한 피하고 있다는 느낌을 받는다. 어떻게든 안정적으로 구동될 수 있도록 설계된 언어인 것 같다.

이런 내부적인 설계도 한번 찾아봐야겠다.