JavaScript 기초 <9. ES6 이후 추가된 주요 문법 (화살표 함수, 템플릿 리터럴 등)>

자바스크립트 JavaScript

9. ES6 이후 추가된 주요 문법 (화살표 함수, 템플릿 리터럴 등) 

 

안녕하세요! 태마입니다.

JavaScript 기초 강좌입니다.

 

강좌의 경우 

1. 주제 간단 정리

2. 상세 주제 정리

으로 이루어져 있습니다.

 

자바스크립트 JavaScript

포스팅 시작하겠습니다 :)

 

 

 

---

 

1. 주제 간단 정리

 

1. ES6(ECMAScript 2015)란?

ES6(ECMAScript 2015)는 JavaScript의 주요 업데이트 중 하나로, 코드를 더욱 간결하고 강력하게 작성할 수 있도록 많은 기능이 추가된 버전입니다.

📌 ES6 이후 새로운 문법을 익히면, 더 효율적이고 현대적인 JavaScript 코드를 작성할 수 있음!

---

 

2. let과 const – 변수 선언 방식 개선

ES6 이전에는 var로만 변수를 선언했지만, let과 const가 추가되었습니다.

let x = 10;  // 변경 가능
const y = 20; // 변경 불가능

✅ let과 const를 사용하면 코드의 가독성과 안정성이 향상됨!

---

 

3. 화살표 함수(Arrow Function) – 더 간결한 함수 표현

기존의 함수 선언 방식보다 짧고 직관적으로 사용할 수 있습니다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5

✅ 화살표 함수는 this 바인딩이 다르게 동작하므로 주의해야 함!

---

 

4. 템플릿 리터럴(Template Literal) – 문자열 조합을 쉽게!

기존의 문자열 연결(+) 방식 대신, 백틱(```)을 사용하여 가독성을 높였습니다.

const name = "Alice";
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // "안녕하세요, Alice님!"

✅ 템플릿 리터럴을 사용하면 줄바꿈도 쉽게 가능하다!

---

✅ 여기까지 ES6 이후 추가된 주요 문법을 배웠습니다!
👉 "그렇다면, this 키워드는 화살표 함수에서 어떻게 다르게 동작할까?"
✅ 2부에서 this의 차이점, 구조 분해 할당, 나머지 매개변수 등의 고급 문법을 배워봅시다!

반응형

---

 

2. 상세 주제 정리

 

1. 화살표 함수와 this의 차이점

화살표 함수에서 this는 일반 함수와 다르게 동작합니다.

✅ 1) 일반 함수에서 this

const obj = {
    name: "Alice",
    showThis: function() {
        console.log(this.name);
    }
};
obj.showThis(); // "Alice"

📌 일반 함수에서 this는 해당 객체를 가리킨다!

✅ 2) 화살표 함수에서 this

const obj = {
    name: "Alice",
    showThis: () => {
        console.log(this.name);
    }
};
obj.showThis(); // undefined

📌 화살표 함수는 this를 바인딩하지 않고, 상위 스코프의 this를 사용함!

---

 

2. 구조 분해 할당(Destructuring Assignment)

객체 또는 배열의 값을 쉽게 추출할 수 있는 문법입니다.

✅ 1) 객체 구조 분해 할당

const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name, age); // "Alice" 25

✅ 2) 배열 구조 분해 할당

const colors = ["red", "green", "blue"];
const [first, second] = colors;
console.log(first, second); // "red" "green"

📌 구조 분해 할당을 사용하면 코드의 가독성이 향상됨.

---

 

3. 나머지 매개변수(Rest Parameter)와 스프레드 연산자(Spread Operator)

✅ 1) 나머지 매개변수(Rest Parameter)

function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15

📌 나머지 매개변수를 사용하면 여러 개의 인수를 배열로 받을 수 있음!

✅ 2) 스프레드 연산자(Spread Operator)

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5];
console.log(arr2); // [1, 2, 3, 4, 5]

📌 배열을 쉽게 복사하고 확장할 수 있는 강력한 기능!

---

 

✅ 지금까지 ES6 이후 추가된 다양한 문법을 상세히 배웠습니다!
👉 "그렇다면, this는 왜 이렇게 헷갈릴까? 그리고 실행 컨텍스트에서 어떻게 다르게 동작할까?"
✅ 다음 회차에서 this의 개념을 더욱 깊이 있게 배워봅시다! 🚀