빠르게 훑어보는 자바스크립트 ES6 변경점 몇 가지

자바스크립트는 es6 버전에서 많은 것들이 추가되고 변경되었습니다. ES6(Ecmascript2015)에서 변경되고 추가된 기능 몇가지를 간단한 예제코드와 함께 소개하겠습니다.

빠르게 훑어보시고 필요한 코드들을 적용해주세요. (개발은 원래 그렇게하는겁니다.)

 

ECMAScript 2015 Specification

 

1. Block-scoped variables

let과 const 키워드를 사용하여 블록 스코프 변수를 선언할 수 있습니다.

// ES6 example
let x = 1;
if (x === 1) {
  let x = 2;
  console.log(x); // output: 2
}
console.log(x); // output: 1

 

위 예시에서 let 키워드를 사용하여 x 변수를 선언하였습니다. if 블록 내부에서 x 변수를 다시 선언하고 값을 할당했지만, 이는 전역 스코프에서 선언한 x 변수에 영향을 주지 않습니다.

 

2. Arrow Functions

화살표(=>) 기호를 사용하여 함수를 정의할 수 있습니다.

// ES6 example
const multiply = (x, y) => x * y;
console.log(multiply(2, 3)); // output: 6

 

3. Class

class 키워드를 사용하여 클래스를 정의할 수 있습니다.

// ES6 example
class Rectangle {
  constructor(height, width) {
    this.height = height;
    this.width = width;
  }
  get area() {
    return this.calcArea();
  }
  calcArea() {
    return this.height * this.width;
  }
}

const rectangle = new Rectangle(10, 5);
console.log(rectangle.area); // output: 50

 

위 예시에서 Rectangle 클래스를 정의하고, constructor 메서드를 사용하여 객체를 초기화합니다. get 키워드를 사용하여 area 속성에 대한 getter 메서드를 정의하고, calcArea 메서드를 사용하여 면적을 계산합니다.

 

4. Modules

import와 export 키워드를 사용하여 모듈을 정의하고 가져올 수 있습니다.

// ES6 example
// module.js
export const multiply = (x, y) => x * y;

// app.js
import { multiply } from './module.js';

console.log(multiply(2, 3)); // output: 6

위 예시에서 module.js 파일에서 multiply 함수를 정의하고, export 키워드를 사용하여 함수를 내보냅니다. app.js 파일에서 import 키워드를 사용하여 multiply 함수를 가져옵니다.

 

5. Default function parameters

함수의 매개변수에 기본값을 설정할 수 있습니다.

// ES6 example
const greet = (name = 'World') => {
  console.log(`Hello, ${name}!`);
}
greet(); // output: Hello, World!
greet

 

6. Rest Parameter

함수의 매개변수에 ... 기호를 사용하여 나머지 인수들을 배열로 받을 수 있습니다.

// ES6 example
const sum = (...numbers) => {
  return numbers.reduce((acc, num) => acc + num, 0);
}
console.log(sum(1, 2, 3, 4)); // output: 10

위 예시에서 sum 함수는 ...numbers 매개변수를 사용하여 임의의 수의 인수들을 배열로 받고, reduce 메서드를 사용하여 인수들의 합을 구합니다.

7. Spread Operator

... 기호를 사용하여 배열이나 객체를 분해하여 개별 요소들을 전개할 수 있습니다.

// ES6 example
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const arr3 = [...arr1, ...arr2];
console.log(arr3); // output: [1, 2, 3, 4, 5, 6]

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

위 예시에서 ... 기호를 사용하여 배열 arr1과 arr2를 분해하고, arr3 배열에 전개합니다. 객체 obj1을 분해하여 obj2 객체에 전개합니다.

 

8. Template literals

백틱(``) 기호를 사용하여 문자열을 템플릿화하고, 변수나 표현식을 삽입할 수 있습니다.

// ES6 example
const name = 'John';
const age = 30;
console.log(`My name is ${name} and I am ${age} years old.`); // output: My name is John and I am 30 years old.

위 예시에서 백틱 기호를 사용하여 문자열을 템플릿화하고, ${} 기호를 사용하여 변수나 표현식을 삽입합니다.