안녕하세요! 🚀 웹 개발의 세계에 발을 들인 초보 개발자 여러분들을 환영합니다. 자바스크립트는 웹을 움직이는 핵심 언어이며, 그중에서도 ES6(ECMAScript 2015)는 자바스크립트에 혁명적인 변화를 가져왔습니다. 이 새로운 문법들은 코드를 훨씬 간결하고 가독성 높게 만들어주었죠. 복잡해 보이는 자바스크립트, ES6 문법 5가지 핵심만 알면 훨씬 쉽게 다가갈 수 있습니다. 지금부터 초보자도 반드시 알아야 할 ES6의 강력한 기능들을 함께 알아볼까요?
1. `let`과 `const`: 변수 선언의 새로운 기준 ✨
오랫동안 자바스크립트에서 변수를 선언할 때는 `var` 키워드를 사용했습니다. 하지만 `var`는 호이스팅(Hoisting)과 함수 스코프(Function Scope)라는 특성 때문에 개발자들에게 혼란을 주거나 예상치 못한 버그를 유발하기도 했죠. ES6는 이러한 문제점을 해결하기 위해 `let`과 `const`를 도입했습니다. 이제 `var`는 잊고 `let`과 `const`를 사용하세요!
let: 재할당 가능한 블록 스코프 변수
- `let`으로 선언된 변수는 선언된 블록 `{}` 안에서만 유효합니다.
- 변수의 값을 나중에 변경(재할당)할 수 있습니다.
function exampleLet() {
let greeting = "안녕하세요"; // let으로 변수 선언
if (true) {
let greeting = "Hello"; // 다른 블록 내부에서는 같은 이름의 변수 선언 가능
console.log(greeting); // 출력: Hello
}
console.log(greeting); // 출력: 안녕하세요
greeting = "반갑습니다"; // 값 재할당 가능
console.log(greeting); // 출력: 반갑습니다
}
exampleLet();
// console.log(greeting); // ReferenceError: greeting is not defined (함수 외부에서는 접근 불가)
const: 재할당 불가능한 블록 스코프 상수
- `const`는 “상수(Constant)”를 의미하며, 한 번 값을 할당하면 변경할 수 없습니다.
- `let`과 마찬가지로 블록 스코프를 가집니다.
- **주의**: 객체나 배열의 경우, `const`는 변수 자체가 아닌 ‘참조’를 상수로 만드는 것이므로, 객체나 배열 내부의 값은 변경할 수 있습니다. 😮
function exampleConst() {
const PI = 3.14159;
console.log(PI); // 출력: 3.14159
// PI = 3.14; // TypeError: Assignment to constant variable. (오류 발생!)
const person = { name: "Alice", age: 30 };
console.log(person); // 출력: { name: 'Alice', age: 30 }
person.age = 31; // 객체 내부의 속성 변경은 가능!
console.log(person); // 출력: { name: 'Alice', age: 31 }
// person = { name: "Bob" }; // TypeError: Assignment to constant variable. (오류 발생!)
}
exampleConst();
💡 팁: 특별한 경우가 아니라면 `const`를 기본으로 사용하고, 값이 변해야 할 때만 `let`을 사용하세요. 이렇게 하면 코드의 안정성과 가독성을 높일 수 있습니다.
2. 화살표 함수 (Arrow Functions): 간결함의 미학 ➡️
함수를 정의하는 새로운 방식인 화살표 함수는 코드를 훨씬 간결하게 만들어줍니다. 특히 콜백 함수(Callback Function)를 사용할 때 그 진가가 발휘되죠.
기존 함수 vs. 화살표 함수
// 🔸 기존 함수 선언 방식
function add(a, b) {
return a + b;
}
console.log(add(1, 2)); // 출력: 3
// ➡️ 화살표 함수 선언 방식
const addArrow = (a, b) => {
return a + b;
};
console.log(addArrow(1, 2)); // 출력: 3
더 간결하게!
함수 본문에 `return` 문 하나만 있다면, 중괄호 `{}`와 `return` 키워드를 생략할 수 있습니다. 이 경우 자동으로 값을 반환합니다.
// 매개변수가 하나일 때는 괄호도 생략 가능
const double = num => num * 2;
console.log(double(5)); // 출력: 10
// 매개변수가 없으면 빈 괄호 필요
const greet = () => "안녕하세요!";
console.log(greet()); // 출력: 안녕하세요!
`this` 바인딩의 차이점 (초보자는 가볍게 이해만!)
화살표 함수는 일반 함수와 다르게 자신만의 `this`를 가지지 않습니다. 대신, 함수가 선언될 당시의 `스코프`에서 `this`를 상속받습니다. 이는 특히 이벤트 핸들러나 비동기 콜백에서 `this`의 혼란을 줄여줍니다.
const person = {
name: "Minseok",
// 🔸 일반 함수: 'this'는 호출 시점에 따라 달라짐 (여기서는 window 또는 undefined)
sayHelloOld: function() {
console.log("Hello, " + this.name); // 'this'는 person 객체를 가리킴
setTimeout(function() {
console.log("Hello, " + this.name); // 'this'는 window 또는 undefined (🚨 문제 발생)
}, 1000);
},
// ➡️ 화살표 함수: 'this'는 선언될 때의 상위 스코프를 따름 (여기서는 person 객체)
sayHelloNew: function() {
console.log("Hi, " + this.name); // 'this'는 person 객체를 가리킴
setTimeout(() => { // 화살표 함수 사용!
console.log("Hi, " + this.name); // 'this'가 person 객체를 그대로 가리킴 (문제 해결!)
}, 1000);
}
};
person.sayHelloOld(); // 첫 번째 Hello는 Minseok, 두 번째 Hello는 undefined (또는 에러)
person.sayHelloNew(); // 두 번 모두 Hi, Minseok
3. 템플릿 리터럴 (Template Literals): 문자열을 더 스마트하게! 📝
문자열을 다룰 때, 특히 여러 변수를 조합해야 할 때 기존 방식은 불편했습니다. `+` 연산자를 계속 써야 했고, 줄 바꿈도 어려웠죠. 템플릿 리터럴은 이 모든 것을 백틱(“ ` “) 하나로 해결해줍니다! 👍
사용 방법
- 작은따옴표 `”`나 큰따옴표 `””` 대신 백틱(“ ` “)으로 문자열을 감쌉니다.
- 변수나 표현식을 문자열 안에 삽입할 때는 `${}` 문법을 사용합니다.
- 여러 줄로 문자열을 작성해도 그대로 적용됩니다.
const name = "김철수";
const age = 25;
const job = "개발자";
// 🔸 기존 문자열 조합 방식
const oldGreeting = "안녕하세요, " + name + "님. 나이는 " + age + "살이고 직업은 " + job + "입니다.";
console.log(oldGreeting);
// ➡️ 템플릿 리터럴 사용 방식
const newGreeting = `안녕하세요, ${name}님. 나이는 ${age}살이고 직업은 ${job}입니다.`;
console.log(newGreeting);
// 여러 줄 문자열도 손쉽게!
const multiLine = `
안녕하세요, ${name}님!
환영합니다.
당신은 ${job}이시군요! 😃
`;
console.log(multiLine);
어떤 방식이 더 깔끔하고 읽기 쉬운가요? 당연히 템플릿 리터럴이겠죠! 이제 복잡한 문자열 조합은 잊으세요!
4. 구조 분해 할당 (Destructuring Assignment): 데이터 추출의 마법 🪄
객체나 배열에서 필요한 값만 쏙쏙 뽑아내고 싶을 때, 구조 분해 할당은 정말 유용합니다. 코드를 훨씬 간결하고 명확하게 만들어줍니다.
객체 구조 분해
객체의 속성을 변수로 쉽게 추출할 수 있습니다. 속성 이름과 변수 이름이 같으면 더 편리합니다.
const user = {
id: 1,
username: "john_doe",
email: "john@example.com",
isAdmin: false
};
// 🔸 기존 방식: 객체 속성에 하나씩 접근
// const id = user.id;
// const username = user.username;
// const email = user.email;
// ➡️ 구조 분해 할당
const { id, username, email } = user;
console.log(id, username, email); // 출력: 1 'john_doe' 'john@example.com'
// 변수 이름 변경도 가능 (별칭 사용)
const { username: userNameAlias, isAdmin } = user;
console.log(userNameAlias, isAdmin); // 출력: 'john_doe' false
// 기본값 설정
const { department = "IT" } = user; // user 객체에 department가 없으면 'IT'가 기본값으로 할당
console.log(department); // 출력: IT
배열 구조 분해
배열의 요소를 변수로 쉽게 추출할 수 있습니다. 순서에 따라 할당됩니다.
const colors = ["red", "green", "blue", "yellow"];
// 🔸 기존 방식
// const firstColor = colors[0];
// const secondColor = colors[1];
// ➡️ 구조 분해 할당
const [firstColor, secondColor, thirdColor] = colors;
console.log(firstColor, secondColor, thirdColor); // 출력: 'red' 'green' 'blue'
// 특정 요소 건너뛰기
const [, , myColor] = colors; // 첫 번째, 두 번째 건너뛰고 세 번째 요소
console.log(myColor); // 출력: 'blue'
// 나머지 요소들을 배열로 받기 (Rest Parameter와 유사)
const [c1, c2, ...restColors] = colors;
console.log(c1, c2); // 출력: 'red' 'green'
console.log(restColors); // 출력: ['blue', 'yellow']
구조 분해 할당은 함수에서 여러 값을 반환하거나, 복잡한 객체/배열에서 특정 데이터만 뽑아낼 때 매우 유용하게 쓰입니다.
5. 스프레드 문법 (Spread Syntax)과 레스트 파라미터 (Rest Parameters): 유연한 데이터 처리 ↔️
스프레드 문법(`…`)은 ES6에서 도입된 매우 강력하고 다재다능한 기능입니다. 이 문법은 두 가지 주요 방식으로 사용됩니다: ‘스프레드 문법’과 ‘레스트 파라미터’. 문법은 똑같이 점 세 개(`…`)이지만, 사용되는 맥락에 따라 역할이 달라집니다.
스프레드 문법 (Spread Syntax): 배열/객체 확장 및 복사
스프레드 문법은 배열이나 객체의 요소를 ‘펼쳐서’ 다른 배열이나 객체에 삽입하거나, 함수 호출 시 인수로 전달할 때 사용됩니다. 배열이나 객체를 복사할 때도 유용합니다.
// 🔸 배열 복사 및 병합
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // arr1의 요소를 펼쳐서 arr2에 추가
console.log(arr2); // 출력: [1, 2, 3, 4, 5]
const arr3 = [6, 7];
const combinedArr = [...arr1, ...arr3]; // 두 배열을 병합
console.log(combinedArr); // 출력: [1, 2, 3, 6, 7]
// 🔸 객체 복사 및 병합
const obj1 = { a: 1, b: 2 };
const obj2 = { ...obj1, c: 3 }; // obj1의 속성을 펼쳐서 obj2에 추가
console.log(obj2); // 출력: { a: 1, b: 2, c: 3 }
const obj3 = { c: 4, d: 5 };
const combinedObj = { ...obj1, ...obj3 }; // 두 객체를 병합 (속성 이름이 같으면 뒤의 값이 덮어씀)
console.log(combinedObj); // 출력: { a: 1, b: 2, c: 4, d: 5 }
// 🔸 함수 인수로 전달
function sum(x, y, z) {
return x + y + z;
}
const numbers = [1, 2, 3];
console.log(sum(...numbers)); // 배열의 요소를 각각의 인수로 전달
// 출력: 6 (sum(1, 2, 3)과 동일)
레스트 파라미터 (Rest Parameters): 나머지 인수를 배열로 모으기
레스트 파라미터는 함수의 매개변수 목록에서 사용되며, 전달된 인수들 중 ‘나머지’를 배열로 묶는 역할을 합니다. 항상 함수의 마지막 매개변수로 사용되어야 합니다.
function getAllArgs(firstArg, ...restArgs) { // firstArg를 제외한 나머지 인수는 restArgs 배열로!
console.log("첫 번째 인수:", firstArg);
console.log("나머지 인수:", restArgs); // 출력: [2, 3, 4, 5]
return restArgs.reduce((acc, curr) => acc + curr, 0); // 나머지 인수들의 합계
}
const totalSum = getAllArgs(1, 2, 3, 4, 5);
console.log("나머지 인수의 총합:", totalSum); // 출력: 14
// 인수가 restArgs로만 전달될 때
function printAll(...args) {
console.log(args);
}
printAll("apple", "banana", "orange"); // 출력: ['apple', 'banana', 'orange']
스프레드 문법과 레스트 파라미터는 코드를 더 유연하고 동적으로 작성할 수 있게 도와주어, 특히 배열과 객체, 그리고 함수에서 다양하게 활용됩니다.
결론: ES6로 더 스마트한 자바스크립트 개발을! 🎓
오늘 우리는 자바스크립트 ES6의 핵심 문법 5가지, 즉 `let`/`const`, 화살표 함수, 템플릿 리터럴, 구조 분해 할당, 그리고 스프레드/레스트 문법에 대해 알아보았습니다. 이 문법들은 코드의 가독성, 유지보수성, 그리고 개발 효율성을 크게 향상시켜 줍니다. 현대 자바스크립트 개발에서 이 문법들은 필수 중의 필수이니, 꼭 익숙해지셔야 합니다!
처음에는 조금 낯설게 느껴질 수 있지만, 직접 코드를 작성하고 다양한 예제를 통해 연습하다 보면 금세 손에 익을 것입니다. 💪 지금 바로 VS Code를 열고 오늘 배운 문법들을 활용하여 자신만의 코드를 만들어보세요! 이 문법들이 여러분의 자바스크립트 실력을 한 단계 업그레이드시켜 줄 것이라고 확신합니다. 궁금한 점이 있다면 언제든지 댓글로 질문해주세요! 다음 포스팅에서 또 만나요! 👋