당신은 모를 수도 있습니다: JavaScript의 중요하고 잘 알려지지 않은 기능-JS 튜토리얼-php.cn

당신은 모를 수도 있습니다: JavaScript의 중요하고 잘 알려지지 않은 기능

DDD

풀어 주다： 2024-10-02 18:18:01

원래의

431명이 탐색했습니다.

You Might Not Know These: mportant and Lesser-Known Features in JavaScript

수년 동안 JavaScript를 사용해 왔더라도 일부 고급 기능을 발견하지 못했을 수도 있습니다. 이 기사에서는 JavaScript의 중요하면서도 잘 알려지지 않은 기능에 대해 설명합니다.

1. Optional Chaining을 통한 안전한 접근(?.)

자바스크립트에서 깊게 객체의 중첩 구조에 있는 값에 액세스하면 오류가 발생할 위험이 있을 수 있습니다. 깊은 값이 정의되지 않았거나 null인 경우 오류가 발생할 수 있습니다. 선택적 연결 연산자(?.)를 사용하면 이 문제가 해결됩니다.

예:

const user = {
  name: 'John',
  address: {
    city: 'New York'
  }
};

console.log(user.address?.city); // 'New York'
console.log(user.address?.zipcode); // undefined, does not throw an error

로그인 후 복사

2. 무효 합체(??)

JavaScript의 nullish 병합(??) 연산자는 값이 null이거나 정의되지 않은 경우 대체 값을 반환합니다. 이 연산자는 변수에 값이 없거나 정의되지 않은 경우 기본값을 제공하는 데 특히 유용합니다.

예:

et x = 0;
let y = x ?? 42; // returns 0 because 0 is not null or undefined
console.log(y);

로그인 후 복사

function getConfig(config) {
    return config ?? { timeout: 1000, retries: 3 };
}

let userConfig = null;
let finalConfig = getConfig(userConfig); // { timeout: 1000, retries: 3 } 
console.log(finalConfig);

로그인 후 복사

3. 디바운싱을 통한 성능 개선

디바운싱은 특정 기간 내에 기능이 한 번만 실행되도록 하는 기술입니다. 이는 이벤트를 자주 발생시키는 사용자 상호작용(예: 입력, 스크롤)에 특히 유용합니다. 디바운싱은 일반적으로 사용자가 작업을 완료한 후 프로세스(예: API 호출)를 시작하는 데 사용됩니다.

검색 입력 필드에서 키를 누를 때마다 API를 호출하는 대신 디바운싱을 사용하면 사용자가 입력을 멈출 때만 API 호출이 발생하도록 할 수 있습니다.

서버 과부하 방지: 더 적은 요청이 전송되어 서버가 더 효율적으로 작동할 수 있습니다.
지연 시간 감소: 사용자는 더 빠른 응답을 받습니다.
사용자 경험 향상: 사용자는 입력을 멈춘 후에만 제안이 나타날 때까지 기다립니다.

예:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Debounce Example</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
        }
        #searchInput {
            padding: 10px;
            width: 300px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        #result {
            margin-top: 20px;
        }
    </style>
</head>
<body>
    <h1>Search Example</h1>
    <input type="text" id="searchInput"/>
    <div id="result"></div>

    <script>
        // Debounce function
        function debounce(func, delay) {
            let timeoutId;
            return function(...args) {
                clearTimeout(timeoutId);  // Clear previous timer
                timeoutId = setTimeout(() => func.apply(this, args), delay);  // Set a new timer
            };
        }

        const search = debounce((query) => {
            console.log(`Searching for ${query}`);
            // You can make an API call here
            document.getElementById('result').innerText = `Searching for results: ${query}`;
        }, 300);

        // Listening to input event
        document.getElementById('searchInput').addEventListener('input', (event) => {
            search(event.target.value);
        });
    </script>
</body>
</html>

로그인 후 복사

4. 프록시를 사용하여 개체 관리

프록시를 사용하면 개체에 대한 작업을 가로채서 재정의할 수 있습니다. 이 기능은 객체에 대한 작업을 수행하기 전에 사용자 정의된 동작을 정의하는 데 유용합니다.

예:

const target = {
  message: 'Hello'
};

const handler = {
  get: function(obj, prop) {
    if (prop in obj) {
      return obj[prop];
    } else {
      return `Property ${prop} does not exist`;
    }
  }
};

const proxy = new Proxy(target, handler);

console.log(proxy.message); // Hello
console.log(proxy.nonExistent); // Property nonExistent does not exist

로그인 후 복사

5. Set 및 WeakSet을 사용하여 중복 값 방지

중복 값을 방지하기 위해 두 구조를 모두 사용할 수 있습니다. 각 구조를 사용하는 방법의 예는 다음과 같습니다.

Set으로 중복 값 방지

const numbers = [1, 2, 3, 4, 4, 5, 6, 6, 7, 8, 9, 9];
const uniqueNumbers = [...new Set(numbers)];

console.log(uniqueNumbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9]

로그인 후 복사

WeakSet으로 중복 값 방지

const uniqueObjects = new WeakSet();

const objA = { name: 'Alice' };
const objB = { name: 'Bob' };
const objC = objB; // Same reference

// Adding values
uniqueObjects.add(objA);
uniqueObjects.add(objB);
uniqueObjects.add(objC); // This won't be added since it's a reference to objB

console.log(uniqueObjects); // WeakSet { ... } (shows objA and objB)

로그인 후 복사