자바스크립트(JavaScript) 코드 스니펫(Code snippet)

자바스크립트(JavaScript) 코드 스니펫(Code snippet)

자바스크립트(JavaScript)는 웹 개발에서 가장 널리 사용되는 언어 중 하나로, 다양한 작업을 효율적으로 수행할 수 있도록 도와주는 수많은 코드 스니펫(Code snippet)이 존재합니다. 이 글에서는 개발자의 생산성을 높일 수 있는 유용한 자바스크립트 코드 스니펫들을 소개합니다. 각 스니펫은 실무에서 바로 적용할 수 있도록 구체적인 설명과 함께 제공됩니다.

 

 

목차

1. 배열 중복 요소 제거하기
2. 객체에서 특정 키 제거하기
3. 비동기 함수의 동기적 실행
4. 문자열 뒤집기
5. 숫자 형식화
6. URL 파라미터 파싱하기

 

배열 중복 요소 제거하기

배열에서 중복된 요소를 제거하는 것은 자바스크립트에서 자주 필요한 작업 중 하나입니다. Set 객체와 spread 연산자를 사용하면 쉽게 구현할 수 있습니다.

const uniqueArray = (arr) => [...new Set(arr)];
    
const numbers = [1, 2, 2, 3, 4, 4, 5];
const uniqueNumbers = uniqueArray(numbers);
console.log(uniqueNumbers); // [1, 2, 3, 4, 5]

위의 코드 스니펫은 배열 numbers에서 중복된 요소를 제거하고, 유일한 값들로만 이루어진 배열을 반환합니다. Set 객체는 중복된 값을 허용하지 않기 때문에 매우 간단하게 중복 제거를 할 수 있습니다.

 

 

객체에서 특정 키 제거하기

객체에서 특정 키를 제거하는 방법도 매우 유용한 스니펫입니다. destructuring과 rest 문법을 활용하면 쉽게 구현할 수 있습니다.

const removeObjectKey = (obj, key) => {
    const { [key]: removed, ...rest } = obj;
    return rest;
};

const user = { name: "Alice", age: 25, country: "Korea" };
const updatedUser = removeObjectKey(user, "age");
console.log(updatedUser); // { name: "Alice", country: "Korea" }

이 스니펫은 객체 user에서 age 키를 제거하고, 나머지 키-값 쌍들로 이루어진 새로운 객체를 반환합니다.

 

 

비동기 함수의 동기적 실행

비동기 함수들을 동기적으로 실행하고자 할 때, async/await와 for...of 문을 결합하여 쉽게 구현할 수 있습니다.

const asyncTasks = async () => {
    const tasks = [task1, task2, task3];
    for (const task of tasks) {
        await task();
    }
};

이 코드는 배열 tasks에 있는 비동기 함수들을 순차적으로 실행합니다. 각 함수가 완료될 때까지 다음 함수가 실행되지 않으므로, 비동기 작업의 순서를 제어할 수 있습니다.

 

 

문자열 뒤집기

문자열을 뒤집는 것은 자바스크립트에서 간단하면서도 유용한 작업입니다. split, reverse, join 메서드를 결합하면 쉽게 구현할 수 있습니다.

const reverseString = (str) => str.split("").reverse().join("");

console.log(reverseString("JavaScript")); // "tpircSavaJ"

이 스니펫은 문자열을 문자 배열로 변환한 후, 배열을 뒤집고 다시 문자열로 합쳐서 반환합니다.

 

 

 

 

숫자 형식화

큰 숫자를 읽기 쉽게 표현하기 위해 형식화하는 방법도 자주 필요합니다. toLocaleString 메서드를 사용하면 매우 간단하게 형식화된 숫자를 얻을 수 있습니다.

const formatNumber = (num) => num.toLocaleString();

console.log(formatNumber(1234567)); // "1,234,567"

이 스니펫은 주어진 숫자를 천 단위로 쉼표를 추가하여 읽기 쉽게 만듭니다.

 

 

URL 파라미터 파싱하기

URL에서 쿼리 파라미터를 추출하는 작업도 웹 개발에서 매우 유용한 스니펫입니다. URLSearchParams 객체를 사용하여 쉽게 구현할 수 있습니다.

const getQueryParams = (url) => {
    const params = new URLSearchParams(url.split("?")[1]);
    return Object.fromEntries(params.entries());
};

const url = "https://example.com?page=1&sort=asc";
const queryParams = getQueryParams(url);
console.log(queryParams); // { page: "1", sort: "asc" }

이 스니펫은 URL에서 쿼리 스트링을 분리하여 각 파라미터와 그 값을 객체 형태로 반환합니다.

이 가이드에서 소개한 자바스크립트 코드 스니펫들은 실제 개발에서 자주 사용될 수 있는 유용한 예제들입니다. 이 스니펫들을 통해 개발 생산성을 높이고, 코드를 보다 간결하게 작성할 수 있습니다.