JS 3-2. ES6 문법

17. 자바스크립트 ES6 문법에서 새로 추가된 문법 설명

ES6(ECMAScript 2015)에서는 JavaScript의 생산성과 가독성을 향상시키기 위해 다양한 새로운 문법이 추가되었다.

---

1. 변수 선언

let: 블록 범위 변수를 선언.
const: 블록 범위 상수를 선언합. 값 변경 불가능.

🖥️
let a = 10;
const b = 20;

2. 화살표 함수

간결한 함수 표현식으로 this를 바인딩하지 않는다.

🖥️ javascript

const add = (x, y) => x + y;

3. 템플릿 리터럴

백틱(`)을 사용하여 문자열을 작성하며, 변수 삽입 가능.

🖥️ javascript

const name = 'Alice';
const greeting = `Hello, ${name}!`;

4. 디폴트 매개변수

함수 매개변수에 기본값을 지정할 수 있다.

🖥️ javascript

function greet(name = 'Guest') {
    return `Hello, ${name}`;
}

5. 객체 및 배열 구조 분해

배열과 객체의 값을 손쉽게 변수에 할당할 수 있다.

🖥️ javascript

const [x, y] = [1, 2];
const { name, age } = { name: 'Alice', age: 25 };

6. 향상된 객체 리터럴

객체 정의를 더 간결하게 할 수 있다.

🖥️ javascript

const name = 'Alice';
const obj = {
    name, // 프로퍼티 축약
    greet() { // 메서드 축약
        return `Hello, ${name}`;
    }
};

7. 클래스

JavaScript에서 객체지향 프로그래밍을 쉽게 할 수 있는 클래스 문법.

🖥️ javascript

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    greet() {
        return `Hello, my name is ${this.name}`;
    }
}

8. 모듈 (import/export)

모듈 시스템을 통해 파일 간의 코드 재사용이 쉬워졌다.

🖥️ javascript

// export.js
export const add = (x, y) => x + y;

// import.js
import { add } from './export.js';

9. Promise

비동기 작업을 처리하기 위한 새로운 방식.

🖥️javascript

const fetchData = () =>
    new Promise((resolve, reject) => {
        setTimeout(() => resolve('Data loaded'), 1000);
    });

fetchData().then(console.log);

10. Iterator와 Generator

반복 작업을 쉽게 할 수 있게 돕는다.

🖥️ javascript

function* generatorFunc() {
    yield 1;
    yield 2;
    yield 3;
}

const gen = generatorFunc();
console.log(gen.next().value); // 1

11. Map과 Set

새로운 데이터 구조로, Map은 키-값 쌍(객체와 비교),
Set은 중복 없는 값의 집합(배열과 비교)을 저장한다.

🖥️ javascript

const map = new Map();
map.set('key', 'value');

const set = new Set([1, 2, 3, 3]);
console.log(set); // Set(3) { 1, 2, 3 }

12. Spread와 Rest 연산자

• Spread (...) : 배열이나 객체를 펼칠 때 사용.
• Rest (...) : 나머지 요소를 묶을 때 사용.

🖥️ javascript

const arr = [1, 2, 3];
const newArr = [...arr, 4];

const { a, ...rest } = { a: 1, b: 2, c: 3 };

13. Symbol

고유한 식별자를 생성할 수 있는 원시 데이터 타입.
const로 선언한 값끼리 비교했을 때와
Symbol로 선언한 값끼리 비교했을 때 결과가 다르게 나온다.

🖥️ javascript

const uniqueKey = Symbol('key');

14. for...of

반복 가능한 객체(iterable)에서 요소를 순회.

🖥️ javascript

const arr = [10, 20, 30];
for (const value of arr) {
    console.log(value);
}

15. Modules (import/export)

파일 간 모듈화 가능.

🖥️ javascript

// module1.js
export const greet = () => 'Hello';

// module2.js
import { greet } from './module1.js';
console.log(greet());

---

프로미스 개선

ES6에서 추가된 프로미스는 ES8(ES2017) 이후의 async/await와 함께 더 편리하게 개선되었다.

1. Promise.all
여러 프로미스를 병렬로 처리하고, 모든 프로미스가 해결되면 결과를 반환한다.

🖥️ javascript

const promise1 = Promise.resolve(10);
const promise2 = Promise.resolve(20);
Promise.all([promise1, promise2]).then(results => {
    console.log(results); // [10, 20]
});

2. Promise.race
가장 먼저 완료된 프로미스의 결과를 반환한다.

🖥️ javascript

const slow = new Promise(resolve => setTimeout(() => resolve('slow'), 1000));
const fast = new Promise(resolve => setTimeout(() => resolve('fast'), 500));
Promise.race([slow, fast]).then(result => console.log(result)); // fast

3. Promise.finally
성공/실패 여부와 상관없이 마지막에 실행되는 로직을 정의한다.

🖥️ javascript

fetch('https://api.example.com/data')
    .then(response => response.json())
    .catch(error => console.error(error))
    .finally(() => console.log('Request completed'));

---

정규 표현식(Regex) 확장

정규 표현식에 몇 가지 새로운 기능이 추가되어 더욱 강력한 패턴 매칭 가능.

1. u 플래그 (유니코드 지원)
유니코드 문자와 코드 포인트를 정확히 처리한다.

🖥️ javascript

const regex = /\u{1F600}/u; // 유니코드 이모지
console.log(regex.test('😀')); // true

2. y 플래그 (스티키 모드)
정규 표현식이 마지막 매칭 후에 정확히 그 지점에서 다시 시작하도록 만든다.

🖥️ javascript

const regex = /foo/y;
console.log(regex.exec('foofoo')); // ["foo"]
console.log(regex.exec('foofoo')); // ["foo"]

3. Named Capture Groups
캡처 그룹에 이름을 붙여 사용하기 편리하다.

🖥️ javascript

const regex = /(?<year>\d{4})-(?<month>\d{2})-(?<day>\d{2})/;
const result = regex.exec('2024-11-25');
console.log(result.groups.year); // 2024

4. Lookbehind Assertions
문자열의 앞부분을 조건으로 설정한다.

🖥️ javascript

const regex = /(?<=\$)\d+/; // $ 뒤에 오는 숫자 매칭
console.log('Price: $100'.match(regex)); // ["100"]

---

새로운 API

1. Object.assign
객체를 병합하거나 복사.

🖥️ javascript

const target = { a: 1 };
const source = { b: 2 };
const result = Object.assign(target, source);
console.log(result); // { a: 1, b: 2 }

2. Object.entries와 Object.values
객체의 키-값 쌍 또는 값만 배열로 반환.

🖥️ javascript

const obj = { a: 1, b: 2 };
console.log(Object.entries(obj)); // [["a", 1], ["b", 2]]
console.log(Object.values(obj)); // [1, 2]

3. Array.prototype.includes

배열에 특정 값이 포함되어 있는지 확인한다.

🖥️ javascript

const arr = [1, 2, 3];
console.log(arr.includes(2)); // true

4. String.prototype.startsWith와 endsWith
문자열이 특정 문자로 시작하거나 끝나는지 확인한다.

🖥️ javascript

console.log('Hello World'.startsWith('Hello')); // true
console.log('Hello World'.endsWith('World')); // true

5. Number.isNaN와 Number.isFinite
숫자와 관련된 유효성 검사를 개선한 함수들.

🖥️ javascript

console.log(Number.isNaN(NaN)); // true
console.log(Number.isFinite(100)); // true

6. Math 확장
Math.sign : 숫자의 부호 반환 (1, -1, 0)
Math.trunc : 소수점 아래를 잘라낸다.

🖥️ javascript

console.log(Math.sign(-5)); // -1
console.log(Math.trunc(4.9)); // 4

7. fetch
비동기 HTTP 요청을 처리하는 표준 API이다.

🖥️ javascript

fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(data => console.log(data));