[JavaScript] ES6 : 현대 JavaScript의 기초

JavaScript의 중요한 버전인 ES6(ECMAScript 2015)에 대해 알아보겠습니다.

ES6는 JavaScript에 많은 새로운 기능을 도입하여 코드를 더 깔끔하고 효율적으로 작성할 수 있게 해 주었습니다. 초보자분들도 이해할 수 있도록 예제와 함께 설명해 드리겠습니다.

1. let 과 const

ES6 이전에는 변수 선언을 위하 var 만 사용했습니다. ES6에서는 let과 const가 추가되었습니다.

• let : 블록 스코프 변수를 선언합니다. 값의 재할당이 가능합니다.

• const : 상수를 선언합니다. 한번 할당하면 재할당할 수 없습니다.

let count = 1;
count = 2; // 가능

const PI = 3.14;
PI = 3.15; // 오류 발생

let과 const를 사용하면 변수의 스코프를 더 잘 제어할 수 있고, 의도치 않은 재할당을 방지할 수 있습니다.

2. 화살표 함수

화살표 함수는 함수를 더 간결하게 작성 할 수 있게 해 줍니다.

// 기존 함수
function add(a, b) {
  return a + b;
}

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

화살표 함수는 특히 콜백 함수를 작성할 때 유용합니다.

const numbers = [1, 2, 3, 4, 5];

// 기존 방식
const doubled = numbers.map(function(num) {
  return num * 2;
});

// 화살표 함수 사용
const doubled = numbers.map(num => num * 2);

3. 템플릿 리터럴

템플릿 리터럴을 사용하면 문자열 안에 변수나 표현식을 쉽게 삽입할 수 있습니다.

const name = 'Alice';
const age = 25;

// 기존 방식
console.log('제 이름은 ' + name + '이고, 나이는 ' + age + '살입니다.');

// 템플릿 리터럴 사용
console.log(`제 이름은 ${name}이고, 나이는 ${age}살입니다.`);

4. 구조분해 할당

구조 분해 할당을 사용하면 배열이나 객체의 속성을 쉽게 추출하여 변수에 할당할 수 있습니다.

// 배열 구조 분해
const colors = ['red', 'green', 'blue'];
const [first, second] = colors;
console.log(first); // 'red'
console.log(second); // 'green'

// 객체 구조 분해
const person = { name: 'Bob', age: 30 };
const { name, age } = person;
console.log(name); // 'Bob'
console.log(age); // 30

5. 기본 매개변수

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

function greet(name = 'Guest') {
  console.log(`Hello, ${name}!`);
}

greet(); // "Hello, Guest!"
greet('Alice'); // "Hello, Alice!"

6. 스프레드 연산자

스프레드 연산자... 를 사용하면 배열이나 객체를 쉽게 펼칠 수 있습니다.

// 배열 합치기
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];
const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

// 객체 복사 및 속성 추가
const obj1 = { x: 1, y: 2 };
const obj2 = { ...obj1, z: 3 };
console.log(obj2); // { x: 1, y: 2, z: 3 }

7. 클래스

ES6에서는 클래스 문법이 도입되어 객체지향 프로그래밍을 더 쉽게 할 수 있게 되었습니다.

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a sound.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

const dog = new Dog('Rex');
dog.speak(); // "Rex barks."

8. 프로미스

프로미스는 비동기 작업을 더 쉽게 처리할 수 있게 해 줍니다.

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const data = { id: 1, name: 'John' };
      resolve(data);
      // 에러가 발생했다면: reject(new Error('데이터를 가져오는데 실패했습니다.'));
    }, 1000);
  });
};

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

9. 모듈

ES6에서는 모듈 시스템이 도입되어 코드를 여러 파일로 나누고 필요한 부분만 가져와 사용할 수 있게 되었습니다.

// 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(5, 3)); // 8
console.log(subtract(10, 4)); // 6

10. Symbol

Symbol은 유일한 식별자를 만들 때 사용하는 새로운 원시 데이터 타입입니다.

const id = Symbol('id');
const user = {
  name: 'John',
  [id]: 123
};

console.log(user[id]); // 123

ES6는 JavaScript에 많은 혁신적인 기능들을 도입했습니다. 이러한 기능들은 코드를 더 읽기 쉽고, 유지보수하기 쉽게 만들어줍니다. 위에서 설명한 기능들은 ES6의 일부에 불과하며, 이 외에도 더 많은 유용한 기능들이 있습니다.

초보자분들은 이러한 기능들을 하나씩 익혀가면서 점진적으로 코드에 적용해 보시기 바랍니다.

처음에는 모든 기능을 한꺼번에 사용하려 하지 말고 가장 자주 사용되는 기능(예: let/const, 화살표함수, 템플릿리터럴)부터 시작해 보세요.

ES6의 기능들을 잘 활용하면 더 효율적이고 현대적인 JavaScript코드를 작성할 수 있습니다.

개발