모던 자바스크립트 ES6+: 최신 JS 기능들
자바스크립트는 계속해서 진화하고 있으며, ES6(ES2015) 이후 많은 새로운 기능들이 추가되었습니다. 이 강의에서는 ES6 이후에 추가된 주요 기능들을 살펴보고, 이들이 자바스크립트 프로그래밍에 어떻게 활용될 수 있는지 알아보겠습니다.
let과 const
ES6에서는 var 대신 let과 const를 도입하여 블록 스코프 지역 변수를 선언합니다. let은 값을 재할당할 수 있는 변수를 선언할 때 사용되며, const는 재할당이 불가능한 상수를 선언할 때 사용됩니다.
let x = 10;
x = 20; // 가능
const y = 10;
y = 20; // TypeError: Assignment to constant variable.화살표 함수
화살표 함수는 function 키워드 대신 사용되며, 보다 간결한 문법과 this의 렉시컬 바인딩을 제공합니다.
const add = (a, b) => a + b;
console.log(add(1, 2)); // 3
const numbers = [1, 2, 3];
const doubled = numbers.map(number => number * 2);
console.log(doubled); // [2, 4, 6]템플릿 리터럴
템플릿 리터럴은 백틱()을 사용하여 문자열을 표현하며, 내부에 ${}`를 사용하여 표현식을 삽입할 수 있습니다. 이는 문자열 연결을 더욱 쉽고 직관적으로 만들어 줍니다.
const name = "World";
console.log(`Hello, ${name}!`); // Hello, World!구조 분해 할당
구조 분해 할당을 사용하면 배열이나 객체의 속성을 쉽게 변수에 할당할 수 있습니다.
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2
const {name, age} = {name: "Alice", age: 25};
console.log(name); // Alice
console.log(age); // 25기본 매개변수
함수 매개변수에 기본값을 설정할 수 있습니다, 이를 통해 함수 호출 시 인자가 전달되지 않을 경우 기본값을 사용할 수 있습니다.
function greet(name = "Guest") {
console.log(`Hello, ${name}!`);
}
greet(); // Hello, Guest!
greet("Alice"); // Hello, Alice!모듈
ES6에서는 모듈 시스템을 도입하였습니다. export 키워드를 사용하여 모듈을 생성하고, import를 사용하여 필요한 곳에서 모듈을 불러올 수 있습니다.
// math.js
export function add(x, y) {
return x + y;
}
// app.js
import { add } from './math.js';
console.log(add(4, 5)); // 9Promise와 비동기 프로그래밍
ES6에서는 비동기 프로그래밍을 지원하기 위해 Promise를 도입했습니다. Promise는 비동기 작업의 완료 후 결과를 다룰 수 있는 방법을 제공합니다.
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data fetched"), 2000);
});
};
fetchData().then(data => console.log(data)); // 2초 후 "Data fetched"비동기 프로그래밍의 진화: Async/Await
ES8(ES2017)에서 도입된 async와 await는 Promise를 더욱 간결하게 사용할 수 있게 해주는 문법적 설탕입니다. 이를 통해 비동기 코드를 동기 코드처럼 읽고 쓸 수 있습니다.
async function getUserData(userId) {
const response = await fetch(`https://api.example.com/users/${userId}`);
const data = await response.json();
return data;
}
getUserData(1)
.then(data => console.log(data))
.catch(error => console.error('Error fetching user data:', error));이 코드는 사용자 데이터를 비동기적으로 가져오는 함수를 보여 줍니다. async 함수 내부에서 await을 사용하여 비동기 호출의 결과를 기다리고, 결과가 준비되면 나머지 코드를 실행합니다. 이는 콜백 함수를 여러 겹 중첩하는 것보다 훨씬 깔끔하고 읽기 쉬운 코드를 만들어 줍니다.
클래스와 객체지향 프로그래밍
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 alice = new Person('Alice', 30);
alice.greet();이 예제는 Person 클래스를 정의하고, 이 클래스의 인스턴스를 생성하여 greet 메서드를 호출합니다. 클래스를 사용하면 관련 데이터와 메서드를 함께 묶어 관리할 수 있으며, 코드의 재사용성과 유지보수성이 향상됩니다.
새로운 데이터 구조
ES6는 Map, Set 등의 새로운 데이터 구조도 소개합니다. 이 데이터 구조들은 자바스크립트 애플리케이션에서 데이터를 더 효율적으로 관리할 수 있는 방법을 제공합니다.
const map = new Map();
map.set('key1', 'value1');
map.set('key2', 'value2');
console.log(map.get('key1')); // value1
const set = new Set([1, 2, 3, 4, 4, 2]);
console.log(set.size); // 4Map은 키-값 쌍을 저장하는 구조로, 객체보다 유연하고 효율적인 데이터 관리를 가능하게 합니다. Set은 중복 없는 유니크한 값의 집합을 제공합니다. 이러한 구조들은 알고리즘 구현이나 데이터 관리에 매우 유용합니다.
결론
모던 자바스크립트의 기능들은 개발자에게 더 많은 도구와 기능을 제공하여, 보다 효율적이고 현대적인 웹 애플리케이션 개발을 가능하게 합니다. 이러한 최신 기능들을 활용하여 더욱 강력하고 효율적인 코드를 작성할 수 있습니다. 모든 웹 개발자는 이러한 기능들을 이해하고 활용할 줄 알아야 합니다, 그래야만 더욱 동적이고 상호작용이 풍부한 웹 경험을 사용자에게 제공할 수 있습니다.
댓글