[매일메일] 자바스크립트 ES6 버전이란? (FE.250130)

ES6(ECMAScript 2015): 2015년에 공식 발표된 자바스크립트의 최신 버전

코드 가독성과 유지보수성을 높이고, 현대 웹 어플리케이션의 요구를 반영하기 위한 여러 기능 제공

 

1. let과 const 키워드가 추가됨

let: 변수 선언, const: 상수 선언

var(함수 스코프)과 다르게 let/const는 블록 스코프를 가져 코드의 안정성이 높음.

변수 선언 이전에 접근했을 때 undefined가 할당되지 않고, ReferenceError가 발생함

(이 블로그 관련 글: 자바스크립트의 호이스팅) https://developer-dreamer.tistory.com/113)

키워드	재할당 가능 여부	블록 스코프	선언 전 접근
var	가능	없음(함수 스코프)	undefined
let	가능	있음	ReferenceError
const	불가능	있음	ReferenceError

* 함수 스코프: 함수 내부에서 유효함, 블록 스코프: {} 내부에서만 유효함.

 

 

2. 화살표 함수(Arrow Function) 도입

기존 함수 정의 방식보다 간결하고 가독성 좋음

this 바인딩을 호출 문맥과 일치시켜 함수 내부에서 혼란을 줄임

 

📌기존 함수 선언 방식

function add(a, b) {
  return a + b;
}
console.log(add(2, 3)); // 5

 

 

📌 화살표 함수 방식

const add = (a, b) => a + b; //함수 본문이 한줄이면 return 생략 가능
console.log(add(2, 3)); // 5

function normalFunction() {
  console.log(this); // 호출하는 객체에 따라 this 값이 달라짐
}

const arrowFunction = () => {
  console.log(this); // 화살표 함수는 `this`를 자신이 정의된 곳의 문맥에서 가져옴
};

const obj = { method: normalFunction };
obj.method(); // `this`는 obj를 가리킴

const obj2 = { method: arrowFunction };
obj2.method(); // `this`는 obj2가 아니라 상위 스코프를 가리킴

this 바인딩이 호출 문맥과 일치해 bind() 사용하지 않아도 됨

 

(참고하면 좋을 글: ES6에서 Arrow 함수를 언제, 왜 쓸까? https://github.com/Esoolgnah/Frontend-Interview-Questions/blob/main/Notes/important-3/es6-arrow-function.md )

 

 

3. 클래스 문법 추가

객체 지향 프로그래밍 핵심 개념인 생성자, 상속, 메서드 오버라이딩을 자바스크립트에서 활용 가능

 

📌 기존 ES5의 생성자 함수 방식

function Person(name, age) {
  this.name = name;
  this.age = age;
}

Person.prototype.greet = function () {
  return `Hello, my name is ${this.name}.`;
};

const alice = new Person("Alice", 25);
console.log(alice.greet()); // Hello, my name is Alice.

 

📌 ES6 클래스 문법

class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  greet() {
    return `Hello, my name is ${this.name}.`;
  }
}

const bob = new Person("Bob", 30);
console.log(bob.greet()); // Hello, my name is Bob.

constructor 메서드 사용가능

extends로 상속 지원

super() 사용해 부모 클래스 호출 가능

 

 

4. 템플릿 리터럴 추가

기존 문자열("",'')과 달리 백틱(``)을 사용해 문자열을 더 쉽게 다룰 수 있음

문자열 내 변수를 삽입할 때 ${} 구문을 사용해 가독성이 향상됨

 

📌기존 문자열 연결 방식

const name = "Alice";
const message = "Hello, " + name + "! Welcome.";
console.log(message); // Hello, Alice! Welcome.

 

📌 ES6 템플릿 리터럴 사용

const name = "Alice";
const message = `Hello, ${name}! Welcome.`;
console.log(message); // Hello, Alice! Welcome.

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

 

5. 구조 분해 할당(Destructing)

배열이나 객체에서 값을 쉽게 추출할 수 있음

//배열 구조 분해 할당
const [a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

//객체 구조 분해 할당
const person = { name: "Alice", age: 25 };
const { name, age } = person;
console.log(name); // Alice
console.log(age); // 25

 

6. Spread Operator(...) - 배열/객체 확장

const numbers = [1, 2, 3];
const newNumbers = [...numbers, 4, 5]; // 배열 확장
console.log(newNumbers); // [1, 2, 3, 4, 5]
//numbers 배열을 ...numbers로 전개해서 새로운 배열을 생성함
//기존 배열을 복사하면서 새로운 요소를 추가할 때 사용함

const person = { name: "Alice", age: 25 };
const newPerson = { ...person, job: "Developer" }; // 객체 확장
console.log(newPerson); // { name: "Alice", age: 25, job: "Developer" }
//...person을 기존 person 객체를 복사해 newPerson으로 확장함

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

const values = [10, 20, 30];
console.log(sum(...values)); // 60
//...values를 사용해 배열을 개별 인자로 분해해 sum 함수에 전달함

배열 또는 객체를 펼쳐서(전개해서) 개별 요소로 분해하는 역할

기존 데이터의 복사 또는 확장에 사용됨

ex) [...arr], {...obj}, func(...arr)

 

7. Rest Parameter(...) - 가변 인자 처리

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}
console.log(sum(1, 2, 3, 4, 5)); // 15
// ...numbers는 함수 호출 시 전달된 모든 인자를 배열로 저장함

const [first, second, ...rest] = [10, 20, 30, 40, 50];
console.log(first);  // 10
console.log(second); // 20
console.log(rest);   // [30, 40, 50]
// ...rest는 첫 번째, 두 번째 요소를 제외한 나머지 요소를 배열로 저장함

함수의 매개변수에서 사용되며, 나머지 인자를 배열로 받는 역할

배열의 특정 부분을 분리하거나 가변 인수를 처리할 때 유용함

ex) (...args)=>{}, [fisrt,...rest]

 

8. Promise 도입

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("✅ 데이터 가져오기 성공!");
  }, 2000);
});

fetchData.then((result) => console.log(result)).catch((error) => console.error(error));

ES8에서 async/await 추가되며 편리한 비동기 코드 작성 가능해짐

(이 블로그 관련 글: 자바스크립트의 Promise란? https://developer-dreamer.tistory.com/148)

 

---

ES6 이전 버전의 문법을 여전히 알아야 하는 이유

1. 기존 코드베이스와의 호환성

기존 자바스크립트 프로젝트와 라이브러리는 ES6 이전 버전의 문법을 사용하고 있음.

코드를 유지보수하거나 활용하려면 ES6 이전 문법에 대해 이해하고 있어야 함

 

2. 대규모 프로젝트에 ES6을 도입할 때 점진적인 마이그레이션을 해야 함

ES6 이전 문법과 ES6 문법이 혼재되어 사용될 수 있으므로, 이전 문법에 대한 이해가 필요함

 

3. ES6 기능을 구형 브라우저에서 사용하기 위해

폴리필이나 트랜스파일러를 활용해야 하는데, ES6 이전 문법에 대한 기본적인 이해가 필요할 수 있음

 

---

출처

[1] 매일메일. 250130. ES6에 대해서 아는대로 설명해주세요. 67번. https://maeil-mail.kr

[2] gpt에게 ES6에 대해 묻다

 

---

옛날에 그런 전설이 있다

어떤 개발자가 면접에서 ECMA 스크립트 모든 버전의 차이점을 완벽히 서술하고 그 자리에서 바로 합격했다는...그런 전설

 

아는 선배한테 들은건데... 진짠지는 잘 모르겠고요...네

---