고급 JavaScript – ES6+ 기능과 활용법

byCode Keeper •

고급 JavaScript – ES6+ 기능과 활용법


JavaScript는 끊임없이 진화하며, ECMAScript 2015(ES6) 이후 많은 새로운 기능들이 도입되었습니다. 이러한 새로운 기능들은 코드의 가독성을 높이고, 개발 생산성을 향상시키며, 더 나은 성능을 제공합니다. 이번 포스팅에서는 "ES6 기능", "고급 JavaScript", "ES6 활용"을 중심으로 ES6+의 주요 기능과 그 활용법을 설명하겠습니다. 고급 개발자를 대상으로 상세히 설명하고, 예제를 통해 실습해 보겠습니다.


1. let과 const


ES6에서는 변수를 선언할 때 var 대신 let과 const를 사용할 수 있습니다. 이 둘은 블록 스코프를 가지며, const는 상수로 값이 변경되지 않습니다.


let


let은 블록 스코프를 가지며, 같은 블록 내에서 중복 선언할 수 없습니다.


let x = 10;
if (true) {
  let x = 20;
  console.log(x); // 20
}
console.log(x); // 10

const


const는 블록 스코프를 가지며, 초기화 이후 값이 변경되지 않습니다. 객체나 배열의 경우, 객체의 프로퍼티나 배열의 요소는 변경될 수 있습니다.


const y = 30;
// y = 40; // Error: Assignment to constant variable

const person = {
  name: 'John',
  age: 25
};

person.age = 26; // Allowed
console.log(person.age); // 26

2. 화살표 함수


화살표 함수는 간결한 문법으로 함수를 정의할 수 있게 해줍니다. this 바인딩이 정적으로 결정되며, 주변 컨텍스트를 가리킵니다.


const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

const square = x => x * x;
console.log(square(4)); // 16

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

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

3. 템플릿 리터럴


템플릿 리터럴은 백틱(`)을 사용하여 문자열을 정의하며, 문자열 내에 표현식을 포함할 수 있습니다. 멀티라인 문자열도 지원합니다.


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

const multiline = `
This is a
multiline
string.
`;
console.log(multiline);

4. 디스트럭처링 할당


디스트럭처링 할당은 배열이나 객체의 값을 변수로 간단히 추출할 수 있게 해줍니다.


배열 디스트럭처링


const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

const [first, , third] = [10, 20, 30];
console.log(first); // 10
console.log(third); // 30

객체 디스트럭처링


const person = {
  name: 'John',
  age: 25,
  city: 'New York'
};

const { name, age } = person;
console.log(name); // John
console.log(age); // 25

const { city, ...rest } = person;
console.log(city); // New York
console.log(rest); // { name: 'John', age: 25 }

5. 기본 파라미터


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


const greet = (name = 'Guest') => `Hello, ${name}`;
console.log(greet()); // Hello, Guest
console.log(greet('John')); // Hello, John

6. 스프레드 연산자와 나머지 매개변수


스프레드 연산자(...)는 배열이나 객체를 펼칠 수 있게 해줍니다. 나머지 매개변수는 여러 인수를 배열로 묶을 수 있게 해줍니다.


스프레드 연산자


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

const obj1 = { name: 'John', age: 25 };
const obj2 = { ...obj1, city: 'New York' };
console.log(obj2); // { name: 'John', age: 25, city: 'New York' }

나머지 매개변수


const sum = (...numbers) => numbers.reduce((acc, curr) => acc + curr, 0);
console.log(sum(1, 2, 3, 4)); // 10

7. 클래스


ES6에서는 클래스를 정의할 수 있는 문법이 추가되었습니다. 클래스는 객체 지향 프로그래밍을 쉽게 구현할 수 있게 해줍니다.


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

  greet() {
    console.log(`Hello, my name is ${this.name} and I am ${this.age} years old.`);
  }
}

const john = new Person('John', 25);
john.greet(); // Hello, my name is John and I am 25 years old.

8. 모듈


ES6에서는 모듈 시스템이 도입되어 파일 간의 의존성을 명확히 정의할 수 있습니다.


모듈 내보내기


math.js 파일에서 모듈을 내보냅니다.


// math.js
export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

모듈 가져오기


main.js 파일에서 모듈을 가져옵니다.


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

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

9. 비동기 프로그래밍 - 프로미스와 async/await


ES6에서는 비동기 작업을 처리하기 위한 프로미스가 도입되었습니다. 이후 ES8에서는 async/await가 추가되어 비동기 코드를 더 간결하고 읽기 쉽게 작성할 수 있습니다.


프로미스


const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
};

fetchData()
  .then(data => console.log(data)) // Data received
  .catch(error => console.error(error));

async/await


const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data received');
    }, 1000);
  });
};

const getData = async () => {
  try {
    const data = await fetchData();
    console.log(data); // Data received
  } catch (error) {
    console.error(error);
  }
};

getData();

10. 심볼


심볼은 ES6에서 새로 추가된 원시 데이터 타입으로, 고유하고 변경 불가능한 값을 나타냅니다. 주로 객체의 프로퍼티 키로 사용됩니다.


const uniqueKey = Symbol('key');
const obj = {
  [uniqueKey]: 'value'
};

console.log(obj[uniqueKey]); // value

결론


ES6 이후 도입된 다양한 기능들은 JavaScript의 생산성을 크게 향상시켰습니다. 이번 포스팅에서는 let과 const, 화살표 함수, 템플릿 리터럴, 디스트럭처링 할당, 기본 파라미터, 스프레드 연산자와 나머지 매개변수, 클래스, 모듈, 비동기 프로그래밍, 심볼 등 주요 ES6+ 기능들을 설명하고, 각각의 활용법을 예제를 통해 살펴보았습니다. 이러한 기능들을 잘 활용하면 더 읽기 쉽고 유지보수하기 쉬운 코드를 작성할 수 있습니다.


이 포스팅이 ES6+ 기능을 이해하고 활용하는 데 도움이 되길 바랍니다. 질문이나 추가 정보가 필요하시면 언제든지 댓글로 남겨주세요.

Tags:
다음 이전