반응형
SMALL
1. let과 const
var 대신 블록 스코프(block scope)를 지원하는 let과 상수 선언용 const를 사용합니다.
let name = "Alice"; // 변경 가능
const age = 25; // 변경 불가
if (true) {
let name = "Bob";
console.log(name); // "Bob"
}
console.log(name); // "Alice"
2. 화살표 함수(Arrow Function)
간결한 함수 표현식입니다. this 바인딩이 기존 함수와 다르게 작동합니다.
// 일반 함수
function add(a, b) {
return a + b;
}
// 화살표 함수
const add = (a, b) => a + b;
console.log(add(2, 3)); // 5
3. 템플릿 리터럴(Template Literal)
문자열 안에서 변수를 쉽게 포함할 수 있는 백틱(`) 문법.
const name = "Alice";
const message = `Hello, ${name}!`;
console.log(message); // "Hello, Alice!"
4. 디스트럭처링 할당(Destructuring Assignment)
객체나 배열의 값을 쉽게 추출하여 변수에 할당합니다.
// 배열
const [a, b] = [1, 2];
console.log(a, b); // 1, 2
// 객체
const user = { name: "Alice", age: 25 };
const { name, age } = user;
console.log(name, age); // "Alice", 25
5. 기본 매개변수(Default Parameters)
함수 매개변수에 기본값을 설정합니다.
const greet = (name = "Guest") => `Hello, ${name}!`;
console.log(greet()); // "Hello, Guest!"
console.log(greet("Alice")); // "Hello, Alice!"
6. 스프레드 연산자(Spread Operator)
배열이나 객체를 쉽게 복사하거나 병합할 수 있습니다.
// 배열
const numbers = [1, 2, 3];
const moreNumbers = [...numbers, 4, 5];
console.log(moreNumbers); // [1, 2, 3, 4, 5]
// 객체
const user = { name: "Alice", age: 25 };
const updatedUser = { ...user, age: 30 }; // age 업데이트
console.log(updatedUser); // { name: "Alice", age: 30 }
7. 클래스(Class)
ES6에서는 객체 지향 프로그래밍을 더 쉽게 작성할 수 있는 class 문법을 제공합니다.
class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
return `Hello, my name is ${this.name}.`;
}
}
const alice = new Person("Alice", 25);
console.log(alice.greet()); // "Hello, my name is Alice."
8. 모듈(Modules)
ES6에서는 import와 export를 사용하여 모듈을 구성합니다.
// module.js
export const greet = (name) => `Hello, ${name}!`;
// main.js
import { greet } from './module.js';
console.log(greet("Alice")); // "Hello, Alice!"
9. 프로미스(Promises)
비동기 작업을 처리하는 새로운 방식.
const fetchData = () => {
return new Promise((resolve, reject) => {
setTimeout(() => resolve("Data loaded!"), 1000);
});
};
fetchData().then((data) => console.log(data)); // 1초 후 "Data loaded!"
10. 맵(Map)과 셋(Set)
새로운 자료 구조를 지원합니다.
// Map
const map = new Map();
map.set("key", "value");
console.log(map.get("key")); // "value"
// Set
const set = new Set([1, 2, 3, 3]);
console.log(set); // Set(3) { 1, 2, 3 }
11. for...of 루프
이터러블 객체(배열 등)를 순회하기 위한 새로운 루프.
const array = [10, 20, 30];
for (const value of array) {
console.log(value); // 10, 20, 30
}
12. 심볼(Symbol)
고유한 식별자를 생성할 때 사용.
const sym = Symbol("unique");
console.log(sym); // Symbol(unique)
13. Rest 파라미터(Rest Parameters)
함수 호출 시 전달되는 나머지 매개변수를 배열로 모아 처리할 수 있습니다.
const sum = (...numbers) => {
return numbers.reduce((total, num) => total + num, 0);
};
console.log(sum(1, 2, 3, 4)); // 10
14. Symbol.iterator와 이터러블(Iterables)
객체를 이터러블로 만들어 for...of 문이나 spread 문법에서 사용할 수 있습니다.
const iterable = {
*[Symbol.iterator]() {
yield 1;
yield 2;
yield 3;
}
};
for (const value of iterable) {
console.log(value); // 1, 2, 3
}
15. Object.assign
객체를 복사하거나 병합할 때 사용됩니다.
const target = { a: 1 };
const source = { b: 2, c: 3 };
const merged = Object.assign({}, target, source);
console.log(merged); // { a: 1, b: 2, c: 3 }
16. Object.entries와 Object.values
객체의 키와 값을 배열 형태로 반환합니다.
const obj = { a: 1, b: 2 };
// Object.entries
for (const [key, value] of Object.entries(obj)) {
console.log(key, value); // "a 1", "b 2"
}
// Object.values
console.log(Object.values(obj)); // [1, 2]
17. includes 메서드
배열이나 문자열에 특정 값이 포함되어 있는지 확인합니다.
const fruits = ["apple", "banana", "cherry"];
console.log(fruits.includes("banana")); // true
const sentence = "Hello, world!";
console.log(sentence.includes("world")); // true
18. find와 findIndex
배열에서 조건에 맞는 첫 번째 요소나 그 인덱스를 반환합니다.
const numbers = [10, 20, 30, 40];
// find
const found = numbers.find(num => num > 25);
console.log(found); // 30
// findIndex
const index = numbers.findIndex(num => num > 25);
console.log(index); // 2
19. Promise.all과 Promise.race
복수의 프로미스를 동시에 처리합니다.
const p1 = new Promise(resolve => setTimeout(() => resolve("P1"), 1000));
const p2 = new Promise(resolve => setTimeout(() => resolve("P2"), 2000));
// Promise.all
Promise.all([p1, p2]).then(results => console.log(results)); // ["P1", "P2"]
// Promise.race
Promise.race([p1, p2]).then(result => console.log(result)); // "P1"
20. Default Import와 Named Import
ES6 모듈에서 다양한 방식으로 코드를 가져옵니다.
// module.js
export const greet = name => `Hello, ${name}!`;
export default name => `Hi, ${name}!`;
// main.js
import defaultGreet, { greet } from "./module.js";
console.log(defaultGreet("Alice")); // "Hi, Alice!"
console.log(greet("Bob")); // "Hello, Bob!"
21. 태스크 큐와 마이크로태스크 큐(Task Queue & Microtask Queue)
Promise와 setTimeout의 실행 순서를 이해할 수 있는 개념입니다.
console.log("Start");
setTimeout(() => console.log("Timeout"), 0);
Promise.resolve().then(() => console.log("Promise"));
console.log("End");
// 출력 순서:
// Start
// End
// Promise
// Timeout
22. SetTimeout과 SetInterval에 화살표 함수 사용
화살표 함수는 this를 고정해 주므로 setTimeout 등에서 유용합니다.
class Timer {
start() {
this.seconds = 0;
setInterval(() => {
this.seconds++;
console.log(this.seconds);
}, 1000);
}
}
const timer = new Timer();
timer.start();
23. Class와 Static 메서드
클래스에서 인스턴스 생성 없이 호출할 수 있는 메서드를 정의할 수 있습니다.
class MathUtils {
static add(a, b) {
return a + b;
}
}
console.log(MathUtils.add(5, 3)); // 8
24. 다중 객체 병합과 스프레드
ES6의 스프레드 연산자를 활용한 다중 병합이 가능합니다.
const defaultConfig = { theme: "light", fontSize: 14 };
const userConfig = { fontSize: 16, language: "en" };
const finalConfig = { ...defaultConfig, ...userConfig };
console.log(finalConfig); // { theme: "light", fontSize: 16, language: "en" }
25. 지연 평가(Lazy Evaluation)
generator를 사용해 필요한 데이터만 계산하도록 구현 가능합니다.
function* generateSequence() {
yield 1;
yield 2;
yield 3;
}
const generator = generateSequence();
console.log(generator.next().value); // 1
console.log(generator.next().value); // 2
반응형
LIST
'[ javascript ]' 카테고리의 다른 글
| Node.js 뜯어보기 (0) | 2025.03.20 |
|---|---|
| 스프레드 연산자 (...)란? (0) | 2025.02.27 |
| 부동소수점 이슈 (0) | 2024.03.29 |
| Node.js & npm 업데이트 하기 (1) | 2024.03.22 |
| 리액트란? (0) | 2024.03.19 |
