3가지 자바스크립트 팁

유튜브를 통해 자바스크립트에 대해 공부를 하다가, 몇 가지 팁을 얻어가지고 공유하려한다.

1. JSON을 이용한 깊은 복사(Deep Copy)

아래와 같은 객체를 복사한다고 생각해보자

const country = {
    name: 'korea',
    characteristic: [
        'kimchi',
        'BTS',
        'hanbok'
        ],
};

대부분의 방식의 복사는 얕은 복사(shallow copy)가 되어서 characteristic이라는 배열은 같은 주소값을 바라보게 된다.

쉽게 깊은 복사를 하는 팁은 JSON.parse()와 JSON.stringify()를 이용하는 것이다.

const countryCopy = JOSN.parse(JSON.stringify(country));

이런식으로 JSON으로 변환했다가 다시 JavaScript값으로 변환하는 것이다.
아래 같이 DeepCopy 되었음을 확인할 수 있다.

country.characteristic === countryCopy.characteristic; // false

2. 배열 중복제거

배열에서 중복을 제거하는 쉬운 방법은 Set을 이용하는 것이다.

const numbers = [1, 2, 3, 1, 4, 5, 2, 2];

위와 같은 배열이 있을때, 1과 2과 중복 되었음을 볼 수 있다.

Set 객체는 자료형에 관계 없이 원시 값과 객체 참조 모두 유일한 값을 저장할 수 있다.

하지만 Set은 객체이므로 배열로 한번 변환을 시켜줘야 한다.

const removeDuplicates1 = Array.from(new Set(numbers));

// or

const removeDuplicates2 = [...new Set(numbers)];

removeDuplicates1; // [1, 2, 3, 4, 5]
removeDuplicates2; // [1, 2, 3, 4, 5]

두 결과 모두 중복이 제거 되었음을 알 수 있다.

3. 스스로 호출하는 함수

이건 대부분의 사람들이 사용해 봤을 것이라고 생각한다.

아래처럼 매우 복잡한 함수가 있고 함수를 실행해야 한다고 생각해보자.

const complicatedCalculation = () => {
    const a = 1;
    const b = 2;

    return a + b;
};

complicatedCalculation(); // 3

그럼 마지막 줄 처럼 함수의 return 값이 필요한 곳마다 함수를 실행 시켜야 한다.

아래 처럼 함수를 선언하자마자 실행하면 return값이 변수에 저장이 되어 필요할 곳에 사용할 수 있다.

const complicatedCalculation = (() => {
    const a = 1;
    const b = 2;

    return a + b;
})();

complicatedCalculation; // 3

---

참고자료

7 MUST KNOW JavaScript Tips and Tricks - dcode