[JavaScript] ES6+ 문법

ES6+ 문법 자세한 설명

JavaScript는 2015년 ECMAScript 6(ES6) 이후 지속적으로 새로운 기능을 도입하여 코드의 가독성과 효율성을 향상시키고 있습니다. 이번 글에서는 ES6+의 핵심 문법 중 let, const, 화살표 함수, 템플릿 리터럴, 구조 분해 할당, 스프레드 연산자에 대해 자세히 설명하겠습니다.

 

1. let과 const (변수 선언)

기존에는 변수를 선언할 때 var를 사용했지만, ES6에서는 let과 const가 도입되었습니다.

let

• **블록 스코프(block scope)**를 가집니다.
• 동일한 변수 이름을 같은 블록 내에서 중복 선언할 수 없습니다.
• 재할당이 가능합니다.

let age = 30; 
age = 31; // 가능 
console.log(age); // 31

const

• **블록 스코프(block scope)**를 가집니다.
• 한 번 값을 할당하면 재할당할 수 없습니다.
• 상수(constant) 값을 정의할 때 사용됩니다.

const name = "John";
name = "Jane"; // ❌ 오류 발생 (재할당 불가)

 

var와의 차이

• var는 함수 스코프를 가지며, 변수 호이스팅(hoisting) 시 undefined로 초기화됩니다.
• let과 const는 블록 스코프를 가지며, 호이스팅 시 초기화되지 않아 참조하기 전에 사용하면 오류가 발생합니다.

console.log(x); // undefined
var x = 10;
console.log(y); // ❌ ReferenceError 발생
let y = 20;

 

2. 화살표 함수 (Arrow Function)

화살표 함수는 function 키워드 대신 => 문법을 사용하여 함수를 간결하게 작성할 수 있도록 도입되었습니다.

기본적인 사용법

// 기존 함수 선언 방식
function add(a, b) { 
  return a + b; 
} 
// 화살표 함수 
const add = (a, b) => a + b;

특징

1. 코드가 간결해짐
   • 함수 본문이 한 줄이면 {}와 return을 생략할 수 있습니다.
   • 매개변수가 하나라면 ()도 생략할 수 있습니다.

const square = x => x * x; 
console.log(square(4)); // 16

1. • 기존 함수는 this가 호출 방식에 따라 달라지지만, 화살표 함수는 선언된 위치의 this를 유지합니다.this 바인딩 방식이 다름

const person = {
  name: "Alice",
  greet: function() {
    setTimeout(function() {
      console.log(this.name); // ❌ undefined (this가 전역 객체를 가리킴)
    }, 1000);
  }
};

const person2 = {
  name: "Bob",
  greet: function() {
    setTimeout(() => {
      console.log(this.name); // ✅ Bob (화살표 함수의 this는 person2를 가리킴)
    }, 1000);
  }
};

person2.greet();

 

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

문자열을 더 직관적으로 다룰 수 있도록 백틱(`)을 사용하여 문자열을 감싸는 방식입니다.

기본 사용법

const name = "John";
const age = 25;

// 기존 방식
console.log("My name is " + name + " and I am " + age + " years old.");

// 템플릿 리터럴 사용
console.log(`My name is ${name} and I am ${age} years old.`);

여러 줄 문자열

const multiLine = `이것은
여러 줄의
문자열입니다.`;
console.log(multiLine);

 

4. 구조 분해 할당 (Destructuring)

배열이나 객체에서 값을 쉽게 추출하여 변수에 할당하는 문법입니다.

배열 구조 분해 할당

const numbers = [1, 2, 3];

// 기존 방식
let a = numbers[0];
let b = numbers[1];

// 구조 분해 할당
let [x, y] = numbers;
console.log(x, y); // 1, 2

객체 구조 분해 할당

const person = { name: "Alice", age: 30 };

// 기존 방식
let personName = person.name;
let personAge = person.age;

// 구조 분해 할당
let { name, age } = person;
console.log(name, age); // Alice, 30

기본값 설정

const { city = "Seoul" } = {};  
console.log(city); // Seoul (기본값 사용)

 

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

스프레드 연산자는 배열이나 객체의 요소를 펼쳐서 복사하거나 병합할 때 사용됩니다.

배열에서 사용

const arr1 = [1, 2, 3];
const arr2 = [...arr1, 4, 5]; // 기존 배열을 복사하면서 새 요소 추가
console.log(arr2); // [1, 2, 3, 4, 5]

객체에서 사용

const obj1 = { name: "Alice", age: 30 };
const obj2 = { ...obj1, city: "Seoul" }; // 기존 객체를 복사하면서 새 속성 추가
console.log(obj2); // { name: "Alice", age: 30, city: "Seoul" }

함수 인자 전달

const numbers = [1, 2, 3];

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

console.log(sum(...numbers)); // 6 (배열을 개별 요소로 전달)

 

결론

ES6+ 문법을 사용하면 JavaScript 코드를 더 간결하고 가독성 좋게 작성할 수 있습니다.

• let, const: 안전한 변수 선언
• 화살표 함수: 간결한 함수 표현식
• 템플릿 리터럴: 편리한 문자열 조작
• 구조 분해 할당: 배열과 객체에서 값 추출
• 스프레드 연산자: 간편한 복사와 병합

이 문법들을 익히면 더 효율적인 JavaScript 코드 작성이 가능하므로, 다양한 프로젝트에서 활용해보시길 바랍니다