JavaScript - ES6에서 새로 생긴 기능

ES6에서 새로 생긴 기능

---

1. let

블록 범위 지역 변수를 선언(변수가 선언된 중괄호 블록 내에서만 유효)

• 같은 이름의 변수를 한 범위 내에서 다시 선언할 수 없음
• let으로 선언된 변수는 값을 재할당할 수 있음
• 호이스팅 발생

let x = 10;
x = 20; // 재할당 가능

{
    let y = 30;
    console.log(y); // 출력: 30
}

console.log(x); // 출력: 20
console.log(y); // 에러: y is not defined

2. const

블록 범위 지역 상수를 선언(상수는 한 번 할당된 후에 변경할 수 없음)

• 선언과 동시에 값을 할당해야 함
• const로 선언된 객체나 배열은 변경할 수 있지만, 해당 변수가 다른 객체나 배열을 참조하도록 변경할 수는 없음

const PI = 3.14;
PI = 3.14159; // 에러: Assignment to constant variable

const person = { name: 'John' };
person.name = 'Jane'; // 가능
person = { name: 'Doe' }; // 에러: Assignment to constant variable

const numbers = [1, 2, 3];
numbers.push(4); // 가능
numbers = [1, 2, 3, 4]; // 에러: Assignment to constant variable

3. Arrow Function (화살표 함수)

• 함수를 비교적 간결하게 정의할 수 있는 문법
• function 키워드와 중괄호를 이용한 구문을 짧게 사용하기 위해 탄생
• 화살표 함수는 항상 익명 함수
  - === 함수 표현식에서만 사용가능

  1. function 키워드 생략 가능\

2. 함수의 매개변수가 하나 뿐이라면 매개변수의 '()' 생략 가능
3. 함수의 내용이 한 줄이라면 '{}'와 'return'도 생략 가능

// 일반적인 함수 표현식
function add(a, b) {
    return a + b;
}

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

4. spread operator (전개 구문) (...)

배열이나 객체를 펼쳐서 개별 요소로 분리하는 데 사용

배열이나 객체의 요소를 복사하거나 병합할 때 유용하게 활용

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

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

5. for ~ of 반복문

반복가능한 객체에 대한 반복문을 제공

const items = [1, 2, 3]

for (const n of items) {
  console.log(n)
}
// 1
// 2
// 3

6. Map 객체

키 - 값 쌍의 집합을 다룰 수 있는 객체, 키는 유일한 값

1. 키의 유연성:
   Map 객체는 어떤 타입의 값도 키로 사용할 수 있음
   이에 반해, Object는 문자열과 심벌만 키로 사용할 수 있음
2. 순서 보장:
   Map 객체는 키-값 쌍을 추가한 순서를 보장
   즉, 삽입 순서를 기합니다.
3. 반복 가능(Iterable):
   Map 객체는 for...of 루프를 통해 반복 가능
4. 크기 확인:
   Map 객체의 크기는 size 프로퍼티를 통해 확인 가능
5. 편리한 메소드:
   Map 객체는 데이터를 추가, 제거, 확인하는 다양한 메소드를 제공
   예를 들어, set(), get(), has(), delete(), clear() 등이 있음

// 새로운 Map 객체 생성
let myMap = new Map();

// Map에 데이터 추가
myMap.set('key1', 'value1');
myMap.set('key2', 'value2');

// 데이터 접근
console.log(myMap.get('key1')); // 출력: value1

// 키 확인
console.log(myMap.has('key1')); // 출력: true

// Map 크기 확인
console.log(myMap.size); // 출력: 2

// Map 반복
for (let [key, value] of myMap) {
    console.log(`${key} = ${value}`);
}

// Map 데이터 삭제
myMap.delete('key1');

// Map 데이터 모두 삭제
myMap.clear();

7. Set 객체

고유한 값을 저장하는 데 사용되는 데이터 구조

• 중복된 값을 허용하지 않으며, 값의 순서를 유지
• 중복을 제거하거나 고유한 값의 집합을 관리하는 데 유용

1. 고유한 값 저장:
   Set 객체는 중복된 값을 허용하지 않음
   따라서 각 값은 집합 내에서 고유해야 함
2. 순서 유지:
   Set 객체는 값이 추가된 순서를 유지
   이는 값을 추가한 순서대로 반복(iterate)될 수 있음을 의미
3. 반복 가능(Iterable):
   Set 객체는 for...of 루프나 forEach() 메소드를 통해 값에 대해 반복 가능
4. 크기 확인:
   Set 객체의 크기는 size 프로퍼티를 통해 확인 가능
5. 값 확인:
   Set 객체는 값이 존재하는지 여부를 확인하는 has() 메소드를 제공
6. 집합 연산 지원:
   Set 객체는 합집합, 교집합, 차집합 등과 같은 집합 연산을 수행 가능

// 새로운 Set 객체 생성
let mySet = new Set();

// Set에 데이터 추가
mySet.add('value1');
mySet.add('value2');

// 값 확인
console.log(mySet.has('value1')); // 출력: true

// Set 크기 확인
console.log(mySet.size); // 출력: 2

// Set 반복
for (let value of mySet) {
    console.log(value);
}

// Set 데이터 삭제
mySet.delete('value1');

// Set 데이터 모두 삭제
mySet.clear();

8. Class

// class 선언
class NewClass {
    constructor () { ... } // 생성자
}

// 객체 생성
const c = new NewClass()

9. Promise

비동기 처리를 위한 기능을 제공하기 위한 객체

• 비동기 작업을 보다 명확하고 간결하게 표현 가능
• 체이닝(Chaining)을 통해 연속적인 비동기 작업을 순차적으로 처리 가능
• then() 및 catch() 메소드를 사용하여 이행 및 거부 상태에 따른 처리 정의 가능
• 여러 개의 Promise를 동시에 처리할 수 있는 Promise.all() 및 Promise.race()와 같은 유틸리티 함수를 제공

// 비동기 함수 정의
function asyncOperation() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const random = Math.random();
            if (random < 0.5) {
                resolve(random); // 이행 상태로 처리
            } else {
                reject(new Error('Operation failed')); // 거부 상태로 처리
            }
        }, 1000);
    });
}

// Promise 사용 예시
asyncOperation()
    .then(result => {
        console.log('Operation succeeded:', result);
    })
    .catch(error => {
        console.error('Operation failed:', error.message);
    });

10. Symbol

자바스크립트의 기본 타입중에 하나이며, 객체의 프로퍼티로 사용 가능

1. 고유성: 각 Symbol 값은 유일, 동일한 내용의 두 개의 Symbol 값도 서로 동등하지 않음
2. 불변성: Symbol 값은 변경할 수 없음
3. 객체 프로퍼티 키로 사용 가능: Symbol은 주로 객체의 프로퍼티 키로 사용되어 다른 프로퍼티 키와 충돌하지 않는 고유한 식별자를 제공
4. Well-known Symbol: 몇 가지 내장된 Symbol 값이 있으며, 이를 통해 JavaScript의 내부 동작을 변경하거나 확장할 수 있음

// Symbol 생성
const symbol1 = Symbol();
const symbol2 = Symbol('description'); // 설명 문자열은 선택적입니다.

console.log(typeof symbol1); // 출력: symbol
console.log(symbol1 === symbol2); // 출력: false

11. 매개변수 기본값

함수의 파라미터에 디폴트 값을 줄 수 있음

function sum (x, y = 0) {
  return x + y
}

sum(10) // 10

12. 나머지 매개변수 (Rest Parameter)

함수로 정해지지 않은 수의 매개변수를 배열로 받을 수 있음

function funcName (...args) { }

13. 모듈 (Module)

외부의 모듈을 import 할 수 있음

import name from 'moduleSeoyeong'

14. 다양한 메소드 추가

- String

• String.includes ()
• String.startWith()
• String.endWith()

- Array

• Array.from()
• Array.keys()
• Array.find()
• Array.findIndex()

- Math

• Math.trunc()
• Math.sign()
• Math.cbtr()
• Math.log2()
• Math.log10()

- Number

• Number.isInteger()
• Number.isSafeInteger()

- Global Method

• isFinite()
• isNaN()

- Object

• Object.entries()