[JavaScript] ES6 문법 정리

 

ES6 문법 중 정말 많이 사용하는 문법들 위주로 정리했다.

 

let, const keyword

let, const, var 키워드에 대해서는 따로 자세하게 정리할 예정이다.

간단하게 살펴만 보자

 

var : 재정의와 재선언이 모두 가능하다.

let : 재정의는 가능하나, 재선언은 불가능하다.

const : 재정의와 재선언 모두 불가능하다.

// var
var a = 2;
a = 5;
var a = 7;
console.log(a); // 7

// let
let x = 1;
// let x = 2; // SyntaxError: Identifier 'x' has already been declared
{
  let x = 4;
  console.log(x); // 4
}
console.log(x); // 1

// const
{
  const y = 1;
  // y = 3; // TypeError: Assignment to constant variable.
  console.log(y); // 1
}
// console.log(y); // ReferenceError: y is not defined

Arrow Function

function 키워드 대신 화살표를 사용해 기존의 함수 정의 방식보다 간략하게 함수를 정의할 수 있다.

일반 함수와 어떻게 다르게 쓰이는지 형태만 보고, 화살표 함수에 대해서는 따로 더 자세히 알아볼거다.

 

const add = function (a, b) {
  return a + b;
};

const add2 = (a, b) => a + b;

console.log(add(1, 2)); // 3
console.log(add2(1, 2)); // 3

매개변수가 여러개인 경우는 위와 같이 소괄호 안에 매개변수를 선언하며, 한 개일 때는 생략할 수 있다.

단, 매개변수가 없을 때는 생략할 수 없다.

 

일반 함수와 화살표 함수의 차이

1. 화살표 함수는 인스턴스를 생성할 수 없다.

- 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없으며 프로토타입도 생성하지 않는다.

const foo = () => {};
// new foo(); // TypeError: foo is not a constructor

2. 중복된 매개변수 이름을 선언할 수 없다.

function normal(a, a) {
  return a + a;
}
console.log(normal(1, 2)); // 4

const arrow = (a, a) => a + a;
//console.log(arrow(1, 2)); // SyntaxError: Duplicate parameter name not allowed in this context

3. 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다.

- 화살표 함수 내부에서 this, arguments, super, new.target을 참조할 시, 상위 스코프의 this, arguments, super, new.target을 참조한다.

Promise

비동기 처리를 위한 한 패턴으로 프로미스를 도입하여 이전의 콜백 패턴이 가진 단점을 보완하고 비동기 처리 시점을 명확하게 표현할 수 있게 되었다.

const promise = new Promise((resolve, reject) => {
  if(/* 비동기 처리 성공 */) {
    resolve('result');
  } else { /* 비동기 처리 실패 */
    reject('failure reason');
  }
});

Promise 생성자 함수가 인수로 전달받은 콜백 함수 내부에서 비동기 처리를 수행한다.

Class

프로토타입 기반 객체지향 패턴을 더욱 빠르게 학습할 수 있도록 새로운 객체 생성 메커니즘이다.

 

class Person {
  // 생성자
  constructor(name) {
    this.name = name;
  }
  
  // 프로토타입 메서드
  sayHello() {
  	console.log(`Hello, ${this.name}`);
  }
  
  // 정적 타입 메서드
  static sayHello2(){
  	console.log('Hello!');
  }
}

const p = new Person('Lee');

console.log(p.name); // Lee
p.sayHello(); // Hello, Lee
p.sayHello2(); // Hello!

 

Shorthand property names

const obj = {
  name: 'es6',
  age: 10,
};

const name = 'es6';
const age = 10;

const obj2 = {
  name: name,
  age: age,
};

// es6
const obj3 = {
  name,
  age,
};

console.log(obj);
console.log(obj2);
console.log(obj3);

key와 value가 동일할 때 생략하여 간단하게 작성할 수 있다.

 

콘솔에 하나씩 출력해보면 아래와 같이 모두 정상적으로 출력되는 것을 알 수 있다.

{ name: 'es6', age: 10 }
{ name: 'es6', age: 10 }
{ name: 'es6', age: 10 }

Destructuring Assignment

객체 디스트럭처링 할당

const info = {
  name: 'es6',
  age: 10,
};

{
  const name = info.name;
  const age = info.age;
  console.log(name, age);
}

// es6
{
  const { name, age, grade: 'A' } = info;
  console.log(name, age, grade);

  const { name: info_name, age: info_age} = info;
  console.log(info_name, info_age);
}

es5에서는 프로퍼티 키를 사용해서 변수에 할당했다면, es6에서는 선언된 변수 이름과 프로퍼티 키가 일치하면 할당된다.

이때, 순서는 중요하지 않다.

변수명을 다르게 사용하고싶다면 `프로퍼티키 : 변수명` 으로 하면 된다.

할당을 위한 변수에 기본값을 설정할 수 있는데, 이 때 기본값보다 할당된 값이 우선이 된다.

 

출력도 아래와 같이 정상적으로 나온다.

es6 10
es6 10 A
es6 10

 

중첩 객체의 경우에도 사용이 가능하며, 만약 Rest 프로퍼티를 사용할 경우에는, 반드시 마지막에 위치해야 한다.

const user = {
  name: 'Lee',
  address: {
    code: '1234',
    city: 'Seoul',
  },
};

const {
  address: { city },
} = user;
console.log(city); // Seoul

const { x, ...rest } = { x: 1, y: 2, z: 3 };
console.log(x, rest); // 1 { y: 2, z: 3 }

 

 

배열 디스트럭처링 할당

const fruits = ['apple', 'banana'];

{
  const first = fruits[0];
  const second = fruits[1];
  console.log(first, second);
}

{
  const [first, second, third = 'kiwi'] = fruits;
  console.log(first, second, third);
}

 

출력은 아래와 같다.

apple banana
apple banana kiwi

배열도 객체와 비슷하게 할당할 수 있다. 

배열도 변수에 기본값을 설정할 수 있는데, 역시 기본값보다 할당된 값이 우선이 된다.

 

Spread Syntax

스프레드 문법 ...은 하나로 뭉쳐있는 여러 값들의 집합을 펼쳐 개별적인 값들의 목록으로 만든다.

단, 사용할 수 있는 대상이 Array, String, Map, Set, DOM 컬렉션, arguments와 같이 for...of문으로 순회할 수 있는 이터러블에 한정되어 있다.

const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];

const arrayCopy = [...array];
console.log(array, arrayCopy);

const arrayCopy2 = [...array, { key: 'key3' }];
obj1.key = 'key';
console.log(array, arrayCopy, arrayCopy2);

[ { key: 'key1' }, { key: 'key2' } ] [ { key: 'key1' }, { key: 'key2' } ]
[ { key: 'key' }, { key: 'key2' } ] [ { key: 'key' }, { key: 'key2' } ] [ { key: 'key' }, { key: 'key2' }, { key: 'key3' } ]

 

두번째 출력에서 key1이 모두 key로 바뀐 이유는 obj1.key = 'key' 때문이다.

마치 복사해서 붙여넣는 것 같지만 객체 자체를 복사해서 붙이는것이 아니라 주소값을 복사해서 붙이는 것이기 때문에 값에 변동이 있으면 주소를 공유하고 있는 모든 값들이 바뀌게 된다

 

const fruits1 = ['apple', 'banana'];
const fruits2 = ['kiwi', 'melon'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits); 

const dog1 = { name: 'dog1' };
const dog2 = { name: 'dog2' };
const dog = { ...dog1, ...dog2 };
console.log(dog);

[ 'apple', 'banana', 'kiwi', 'melon' ]
{ name: 'dog2' }

배열 두개를 붙일수도 있다.

한 가지 더 유의할 점은 key명이 같을 경우에는 마지막 값이 덮어쓴다는 것이다.

 

Default parameters

// 이전
function printMessage(message) {
  if (message == null) {
    message = 'default mesasge';
  }
  console.log(message);
}

printMessage('hello'); // hello
printMessage(); // default message

// es6
function printMessage(message = 'default message') {
  console.log(message);
}

printMessage('hello'); // hello
printMessage(); // default message

위와 같이 인자가 전달되지 않을 경우에 default 파라미터를 사용할 수 있다.

 

Template Literals

const name = 'es6';
console.log('Hello, ' + name); // Hello, es6
console.log(`Hello, ${name}`); // Hello, es6

백틱을 이용해서 + 연산자 대신 편리하게 사용할 수 있다.

 

 

 

출처 :

https://www.w3schools.com/js/js_es6.asp

https://www.youtube.com/watch?v=36HrZHzPeuY

모던 자바스크립트 Deep Dive