ES6 문법 알아보기

HeeGeun.Lee·2022년 11월 11일

JavaScript

javascript

목록 보기

4/5

Introduction

실무에서도 많이 쓰이고, 알고 있으면 코드를 작성할때 굉장히 편해지는 ES6문법들을 ES5문법과 비교하여 예제를 살펴보자.

💡 ES5는 2009년, ES6는 2015년에 발표되었다.

default function parameter

함수의 파라미터에 주어진 값이 없거나 undefined가 전달될 경우, 매개변수를 기본값으로 초기화할 수 있다.

// ES5
function sayHello(name) {
  name = name || 'Tom'; // 추가 작업 필요
  console.log('Hello, ' + name);
}
sayHello("Jeremy"); // Hello, Jeremy
sayHello(); // Hello, Tom

함수 호출시 파라미터가 없다면 함수 내부에 추가로 작업이 필요했다.

// ES6
function sayHello2(name = "Tom") {
  console.log("Hello, " + name);
}
sayHello2(); // Hello, Tom

ES6 에서는 추가 작업이 필요 없어졌다.

rest parameter

함수의 파라미터에 쓰이며 파라미터들을 배열로 받아 준다.

// ES5
function add(num1, num2, num3) {
  console.log(num1 + num2 + num3);
}
add(10, 6, 24); // 40

여러개의 파라미터를 각각 대응해서 써줬다.

// ES6
function add(...nums) {
  console.log(nums); // [10, 6, 24]
  let total = 0;
  for (const n of nums) {
    total += n;
  }
  console.log(total);
}
add(10, 6, 24); // 40

이렇게 파라미터들을 배열로 받을 수 있게 된다.

arrow function

함수 표현식을 화살표 함수로 표현할 수 있다.

// ES5
// 함수 선언식
function foo(name) {
  return "Hello, " + name;
}

// 함수 표현식
var foo = function(name) {
	return 'Hello, ' + name;
}
console.log(foo('Albert')); // Hello, Albert

// ES6
const foo = (name) => {
	return 'Hello, ' + name;
}
console.log(foo('Albert')); // Hello, Albert

// 코드 블록 안에 코드가 한줄이고, 그 코드가 return이면 return 키워드 생략가능
const foo = (name) => 'Hello, ' + name;
// 파라미터가 하나라면 소괄호 생략가능
const foo = name => 'Hello, ' + name;

화살표 함수를 사용해서 간략하게 작성할 수 있다.

template literals

템플릿 리터럴은 일반 문자열과 비슷해 보이지만, `백틱(backtick) 문자를 사용한다.

// ES5
function sayHello(firstName, lastName) {
  console.log("Hello " + firstName + " " + lastName + ". Welcome!");
}
sayHello("John", "Doe"); // Hello John Doe. Welcome!

// ES6
function sayHello2(firstName, lastName) {
  console.log(`Hello ${firstName} ${lastName}. Welcome!`);
}
sayHello2("Jeremy", "Go"); // Hello Jeremy Go. Welcome!

문자열 결합을 매우 쉽게 할 수 있다.

object literal syntax extension

변수에 할당된 값을 object객체의 키로 치환해서 사용할 수 있다.

const type = "studentName";
const score = {
  [type + 1]: "John", // 동적으로 변경도 가능
  point: 95,
};
console.log(score); // {studentName1: 'John', point: 95}

spread operator

배열을 분해해서 각각의 요소를 각각 따로 분리해준다.

// ES5
const num1 = [1, 2, 3];
const num2 = [4, 5, 6];
const num3 = num1.concat(num2);
console.log(num3); // [1, 2, 3, 4, 5, 6]

// ES6
const num4 = [...num1, ...num2];
console.log(num4); // [1, 2, 3, 4, 5, 6]

배열을 좀 더 깔끔하게 병합할 수 있다.

// ES5
const arr1 = ['Jeremy','Tom']; 
const arr2 = arr1; 
arr2.push('Albert'); 
console.log(arr2); // ['Jeremy', 'Tom', 'Albert']
console.log(arr1); // ['Jeremy', 'Tom', 'Albert'] (원본 배열도 변경됨)

// ES6
const arr1 = ['Jeremy','Tom']; 
const arr2 = [...arr1]; 
arr2.push('Albert'); 
console.log(arr2); // ['Jeremy', 'Tom', 'Albert']
console.log(arr1); // ['Jeremy', 'Tom'] (원본 배열 변경되지않음)

배열을 복사할 때 새로운 복사된 배열을 생성할 수 있다.

destructuring

객체나 배열에서 사용하며, 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말한다.

// Array
function getScores() {
  // 0 - 최하 점수, 1 - 평균 점수, 2 - 최대 점수
  return [70, 80, 90];
}

const [minScore2, avgScore2, maxScore2] = getScores();
console.log(minScore2); // 70
console.log(avgScore2); // 80
console.log(maxScore2); // 90

// Object
function getPerson() {
  return {
    firstName: "John",
    lastName: "Doe",
    age: 37,
    email: "john@gmail.com",
    city: "NY",
    country: "USA",
  };
}

const { firstName, lastName, country } = getPerson();
console.log(firstName); // John
console.log(lastName); // Doe
console.log(country); // USA