JavaScript ES6 주요 문법 (let, const, arrow function)

ECMAScript 6(ES6)은 자바스크립트의 주요 업데이트 중 하나로, 프로그래머들이 더 쉽고 간결하게 코드를 작성할 수 있도록 다양한 새로운 기능과 문법을 도입했습니다. 이 글에서는 ES6의 주요 문법과 기능을 설명하고, 이를 실제 예제와 함께 살펴봅니다.

let과 const 키워드

let과 const는 변수를 선언하는 새로운 방식으로, 기존의 var보다 더 안전하고 예측 가능한 방식으로 작동합니다.

• let: 블록 스코프(block scope)를 가지며, 재할당이 가능합니다.
• const: 블록 스코프를 가지며, 선언과 동시에 초기화해야 하고, 재할당이 불가능합니다.

예제

// let 사용
let score = 100;
if (true) {
  let score = 50; // 블록 스코프
  console.log(score); // 50
}
console.log(score); // 100

// const 사용
const userName = '홍길동';
console.log(userName); // 홍길동

// userName = '이몽룡'; // TypeError: Assignment to constant variable.

---

화살표 함수(arrow function)

화살표 함수는 더 짧은 문법으로 함수를 정의하며, 자신만의 this 값을 가지지 않는 것이 특징입니다.

예제

// 일반 함수
const add = function (a, b) {
  return a + b;
};

// 화살표 함수
const addArrow = (a, b) => a + b;

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

---

템플릿 리터럴(template literal)

템플릿 리터럴은 문자열을 더 간단하고 가독성 있게 작성할 수 있도록 돕습니다. 백틱(`)을 사용하며, ${expression}으로 변수를 삽입할 수 있습니다.

예제

const user = '홍길동';
const age = 25;

const message = `안녕하세요, 제 이름은 ${user}이고, 나이는 ${age}살입니다.`;
console.log(message);
// 출력: 안녕하세요, 제 이름은 홍길동이고, 나이는 25살입니다.

---

디스트럭처링 할당(destructuring assignment)

디스트럭처링 할당은 배열이나 객체의 값을 쉽게 추출할 수 있는 문법입니다.

예제

// 배열 디스트럭처링
const fruits = ['사과', '바나나', '포도'];
const [first, second] = fruits;

console.log(first); // 사과
console.log(second); // 바나나

// 객체 디스트럭처링
const user = { name: '홍길동', age: 25 };
const { name, age } = user;

console.log(name); // 홍길동
console.log(age); // 25

---

클래스(class)

ES6에서 클래스는 class 키워드를 통해 정의할 수 있습니다. 이는 프로토타입 기반 객체지향 프로그래밍을 더 명확하고 간결하게 표현합니다.

예제

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

  introduce() {
    console.log(`안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살입니다.`);
  }
}

const person1 = new Person('홍길동', 25);
person1.introduce();
// 출력: 안녕하세요, 제 이름은 홍길동이고, 나이는 25살입니다.

---

모듈(module)

ES6 모듈은 코드의 재사용성을 높이고, 의존성을 관리하는 데 유용합니다. export와 import 키워드를 사용합니다.

예제

math.js

export const add = (a, b) => a + b;
export const subtract = (a, b) => a - b;

main.js

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

console.log(add(10, 5)); // 15
console.log(subtract(10, 5)); // 5

---

프로미스(Promise)

Promise는 비동기 작업의 처리 결과를 다루는 객체입니다. 주로 then과 catch 메서드를 사용합니다.

예제

const fetchUserData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('사용자 데이터');
    }, 1000);
  });
};

fetchUserData()
  .then((data) => {
    console.log(data); // 사용자 데이터
  })
  .catch((error) => {
    console.error(error);
  });

---

결론

ES6는 자바스크립트 개발 경험을 대폭 개선하는 많은 기능을 도입했습니다. 이 글에서 소개한 주요 문법은 ES6의 핵심 중 일부에 불과합니다. 실무에서 이를 적극적으로 활용하여 더 효율적이고 가독성 높은 코드를 작성해 보세요.