[JS] ES6 문법

🗣️ 자바스크립트 ES6 문법에서 새로 추가된 문법에 대해 설명해주세요.

• 의도: 지원자가 ES6의 주요 기능과 그 활용 방법에 대해 알고 있는지 평가

• 팁: let, const, 화살표 함수, 템플릿 리터럴, 디스트럭처링, 기본 파라미터, 스프레드 연산자 등에 대해 설명한다.

• 모범 답안

  ES6에서는 자바스크립트의 가독성과 유지보수성을 높이기 위해 여러 새로운 문법이 추가되었습니다.

  대표적으로 let과 const가 도입되어 블록 스코프를 가지게 되었고, 변수의 재선언이나 재할당을 명확히 구분할 수 있게 되었습니다.
  또한 화살표 함수가 추가되어 함수를 더 간결하게 작성할 수 있고, this가 상위 스코프를 유지한다는 장점이 있습니다.

  템플릿 리터럴을 사용하면 문자열 안에서 변수를 쉽게 삽입할 수 있어 가독성이 높아졌고,
  디스트럭처링, 즉 비구조화 할당을 통해 배열이나 객체에서 필요한 값을 간단히 꺼낼 수 있게 되었습니다.

  함수의 기본 파라미터 문법을 이용하면 인자가 전달되지 않았을 때 기본값을 설정할 수 있고,
  스프레드 연산자를 사용하면 배열이나 객체를 복사하거나 합칠 때 훨씬 더 간단하게 처리할 수 있습니다.

  이러한 ES6 문법들은 전체적으로 코드의 가독성과 유지보수성을 크게 향상시킨 변화라고 할 수 있습니다.

---

📝 개념 정리

🌟 let, const — 블록 스코프 변수 선언

ES6에서는 var 대신 let과 const가 도입되어 스코프(유효 범위)가 블록 단위로 제한됨

• let: 재할당 가능, 재선언 불가
• const: 재할당 불가, 재선언 불가 → 의도치 않은 변수 오염 방지 및 코드 안정성 향상

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

const PI = 3.14;
PI = 3.1415; // ❌ 오류 (재할당 불가)

---

🌟 화살표 함수 (Arrow Function)

• function 키워드 대신 간결한 문법으로 함수를 작성할 수 있음
• this가 상위 스코프를 유지한다는 특징이 있어 콜백 함수 내에서도 직관적인 동작을 보장함

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

// 기존 function 표현
function addOld(a, b) {
  return a + b;
}

---

🌟 템플릿 리터럴 (Template Literal)

• 문자열을 백틱(`)으로 감싸고 ${}로 변수나 표현식을 바로 삽입할 수 있음
• 문자열 연결(+) 방식보다 가독성이 뛰어나며, 줄바꿈도 자연스럽게 표현할 수 있음

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

---

🌟 디스트럭처링 (Destructuring)

• 배열이나 객체에서 필요한 값만 간결하게 추출할 수 있는 문법
• 변수를 한 줄로 선언할 수 있어 코드가 깔끔해짐

// 배열 디스트럭처링
const [a, b] = [1, 2];
console.log(a); // 1
console.log(b); // 2

// 객체 디스트럭처링
const { name, age } = { name: "현진", age: 25 };
console.log(name); // 현진
console.log(age); // 25

---

🌟 기본 파라미터 (Default Parameter)

• 함수 호출 시 인자가 전달되지 않으면 기본값을 자동으로 적용함
• 조건문(if)으로 처리하던 로직을 단순화할 수 있음

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

greet(); // 안녕하세요, 익명님!

---

🌟 스프레드 연산자 (Spread Operator)

• 배열이나 객체를 펼치거나 복사할 때 사용함
• 불변성을 유지하면서 기존 데이터를 수정할 수 있어 React 같은 프레임워크에서도 자주 사용됨

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]

const user = { name: "현진", age: 25 };
const newUser = { ...user, age: 26 }; // { name: "현진", age: 26 }