js ES6

 

ES6 (ECMAScript 2015)는 JavaScript의 주요 업데이트로, 
많은 새로운 기능과 문법을 도입하였습니다.

 

 

 

변수 선언: let과 const

let: 블록 스코프를 가지며, 변수의 값을 변경할 수 있습니다.
const: 블록 스코프를 가지며, 선언 시 초기화가 필요하고 값을 변경할 수 없습니다.

 

let variable = "변경 가능";
const constant = "변경 불가능";

// variable = "변경됨"; // 가능
// constant = "변경됨"; // 오류 발생

 

템플릿 리터럴 (Template Literals)

백틱(`)을 사용하여 여러 줄 문자열과 문자열 내 변수 삽입을 쉽게 할 수 있습니다.

const name = "홍길동";
const greeting = `안녕하세요, ${name}님!`;
console.log(greeting); // "안녕하세요, 홍길동님!" 출력

 

 

화살표 함수 (Arrow Functions)

함수를 간결하게 정의할 수 있는 문법입니다. 

this 바인딩이 상위 스코프를 참조합니다.

const add = (a, b) => a + b;
console.log(add(2, 3)); // 5 출력

const square = x => x * x; // 매개변수가 하나일 경우 괄호 생략 가능

 

 

전개 연산자 (Spread Operator) 및 나머지 매개변수 (Rest Parameters)

전개 연산자: 배열이나 객체를 펼치는 데 사용됩니다.
나머지 매개변수: 함수의 인수를 배열로 묶어주는 기능입니다.

 

// 전개 연산자
const arr1 = [1, 2, 3];
const arr2 = [4, 5, ...arr1]; // [4, 5, 1, 2, 3]
console.log(arr2);

// 나머지 매개변수
const sum = (...numbers) => numbers.reduce((acc, num) => acc + num, 0);
console.log(sum(1, 2, 3, 4)); // 10 출력

 

객체 리터럴의 개선

 

객체를 정의할 때, 변수 이름과 프로퍼티 이름이 같을 경우 중복 선언을 생략할 수 있습니다.

const name = "홍길동";
const age = 30;

const person = { name, age }; // { name: "홍길동", age: 30 }
console.log(person);

 

 

모듈 (Modules)

ES6는 모듈 시스템을 도입하여 코드의 재사용성과 구조화를 개선했습니다. 

모듈은 export와 import를 사용하여 정의합니다.

// myModule.js
export const PI = 3.14;
export function add(x, y) {
    return x + y;
}

// main.js
import { PI, add } from './myModule.js';
console.log(PI); // 3.14 출력
console.log(add(2, 3)); // 5 출력

 

클래스 (Classes)

ES6에서는 객체 지향 프로그래밍을 지원하기 위해 클래스를 도입했습니다. 

클래스를 통해 객체와 메서드를 정의할 수 있습니다.

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

    greet() {
        console.log(`안녕하세요, 저는 ${this.name}입니다.`);
    }
}

const person = new Person("홍길동", 30);
person.greet(); // "안녕하세요, 저는 홍길동입니다." 출력

 

Promise

비동기 작업을 처리하기 위한 새로운 객체로, 

then(), catch() 메서드를 사용하여 비동기 작업의 결과를 처리할 수 있습니다.

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("데이터 로드 완료");
        }, 2000);
    });
};

fetchData()
    .then(data => console.log(data)) // "데이터 로드 완료" 출력
    .catch(error => console.error(error));

 

기타 유용한 기능

for...of 문: iterable 객체(배열 등)의 요소를 반복하는 데 사용됩니다.

const fruits = ["사과", "바나나", "오렌지"];
for (const fruit of fruits) {
    console.log(fruit); // 각 과일 출력
}

 

for...in 문: 객체의 프로퍼티를 반복하는 데 사용됩니다.

 

const person = { name: "홍길동", age: 30 };
for (const key in person) {
    console.log(`${key}: ${person[key]}`); // "name: 홍길동", "age: 30" 출력
}