[자바스크립트 14일 완전정복] 7일차 - ES6+ 문법과 최신 자바스크립트

 

 

자바스크립트는 지속적으로 발전하고 있으며, ES6(ECMAScript 2015) 이후 도입된 새로운 문법들은 코드를 더 간결하고 직관적으로 작성할 수 있도록 도와줍니다. 오늘은 ES6+에서 추가된 핵심 개념인 템플릿 리터럴, 구조 분해 할당, 기본 매개변수, 스프레드 연산자, let과 const의 차이를 학습해 보겠습니다.

 

 

---

 

1. 템플릿 리터럴 (Template Literal)

기존 문자열을 다룰 때는 ", '로 감싸야 하고, 문자열 안에 변수를 넣으려면 + 연산자를 사용해야 했어요. **템플릿 리터럴(Template Literal)**을 사용하면 백틱(```)을 이용해 더 직관적으로 문자열을 작성할 수 있습니다.

1.1 기본 사용법

let name = "이예나";
let age = 28;

// 기존 방식 (ES5)
console.log("안녕하세요, 제 이름은 " + name + "이고, 나이는 " + age + "살입니다.");

// 템플릿 리터럴 (ES6+)
console.log(`안녕하세요, 제 이름은 ${name}이고, 나이는 ${age}살입니다.`);

✔ ${변수} 문법을 사용하면 문자열 안에서 쉽게 변수를 사용할 수 있음

1.2 여러 줄 문자열

기존에는 여러 줄 문자열을 만들려면 \n을 사용해야 했지만, 템플릿 리터럴을 사용하면 그냥 엔터를 치면 됨

let message = `안녕하세요,
이 문장은 여러 줄로 작성되었습니다.
자바스크립트 배우는 중입니다!`;
console.log(message);

 

 

 

---

 

2. 구조 분해 할당 (Destructuring)

배열이나 객체의 값을 쉽게 추출하는 문법으로, 데이터를 다룰 때 유용하게 사용할 수 있습니다.

2.1 배열 구조 분해 할당

let numbers = [10, 20, 30];

// 기존 방식
let first = numbers[0];
let second = numbers[1];

// 구조 분해 할당
let [a, b] = numbers;

console.log(a); // 10
console.log(b); // 20

✔ 배열 요소를 변수에 한 번에 할당할 수 있음

2.2 객체 구조 분해 할당

let user = { name: "이예나", age: 28, job: "디자이너" };

// 기존 방식
let userName = user.name;
let userAge = user.age;

// 구조 분해 할당
let { name, age, job } = user;

console.log(name); // "이예나"
console.log(age); // 28
console.log(job); // "디자이너"

✔ 객체의 키와 같은 이름의 변수에 값을 자동으로 할당

 

---

 

3. 기본 매개변수 (Default Parameters)

함수의 매개변수에 기본값을 설정하여, 인자가 없는 경우에도 안정적으로 동작하도록 할 수 있습니다.

function greet(name = "친구") {
  console.log(`안녕하세요, ${name}님!`);
}

greet(); // "안녕하세요, 친구님!"
greet("이예나"); // "안녕하세요, 이예나님!"

✔ 함수 호출 시 인자를 전달하지 않으면 기본값 사용

 

---

 

4. 스프레드 연산자 (...)

스프레드 연산자(...)는 배열이나 객체를 펼쳐서 사용할 때 유용한 기능입니다.

4.1 배열에서 활용

let arr1 = [1, 2, 3];
let arr2 = [4, 5, 6];

// 기존 방식
let combined = arr1.concat(arr2);

// 스프레드 연산자 활용
let combinedSpread = [...arr1, ...arr2];

console.log(combinedSpread); // [1, 2, 3, 4, 5, 6]

✔ 여러 배열을 쉽게 합칠 수 있음

4.2 객체에서 활용

let user = { name: "이예나", age: 28 };
let updatedUser = { ...user, job: "디자이너" };

console.log(updatedUser); 
// { name: "이예나", age: 28, job: "디자이너" }

✔ 기존 객체의 데이터를 유지하면서 새로운 값을 추가할 때 유용

4.3 함수 인자에서 활용

function sum(a, b, c) {
  return a + b + c;
}

let numbers = [10, 20, 30];
console.log(sum(...numbers)); // 60

✔ 배열 요소를 함수의 인자로 쉽게 전달 가능

 

---

 

5. let과 const의 차이

5.1 var의 문제점

기존에는 변수를 선언할 때 var를 사용했지만, 블록 스코프 문제와 호이스팅 이슈로 인해 let과 const가 도입되었습니다.

if (true) {
  var test = "Hello";
}
console.log(test); // "Hello" (블록 바깥에서도 접근 가능)

✔ var는 함수 스코프만 가지며 블록 {} 내부에서도 전역처럼 동작하여 예기치 않은 오류 발생 가능

5.2 let - 재할당 가능

let name = "Alice";
name = "Bob"; // 가능
console.log(name); // "Bob"

✔ let은 재할당이 가능하지만, 블록 스코프를 가짐

5.3 const - 재할당 불가능

const age = 28;
age = 30; // ❌ 오류 발생 (재할당 불가능)

✔ const는 값 변경이 불가능하므로 상수를 선언할 때 사용

 

---

 

6. let vs. const 정리

선언 방식 var let const

블록 스코프	❌ 없음	✅ 있음	✅ 있음
재할당	✅ 가능	✅ 가능	❌ 불가능
재선언	✅ 가능	❌ 불가능	❌ 불가능
호이스팅	✅ 가능 (초기화 안 됨)	✅ 가능 (초기화 안 됨)	✅ 가능 (초기화 안 됨)

✔ const를 기본으로 사용하고, 값이 변할 필요가 있을 때만 let 사용

 

---

 

 

 

오늘은 최신 자바스크립트(ES6+)의 핵심 문법을 배웠어요.
✅ 템플릿 리터럴을 사용하면 가독성이 좋은 문자열을 만들 수 있음
✅ 구조 분해 할당으로 배열과 객체에서 원하는 값을 쉽게 추출 가능
✅ 기본 매개변수를 설정하면 예외적인 경우에도 함수가 안정적으로 동작
✅ 스프레드 연산자를 활용하면 배열과 객체를 더 편리하게 다룰 수 있음
✅ let과 const를 사용하여 가독성과 안정성이 높은 코드 작성 가능

다음 강좌에서는 비동기 프로그래밍과 async/await의 개념을 알아보겠습니다! 🚀