당신은 모를 수도 있습니다: JavaScript의 중요하고 잘 알려지지 않은 기능
- DDD원래의
- 2024-10-02 18:18:01445검색
수년 동안 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)
결론
이러한 기능은 JavaScript의 성능과 유연성을 최대한 활용할 수 있는 도구를 제공합니다. 코드의 성능을 높이고, 깔끔하고, 유지 관리하기 쉽게 만들기 위해 주저하지 말고 이러한 기능을 프로젝트에 통합하세요.
위 내용은 당신은 모를 수도 있습니다: JavaScript의 중요하고 잘 알려지지 않은 기능의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!