[JS] 자바스크립트 최신문법 정리하기

ES6문법부터 그 이후의 최신 문법까지 정리하기

 

1. let / const

이전에 var를 사용해서 변수를 선언할 수 있었는데 let과 const는 블록 내에서만 유효한 변수를 생성할 수 있다.

let은 재할당이 가능한 변수, const는 한 번 할당된 값이 재할당되지 않는 상수를 선언할 때 사용

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

const PI = 3.14;
PI = 3.14159; // 에러 발생

[JS] var, let, const 차이점

 

2. 화살표함수 (Arrow function)

function 키워드 대신 화살표 (=>)를 사용해서 함수를 정의할 수 있다.

// 기존 함수 선언 방식
function add(a, b) {
    return a + b;
}

// 매개변수가 있는 화살표 함수
const add = (a, b) => a + b;
const square = x => x * x;

// 매개변수가 없는 화살표 함수
const greet = () => console.log('Hello!')

 

화살표 함수는 항상 익명 함수로 정의되어 this의 바인딩 방식이 일반 함수와 다르다.

[JS] 자바스크립트 this

 

3. 템플릿 리터럴(Template literal)

문자열을 보다 유연하게 작성할 수 있도록 도와주며 역따옴표(` `)로 문자열을 감싸고

`${ }` 안에 변수나 표현식을 삽입해서 문자열을 만들 수 있다.

const name = 'John';
const greeting = `Hello, ${name}!`;
console.log(greeting) // Hello John!

 

4. 구조 분해

 

배열이나 객체를 분해해서 변수에 할당할 수 있는데

객체나 배열의 특정값을 추출해서 변수로 선언할 때 유용하다.

const person = {name: 'John', age: 30};
const {name, age} = person;
console.log(name); // John
console.log(age); // 30

// 원하는 변수명 사용하기
const numbers = [1, 2, 3, 4, 5];
const [first, second, ...rest] = numbers;
console.log(first); // 1
console.log(secone); // 2
console.log(rest); // [3, 4, 5]

 

5. 디폴드 매개변수(Default Parameter)

함수의 매개변수에 기본값 설정하기

function greet(name = 'john') {
    console.log(`Hello ${name}!`);
}

 

6. 클래스

클래스를 정의하면서 상속을 통해 코드의 재사용성을 높이고,

메서드 오버라이딩을 통해 자식 클래스에서 부모 클래스의 메서드를 수정할 수 있다.

class Animal {
    construnctor(name) {
        this.name = name;
    }
    speak() {
        console.log(`${this.name} makes a noise.`)    
    }
}

class Dog extends Animal {
    speak() {
        console.log(`${this.name} barks.`)
    }
}

const myDog = new Dog('Bobby');
myDog.speak(); // Bobby barks.

 

7. 모듈(Modules)

import와 export 키워드를 사용해서 모듈을 정의하고 가져오기

export const sum = (a, b) => a + b;

import { sum } from './app.js'
console.log(sum(s, 4)); // 7

 

8. Promise

비동기 코드를 다루는 효율적인 방법으로 콜백지옥을 피할 수 있다.

아래 코드에서 fetchData()는 Promise 객체를 반환하는데 이 함수는 비동기 작업을 수행하는데 사용된다.

resolve와 reject 매개변수는 Promise의 상태를 결정하는 함수로 resolve는 성공, reject는 실패를 나타낸다.

그래서 success가 true면 data가 then() 메서드로, success가 false면 에러 정보 error가 catch() 메서드로 전달된다.

function fetchData() {
    return new Promise((resolve, reject) => {
        // 비동기 작업 수행
        if(success) {
            resolve(data);
        } else {
            reject(error);
        }
    });
}

fetchData()
    .then(data => console.log(data))
    .catch(error => console.log(error));

[JS] 자바스크립트 비동기 처리(Promise)

 

9. async / await

비동기 함수를 보다 동기적으로 작성할 수 있게 해준다.

async function 키워드로 함수를 비동기 함수로 정의한다.

await 키워드를 사용해서 비동기 작업의 완료를 기다리며 결과를 반환한다.

아래 코드는 fetch() 함수를 사용해서 API로부터 데이터를 가져오고, await 키워드로 함수가 Promise를 반환할 때까지 기다리게 된다.

이때 try-catch 블록으로 비동기 작업 중 발생할 수 있는 예외처리를 한다.

async function fetchData() {
    try {
        const response = await fetch('https://api.example.com/data');
        const data = await response.json();
        console.log(data);
    } catch(error) {
        console.log(error);
    }
}

fetchData();

[JS] 자바스크립트 비동기 처리(Async/Await)

 

10. 나머지 연산자  / 전개 연산자 (Rest / Spread Operator)

나머지 연산자는 함수의 매개변수로 사용될 때, 함수에 전달된 모든 인자들을 배열로 모아주는 역할을 한다.

전개 연산자는 배열이나 객체를 펼쳐서 개별 요소로 분리하거나, 복사해서 다른 배열이나 객체에 넣을 때 사용된다.

// 나머지 연산자 (인자들을 배열 numbers로 모아주기. numbers => 배열)
function sum(...numbers) {
    return numbers.reduce((total, num) => total + num, 0)
}

console.log(sum(1, 2, 3)); // 6
console.log(sum(4, 5, 6, 7)); // 22

// 전개 연산자 (배열, 객체를 펼쳐서 개별 요소로 분리 / 복사해서 다른 배열, 객체에 넣기)
const arr1 = [1, 2, 3];
const arr2 = [4, 5, 6];

const combined = [...arr1, ...arr2];
console.log(combined); // [1, 2, 3, 4, 5, 6]

 

11. Map / Set

Map 객체는 키 - 값 쌍을 저장하며 각 키는 유일해야 한다.

new Map()을 사용해서 Map 객체를 생성하고 Map 객체에 키 - 값 쌍을 추가하거나 업데이트 한다.

Set 객체는 중복을 허용하지 않는 값들의 집합을 저장한다.

new Set()을 사용해서 배열이나 객체로부터 Set객체를 생성하고 중복된 값은 자동으로 제거된다.

 

주요 메서드

• set(key, value): Map 객체에 키 - 값 쌍을 추가하거나 업데이트
• add(value):  Set 객체에 값 추가 (중복 값 무시)
• get(key): 주어진 키에 대응하는 값 반환
• has(key): 주어진 키가 Map / Set 객체에 존재하는지 여부
• delete(key): 주어진 키에 해당하는 항목 제거
• clear(): Map / Set 객체의 모든 항목 제거
• size: Map / Set 객체의 항목의 수 반환

const myMap = new Map();
myMap.set('key', 'value');
console.log(myMap.get('key')); // value

const mySet = new Set([1, 2, 3, 4, 5]);
console.log(mySet.size); // 5

 

12. 옵셔널 체이닝(Optional Chaining)

옵셔널 체이닝 연산자('?')는 객체의 속성에 안전하게 접근할 수 있는 방법을 제공한다.
객체의 속성이 존재하는지 여부를 물음표로 확인하고 속성이 존재할 때만 속성에 값을 가져오고, 존재하지 않으면 undefined를 반환한다.

아래 코드는 user.address가 존재할 때에만 city 속성을 가져오고, undefined거나 null일 때 undefined를 반환한다.

const user = {
    id: 1,
    name: 'Alice',
    address: {
        city: 'wonderland'
    }
};

console.log(user.address?.city); // wonderland

 

13. null 병합 연산자(Nullish Coalescing Operator)

'??' 연산자로 null 또는 undefined값을 대체할 수 있는 연산자

왼쪽 피연산자가 null 또는 undefined일 때 오른쪽 피연산자를 반환한다.

null 병합 연산자는 엄격한 동등 연산 ('===')을 사용해서 null 또는 undefined 여부를 판별한다.

그렇기 때문에 만약 myValue 변수에 0이 할당되었다면 0은 null 또는 undefined로 간주하지 않기 때문에 그대로 0이 출력된다.

const myValue = null;
const result = myValue ?? 'default';
console.log(result); // default