7가지 필수 자바스크립트 팁과 요령 🎈

세계에서 가장 인기 있는 언어인 JavaScript에서 발견되는 7가지 유용한 팁과 요령을 살펴보겠습니다.

1. 매개변수를 사용한 구조 분해

함수 매개변수 내에서 객체 분해를 사용할 수 있습니다. 이에 대한 일반적인 사용 사례는 이벤트 리스너와 이벤트 개체의 target 속성에 대한 액세스 권한을 얻는 것과 같습니다.

buttonElement.addEventListener("click", ({ target }) {
    // is the same as using e.target 👇
    console.log(target);
});

2. JSON을 사용한 딥 카피

개체 스프레드 또는 Object.assign()를 사용하여 개체의 얕은 복사본을 만드는 것에 대해 들어봤을 수 있지만 JSON을 사용하여 전체 복사본을 만드는 것에 대해 알고 계셨습니까?
JSON.stringify()를 사용하여 개체를 JSON으로 변환한 다음 JSON.parse()를 사용하여 다시 구문 분석하여 전체 복사본을 만듭니다.

큰 개체에 수행하면 성능 문제가 발생할 수 있으므로 간단한 개체에 대해서만 이 작업을 수행해야 합니다.

const person = {
    name: "Dom",
    age: 28,
    skills: [
        "Programming",
        "Cooking",
        "Tennis"
    ]
};

const copied = JSON.parse(JSON.stringify(person));

// false 😎
console.log(person.skills === copied.skills);

3. OR을 사용한 쉬운 기본값

나는 이것에 대해 많이 이야기합니다. 기본적으로 if 문을 사용하는 것과는 반대로 기본값에 논리 OR 연산자( || )를 사용할 수 있습니다.

또는 더 엄격한 비교를 위해 nullish coalescing operator을 활용할 수 있습니다.

이전 코드(if 문 사용 - 4줄)

let username = getUsername();

if (!username) {
    username = "Dom";
}

새 코드(|| 사용 - 1줄)

const username = getUsername() || "Dom";

새 코드는 또한 const 위에 let 를 사용할 수 있음을 의미합니다.

4. 고급 배열 검색

indexOf() 및 includes()는 고급 배열 검색을 허용하는 또 다른 방법이 있으며 find()라고 합니다.
find() 메서드를 사용하면 테스트 함수를 전달할 수 있습니다. 테스트 함수를 통과하는 배열 내의 첫 번째 요소가 반환됩니다.

이렇게 하면 보다 유용한 배열 검색이 가능합니다.

const occupations = [
    "Lawyer",
    "Doctor",
    "Programmer",
    "Chef",
    "Store Manager",
];

const result = occupations.find(o => o.startsWith("C"));

// "Chef" 🧑‍🍳
console.log(result);

5. 어레이 중복 제거

전에 들어본 적이 있을 수 있지만 Set 데이터 구조를 사용하여 배열에서 중복 항목을 제거하는 정말 간단한 방법이 있습니다.

기본적으로 Set는 중복 값을 허용하지 않습니다. 배열을 Set 로 변환한 다음 다시 배열로 변환하여 이를 활용할 수 있습니다.

const numbers = [5, 10, 5, 20];
const withoutDuplicates = Array.from(new Set(numbers));

// [5, 10, 20] 👇
console.log(withoutDuplicates);

6. 자체 호출 함수

이것은 고전입니다. 자체 호출 함수는 스스로 실행하는 함수입니다. 이들의 일반적인 사용 사례는 복잡한 논리가 필요한 변수 또는 상수를 할당하는 것입니다.

const someComplexValue = (() => {
    const a = 10;
    const b = 20;

    if (a > b) {
        return a * b;
    }

    return b / a;
})();

물론 위의 예는 사소한 것이지만 자체 호출 함수 내에 있어야 하는 복잡한 코드 종류를 상상할 수 있습니다.

7. Spread를 사용한 배열 복사

이 목록의 마지막에는 배열의 얕은 복사본을 만드는 작업이 포함됩니다. 스프레드( ... )를 사용하여 이를 수행할 수 있습니다.

const numbers = [5, 19, 24, 36];
const numbersCopy = [...numbers];

// false
console.log(numbers === numbersCopy);

이 목록에서 최소한 새로운 것을 배웠기를 바랍니다. 더 많은 JavaScript 콘텐츠를 보려면 내 YouTube 채널을 확인하십시오.

지금 등록하세요 👉 JavaScript DOM 단기집중과정

웹 개발을 배우고 있다면 아래 링크에서 JavaScript DOM에 대한 전체 과정을 찾을 수 있습니다 👇
https://www.udemy.com/course/the-ultimate-javascript-dom-crash-course/?referralCode=DC343E5C8ED163F337E1