💻 Frontend

ES6에 추가된 문법

category
💻 Frontend
자바스크립트 ES6?1. let, const2. 템플릿 리터럴3. 화살표 함수4. 구조분해할당5. Promise6. Class7. Spread, Rest8. Module9. 객체리터럴마무리면접 질문References

자바스크립트 ES6?

자바스크립트 ES6(ECMAScript 2015 또는 ECMAScript 6)은 2015년에 도입된 최신 버전의 자바스크립트 입니다. 오늘 블로그에서는 자바스크립트 ES6에서 추가된 문법을 정리하겠습니다.
 

1. let, const

ES5에서는 var라는 변수만 있었다면, ES6에서는 let과 const 키워드가 추가되었습니다.
  • let:
let은 블록 범위 변수를 선언하는데 사용됩니다. 블록 범위 변수는 해당 변수가 선언된 중괄호 블록 내에서만 유효합니다.
let x = 10;
if (true) {
  let x = 20;
  console.log(x); // 20
}
console.log(x); // 10
  • const:
const는 상수(constant)를 선언하는 데 사용됩니다. 상수는 초기 값이 할당된 후에는 변경할 수 없는 변수입니다. 한 번 할당된 값은 재할당할 수 없습니다.
const PI = 3.14;
console.log(PI); // 3.14

PI = 3.14159; // Error: 상수에 재할당할 수 없음
const로 선언된 객체와 배열은 참조를 변경하지 못하지만, 객체나 배열 내부의 속성과 요소는 수정할 수 있습니다.
const person = {
  name: 'John',
  age: 30
};

person.age = 31; // 가능
person = {}; // Error: 상수에 재할당할 수 없음

const numbers = [1, 2, 3];
numbers.push(4); // 가능
numbers = []; // Error: 상수에 재할당할 수 없음
  • let과 const의 차이점
let은 변수를 선언하며, 재할당이 가능합니다. 반면에 const는 상수를 선언하며, 재할당이 불가능합니다.
let으로 선언된 변수는 초기화되지 않은 상태로 선언할 수 있지만, const는 선언과 동시에 반드시 초기값을 할당해야 합니다.
 

2. 템플릿 리터럴

템플릿 리터럴은 문자열을 표현하는 방식으로 변수와 문자열을 혼합하여 표현할 수 있습니다.
일반적인 따옴표(’ 또는 “) 대신 백틱(`)을 사용합니다. 변수를 표현할 때는 백틱 사이에 ${변수이름}넣으면 됩니다:
//기본적인 사용
const string = `이건 문자열입니다.`;

//변수 넣기
const age =  10;
const myAge  = `저는 ${age}살 입니다.`;

//공백표현
const longString = `와아아~~

와와~~~~`
 

3. 화살표 함수

Arrow Function이라고 불리는 화살표 함수는 기존 함수 표현식을 간결하게 작성할 수 있습니다.
const arrowFunc = (a, b) => {
	return a + b
}

//단순 return일 경우에는 {}를 생략할 수 있습니다.
const arrowFunc2 =  (a, b) => a + b

//콜백으로 쓸때 편합니다.
arr.map((el) => el * 2)
 

4. 구조분해할당

배열이나 객체의 속성을 분해하여 변수에 할당하는 것입니다.
  • 배열 분해 할당:
const [변수1, 변수2, ...] = 배열;

const numbers = [1, 2, 3];
const [a, b, c] = numbers;
  • 객체 분해 할당:
const { 속성1, 속성2, ... } = 객체;

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};
const { name, age, city } = person;
 

5. Promise

Promise는 비동기 작업을 다루기 위한 객체입니다.
Promise를 사용하면 비동기 작업을 체인으로 연결할 수 있습니다. 작업이 성공적으로 완료되면 then 메서드를 사용하여 이행 상태에 대한 처리를 할 수 있고, 작업이 실패하면 catch 메서드를 사용하여 거부 상태에 대한 처리를 할 수 있습니다. 또한 finally 메서드를 사용하여 작업이 완료됐을 때 어떤 처리든 항상 실행할 수도 있습니다.
fetchData()
  .then((result) => {
    console.log(result); // 성공적인 결과 출력
  })
  .catch((error) => {
    console.error(error); // 에러 메시지 출력
  })
  .finally(() => {
    console.log('Cleanup'); // 항상 실행되는 코드
  });
 

6. Class

class는 JavaScript에서 객체 지향 프로그래밍을 구현하기 위한 문법적인 요소입니다.
class 키워드를 사용하여 클래스를 정의하고, 해당 클래스로 객체(인스턴스)를 생성할 수 있습니다. 클래스는 속성과 메서드로 구성됩니다.
class Person {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  sayHello() {
    console.log(`Hello, my name is ${this.name} and I'm ${this.age} years old.`);
  }
}

// Person 클래스를 이용하여 객체(인스턴스) 생성
const person1 = new Person('John', 30);
person1.sayHello(); // 'Hello, my name is John and I'm 30 years old.'

const person2 = new Person('Jane', 25);
person2.sayHello(); // 'Hello, my name is Jane and I'm 25 years old.'
클래스는 상속과 다형성과 같은 객체 지향 프로그래밍의 개념을 구현하기 위한 기반을 제공합니다. 자식 클래스를 만들고 부모 클래스의 속성과 메서드를 상속받을 수 있습니다. 이를 통해 코드의 재사용성과 유지 보수성을 향상시킬 수 있습니다.
 

7. Spread, Rest

spread 연산자와 rest 매개변수는 배열과 객체를 조작하는데 유용한 문법입니다.
  • Spread 연산자:
배열 또는 객체의 요소를 개별적인 값으로 분해하거나 복사할 때 사용합니다.
// 1. 배열
const array1 = [1, 2, 3];
const array2 = [...array1, 4, 5, 6];

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

// 2. 객체
const obj1 = { name: 'John', age: 25 };
const obj2 = { ...obj1, city: 'New York' };

console.log(obj2); // { name: 'John', age: 25, city: 'New York' }
  • Rest 매개변수:
함수의 매개변수로 사용되며, 가변 인자를 배열로 수집합니다. Rest 매개변수는 매개변수 목록에서 마지막에 위치해야하며, 나머지 인자들을 배열로 수집합니다.
function sum(...numbers) {
  console.log(numbers); // [1, 2, 3, 4, 5]
  let total = 0;
  for (const number of numbers) {
    total += number;
  }
  return total;
}

console.log(sum(1, 2, 3, 4, 5)); // 15
  • Spread 연산자와 Rest 매개변수의 차이
Spread 연산자는 배열이나 객체를 분해하거나 복사하는 데 사용되는 반면, Rest 매개변수는 함수 매개변수로 가변 개수의 인자를 배열로 수집하는 데 사용됩니다.
 

8. Module

import, export 키워드를 사용하여 모듈을 가져오고 내보낼 수 있습니다.
  • 모듈 내보내기(export):
// utils.js
export const PI = 3.14;
  • 모듈 가져오기(import):
// test.js
import { PI } from './utils.js';

console.log(PI) // 3.14
모듈을 활용하면 코드를 재사용할 수 있습니다.
 

9. 객체리터럴

객체리터럴은 객체를 만들기 위한 표기법입니다. 중괄호{}를 사용하여 객체 리터럴을 정의하고, 속성과 값의 쌍을 콜론:으로 구분합니다.
const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

console.log(person.name); // 'John'
console.log(person.age); // 30
console.log(person.city); // 'New York'
 
객체 리터럴이 나오기 전에는 다음과 같이 객체를 생성하였습니다. 객체 리터럴이 도입된 후에는 이러한 방식 대신 간단하고 가독성이 좋은 객체 리터럴을 사용하여 객체를 생성할 수 있게 되었습니다.
// 빈 객체 생성
const person = new Object();

// 속성 추가
person.name = 'John';
person.age = 30;
person.city = 'New York';

const person = new Object({
  name: 'John',
  age: 30,
  city: 'New York'
});
 

마무리

면접 질문

Q: ES6에 추가된 문법을 설명해주세요.
A: 대표적으로 let과 const 그리고 Promise, export import가 있습니다!
 

References

[TIL]ES6에 추가된 문법
저와 같은 경우에는 ES6+가 익숙하고, 바벨을 사용하기 때문에 전 버전은 어떠했는지와 전 버전에 비해 어떤 것들이 추가되었는지를 잘 알지 못했습니다. 추가된 문법 중 자주 쓰이는 것들을 정리해보았습니다.let, const템플릿 리터럴화살표 함수구조분해할당promise
[TIL]ES6에 추가된 문법
https://velog.io/@xcc629/TILES6에-추가된-문법
[TIL]ES6에 추가된 문법