자바스크립트 최신 문법 (ES6+) - 템플릿 리터럴, let과 const, Arrow Function, rest와 spread 문법, 디스트럭처링 (객체, 배열), 클래스와 모듈

13. 자바스크립트 최신 문법 (ES6+)

ES6(ECMAScript 2015) 이후 자바스크립트는 많은 새로운 문법과 기능을 도입하여 코드의 가독성, 효율성, 유연성을 높였습니다. 이 장에서는 자바스크립트 최신 문법 중 중요한 템플릿 리터럴, let과 const, Arrow Function, rest와 spread 문법, 디스트럭처링, 클래스와 모듈을 다룹니다.

13.1 템플릿 리터럴

템플릿 리터럴은 문자열을 다루는 새로운 방식으로, 여러 줄의 문자열이나 변수 값을 문자열 안에 간편하게 삽입할 수 있습니다. 기존의 문자열 결합 방식보다 훨씬 간결하고 가독성이 좋습니다.

13.1.1 문자열 삽입

템플릿 리터럴은 ``을 사용하여 문자열을 정의하며, ${}를 사용해 문자열 안에 변수를 삽입할 수 있습니다.

예시: 템플릿 리터럴 사용

javascript
const name = "Alice";
const age = 25;

const message = `Hello, my name is ${name}, and I am ${age} years old.`;
console.log(message);  // Hello, my name is Alice, and I am 25 years old.

13.1.2 여러 줄 문자열

템플릿 리터럴을 사용하면 여러 줄 문자열을 간편하게 작성할 수 있습니다.

예시: 여러 줄 문자열

javascript
const multiline = `This is a multiline string.
It spans multiple lines easily.`;
console.log(multiline);

13.2 let과 const

ES6 이전에는 변수를 선언할 때 var만 사용할 수 있었으나, ES6에서는 let과 const 키워드가 도입되었습니다. 이들은 블록 스코프를 가지며, 기존의 var와는 다른 동작을 합니다.

13.2.1 let

let은 블록 스코프를 가지며, 선언된 블록 내부에서만 접근 가능합니다. 이는 var의 함수 스코프와는 다릅니다.

예시: let 사용

javascript
let x = 10;
if (true) {
  let x = 20;  // 블록 내부의 x
  console.log(x);  // 20
}
console.log(x);  // 10 (블록 외부의 x)

13.2.2 const

const는 상수를 선언할 때 사용되며, 선언 이후 값을 변경할 수 없습니다. const는 객체와 배열에서도 사용되지만, 객체 자체는 변경할 수 없어도 객체의 속성은 수정할 수 있습니다.

예시: const 사용

javascript
const PI = 3.14;
// PI = 3.14159;  // 오류 발생

const person = { name: "Alice", age: 25 };
person.age = 26;  // 객체의 속성 변경 가능
console.log(person.age);  // 26

13.3 Arrow Function

Arrow Function는 함수 표현식의 간결한 문법입니다. 기존 함수 표현식과 비교하여 코드가 짧아지고, this의 동작이 달라집니다.

13.3.1 Arrow Function 기본 문법

Arrow Function은 => 기호를 사용해 작성하며, 함수의 본문이 한 줄일 경우 return 키워드를 생략할 수 있습니다.

예시: Arrow Function

javascript
// 기존 함수 표현식
const add = function(a, b) {
  return a + b;
};

// Arrow Function
const addArrow = (a, b) => a + b;

console.log(addArrow(5, 3));  // 8

13.3.2 Arrow Function과 this

Arrow Function은 자신만의 this를 가지지 않으며, 외부 스코프의 this를 그대로 사용합니다. 이는 콜백 함수에서 유용하게 사용됩니다.

예시: Arrow Function의 this

javascript
const person = {
  name: "Alice",
  greet: function() {
    setTimeout(() => {
      console.log(`Hello, my name is ${this.name}.`);
    }, 1000);
  }
};

person.greet();  // Hello, my name is Alice.

13.4 rest와 spread 문법

ES6에서는 함수나 배열, 객체에서 가변 인자를 다루는 rest와 spread 문법이 도입되었습니다. rest는 가변 인자를 처리할 때, spread는 배열이나 객체를 확장할 때 사용됩니다.

13.4.1 rest 문법

Rest 파라미터는 함수 인자에서 나머지 인자를 배열로 모아 처리합니다.

예시: rest 문법

javascript
function sum(...numbers) {
  return numbers.reduce((acc, curr) => acc + curr, 0);
}

console.log(sum(1, 2, 3, 4));  // 10

13.4.2 spread 문법

Spread 문법은 배열이나 객체를 확장하는 데 사용됩니다.

예시: 배열의 spread 문법

javascript
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2);  // [1, 2, 3, 4, 5]

예시: 객체의 spread 문법

javascript
const obj1 = { name: "Alice", age: 25 };
const obj2 = { ...obj1, job: "Developer" };
console.log(obj2);  // { name: "Alice", age: 25, job: "Developer" }

13.5 디스트럭처링 (객체, 배열)

디스트럭처링(Destructuring)은 배열이나 객체의 값을 쉽게 추출하여 변수에 할당하는 문법입니다. 배열과 객체 모두 디스트럭처링을 사용할 수 있습니다.

13.5.1 배열 디스트럭처링

배열 디스트럭처링을 사용하면 배열의 각 요소를 간편하게 변수에 할당할 수 있습니다.

예시: 배열 디스트럭처링

javascript
const numbers = [1, 2, 3];
const [a, b, c] = numbers;

console.log(a);  // 1
console.log(b);  // 2
console.log(c);  // 3

13.5.2 객체 디스트럭처링

객체 디스트럭처링을 사용하면 객체의 속성을 변수로 쉽게 추출할 수 있습니다.

예시: 객체 디스트럭처링

javascript
const person = { name: "Alice", age: 25, job: "Developer" };
const { name, job } = person;

console.log(name);  // Alice
console.log(job);   // Developer

13.5.3 기본값 할당

디스트럭처링을 사용할 때 기본값을 지정할 수도 있습니다.

예시: 기본값 할당

javascript
const person = { name: "Alice" };
const { name, age = 30 } = person;

console.log(age);  // 30 (age 속성이 없어서 기본값이 할당됨)

13.6 클래스와 모듈

13.6.1 클래스

ES6에서 도입된 클래스(class)는 객체지향 프로그래밍의 개념을 자바스크립트에 적용하기 위한 문법입니다. class 키워드를 사용해 클래스를 정의하고, constructor()를 통해 객체의 초기 상태를 설정할 수 있습니다.

예시: 클래스 정의

javascript
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    console.log(`Hello, my name is ${this.name}.`);
  }
}

const person1 = new Person("Alice", 25);
person1.greet();  // Hello, my name is Alice.

13.6.2 모듈 시스템

ES6에서는 자바스크립트 모듈 시스템이 도입되어, import와 export를 사용하여 모듈을 정의하고 가져올 수 있습니다.

예시: 모듈 사용

javascript
// math.js
export function add(a, b) {
  return a + b;
}

// main.js
import { add } from './math.js';

console.log(add(5, 3));  // 8

export를 사용하여 다른 파일에서 사용할 수 있도록 함수를 내보내고, import를 사용해 해당 함수를 가져옵니다.

ES6 이후 도입된 자바스크립트의 최신 문법들은 코드의 간결성과 가독성을 높이고, 더 효율적으로 작업할 수 있는 다양한 기능을 제공합니다. 템플릿 리터럴, let과 const, Arrow Function, rest와 spread 문법, 디스트럭처링, 클래스와 모듈 등은 현대 자바스크립트 개발에서 필수적으로 사용되는 기능입니다. 최신 문법을 잘 이해하고 활용하면, 더 견고하고 유지보수하기 쉬운 코드를 작성할 수 있습니다.