자바스크립트 트릭
중첩 객체의 속성을 얻기 위해 null 값과 undefined를 확인하는 방법은 무엇입니까?
nullish 및 연쇄 연산자
const product = {
name: 'Coke',
price: 10,
provider: {
name: 'Wailkk',
address: 'Fake Street',
state: {
id: 1,
name: 'Florida',
country: {
code: 'US',
name: 'United States',
},
},
orders: null,
fPrice: (x) => 100,
},
};
//Old way
const providerCountry = product.provider
? product.provider.name
? product.provider.name
: null
: null;
//Nullish Coalsencing Operator Way
//If the value is null then this option it will not works.
const _providerCountry = product.provider.name ?? undefined;
//Not work if the value is null
const providerOrders = product.provider.orders ?? 1;
// Should be null. [Error]
// Nullish not defined.
const providerNotDefined = product.provider.notDefined ?? null;
//Trick: chaining Operator
const providerAddress = product?.provider?.address;
//It works with Dynamic properties.
const propertyName = 'price';
const productPrice = product?.[propertyName]?.explore;
체인 오퍼레이터 웨이
속성이 존재하지 않거나 값이 정의되지 않은 경우 정의되지 않은 값을 반환하여 코드를 깨끗하게 유지합니다. 속성이 존재하지 않으면 undefined가 반환됩니다. 이 연산자가 동일한 예제 객체에서 어떻게 보이는지 봅시다.
//Trick: chaining Operator
const providerAddress = product?.provider?.address;
//It works with Dynamic properties.
const propertyName = 'price';
const productPrice = product?.[propertyName]?.explore;
//Works with Functions too.
const productProviderPrice = product?.provider?.fPrice?.('x');
//Result: 100;
const _productProviderPrice = product?.provider?.fPricex?.('x');
//Result: undefined
NOT Compatible with: Internet Explorer, Firefox for Android, Opera for Android, and Samsung Internet Browser.
IIFE: 즉시 호출되는 함수 표현식
(이름에서 알 수 있듯이) 정의된 직후에 호출되는 함수입니다.
let hi = (() => {
return 'Hello Dear World';
})();
//Define function and parenthesis before the semicolon.
console.log(hi);
// Result = 'Hello Dear World'
함수 클로저
외부 계층 또는 외부 기능 범위에 대한 액세스와 함께 스택 또는 번들 기능의 조합입니다.
const functionLevelOne = () => {
let day = 23;
const functionLevelTwo = () => {
day += 1;
return day;
}
return functionLevelTwo;
}
console.log(functionLevelOne());
// Result: 24;
// It's calling the return function on level one.
스프레드 연산자는 언제 사용합니까?
반복 호출인 경우 스프레드를 사용하여 두 어레이를 병합하면 성능에 영향을 미칠 수 있습니다. 그리고 Spread와 같은 인수를 전달하는 함수를 호출하면 해당 호출이 자주 발생합니다. ...spread는 반복 호출이나 함수 호출이 아닌 경우에만 사용하지만 인수 확산 정의로는 사용하지 마십시오.
이 기사에 트릭을 자주 추가하고 업데이트하겠습니다.
찾기 및 필터링
const product = {
name: 'Coke',
price: 10,
provider: {
name: 'Wailkk',
address: 'Fake Street',
state: {
id: 1,
name: 'Florida',
country: {
code: 'US',
name: 'United States',
},
},
orders: null,
fPrice: (x) => 100,
},
};
//Old way
const providerCountry = product.provider
? product.provider.name
? product.provider.name
: null
: null;
//Nullish Coalsencing Operator Way
//If the value is null then this option it will not works.
const _providerCountry = product.provider.name ?? undefined;
//Not work if the value is null
const providerOrders = product.provider.orders ?? 1;
// Should be null. [Error]
// Nullish not defined.
const providerNotDefined = product.provider.notDefined ?? null;
//Trick: chaining Operator
const providerAddress = product?.provider?.address;
//It works with Dynamic properties.
const propertyName = 'price';
const productPrice = product?.[propertyName]?.explore;
//Trick: chaining Operator
const providerAddress = product?.provider?.address;
//It works with Dynamic properties.
const propertyName = 'price';
const productPrice = product?.[propertyName]?.explore;
//Works with Functions too.
const productProviderPrice = product?.provider?.fPrice?.('x');
//Result: 100;
const _productProviderPrice = product?.provider?.fPricex?.('x');
//Result: undefined
NOT Compatible with: Internet Explorer, Firefox for Android, Opera for Android, and Samsung Internet Browser.
(이름에서 알 수 있듯이) 정의된 직후에 호출되는 함수입니다.
let hi = (() => {
return 'Hello Dear World';
})();
//Define function and parenthesis before the semicolon.
console.log(hi);
// Result = 'Hello Dear World'
함수 클로저
외부 계층 또는 외부 기능 범위에 대한 액세스와 함께 스택 또는 번들 기능의 조합입니다.
const functionLevelOne = () => {
let day = 23;
const functionLevelTwo = () => {
day += 1;
return day;
}
return functionLevelTwo;
}
console.log(functionLevelOne());
// Result: 24;
// It's calling the return function on level one.
스프레드 연산자는 언제 사용합니까?
반복 호출인 경우 스프레드를 사용하여 두 어레이를 병합하면 성능에 영향을 미칠 수 있습니다. 그리고 Spread와 같은 인수를 전달하는 함수를 호출하면 해당 호출이 자주 발생합니다. ...spread는 반복 호출이나 함수 호출이 아닌 경우에만 사용하지만 인수 확산 정의로는 사용하지 마십시오.
이 기사에 트릭을 자주 추가하고 업데이트하겠습니다.
찾기 및 필터링
const functionLevelOne = () => {
let day = 23;
const functionLevelTwo = () => {
day += 1;
return day;
}
return functionLevelTwo;
}
console.log(functionLevelOne());
// Result: 24;
// It's calling the return function on level one.
반복 호출인 경우 스프레드를 사용하여 두 어레이를 병합하면 성능에 영향을 미칠 수 있습니다. 그리고 Spread와 같은 인수를 전달하는 함수를 호출하면 해당 호출이 자주 발생합니다. ...spread는 반복 호출이나 함수 호출이 아닌 경우에만 사용하지만 인수 확산 정의로는 사용하지 마십시오.
이 기사에 트릭을 자주 추가하고 업데이트하겠습니다.
찾기 및 필터링
let colors = [
{ id: 0, color: 'Red' },
{ id: 1, color: 'Green' },
{ id: 2, color: 'Blue' }
];
let greenColor = colors.find(color => color.color === 'Green');
ID 값으로 레코드 필터링
let users = [
{ id: 0, name: 'John Smith' },
{ id: 1, name: 'Mary Smith' },
{ id: 2, name: 'Jane Foster' }
];
let filteredData = data.filter(path => path.includes('Smith'));
성이 'Smith'인 사용자의 이름을 반환합니다.
반복
객체에 대한 키, 값 사이를 반복합니다.
let myObject = { one: 1, two: 2, three: 3 };
Object.keys(myObject).forEach((key, value) => {
//...do something
console.log(key, value);
});
이벤트 루프 에센셜.
태스크 큐는 자바스크립트에서 사용됩니다. Javascript 작업은 우선 순위가 가장 높습니다. Promise와 같은 마이크로 태스크는 두 번째 우선 순위를 가집니다. 렌더링하기 전(requestAnimationFrame) 또는 후에(setTimeout) 실행된 매크로 작업의 세 번째 위치입니다.
console.log(1);
Promise.resolve().then(() => console.log(2));
setTimeout(() => console.log(3), 100);
console.log(4);
// 1 -> 4 -> 2 -> 3
이벤트 콜백으로 DOM 요소에 콜백 함수를 추가하는 세 가지 방법이 있습니다.
let myObject = { one: 1, two: 2, three: 3 };
Object.keys(myObject).forEach((key, value) => {
//...do something
console.log(key, value);
});
태스크 큐는 자바스크립트에서 사용됩니다. Javascript 작업은 우선 순위가 가장 높습니다. Promise와 같은 마이크로 태스크는 두 번째 우선 순위를 가집니다. 렌더링하기 전(requestAnimationFrame) 또는 후에(setTimeout) 실행된 매크로 작업의 세 번째 위치입니다.
console.log(1);
Promise.resolve().then(() => console.log(2));
setTimeout(() => console.log(3), 100);
console.log(4);
// 1 -> 4 -> 2 -> 3
이벤트 콜백으로 DOM 요소에 콜백 함수를 추가하는 세 가지 방법이 있습니다.
인라인(높은 우선 순위)
<div onclick="console.log('div')">Hello</div>
바인딩 콜백(중간 우선 순위)
div.onclick = () => console.log('div');
이벤트 리스너 추가/제거: 동일한 이벤트와 관련된 다중 콜백을 지원합니다. 이벤트 버블링 및 캡처를 지원합니다.
div.addEventListener('click', callbackOne); div.removeEventListener(callbackOne);
버블링
<div onclick="console.log('div')">
<p onclick="console.log('p')">
<span onclick="console.log('span')">
</span>
</p>
</div>
//span → p → div
버블링: 가장 안쪽 요소 → 두 번째 안쪽 요소 → … → 가장 바깥쪽 요소
캡처: 가장 바깥쪽 요소 → 두 번째 가장 바깥쪽 요소 → … → 가장 안쪽 요소
Capturing is triggered earlier than bubbling
div.addEventListener('click', () => console.log('div'));
p.addEventListener('click', () => console.log('p'), { capture: true });
span.addEventListener('click', () => console.log('span'));
//Result: p → span → div
div and span use bubbling, and p uses capturing.
이벤트 위임
성능에 영향을 미치는 여러 콜백이 있는 루프 함수가 있는 경우:
const ul = document.getElementById('myUL');
for (let i = 0; i < 100; i += 1) {
const li = document.createElement('li');
li.textContent = `li-${i}`;
li.id = `li-${i}`;
li.addEventListener('click', e => console.log(e.target.id));
ul.appendChild(li);
}
모두에게 하나의 콜백을 위임합니다.
const ul = document.getElementById('myUL');
for (let i = 0; i < 100; i += 1) {
const li = document.createElement('li');
li.textContent = `li-${i}`;
li.id = `li-${i}`;
ul.appendChild(li);
}
ul.addEventListener('click', e => console.log(e.target.id));
이벤트 전파
전파 중지는 버블링 또는 캡처에 사용되는 전파를 중지합니다.
div.addEventListener('click', () => console.log('div'), true);
p.addEventListener('click', e => {
e.stopPropagation();
console.log('p');
});
span.addEventListener('click', () => console.log('span'), true);
When user clicks
only will be logged 'p'.
XMLHttpRequest
Oldest fetch data in an asynchronous way
const oReq = new XMLHttpRequest();
oReq.open('GET', 'https://jsonplaceholder.typicode.com/todos/1');
oReq.send();
oReq.addEventListener('load', function () {
console.log(this.responeText);
});
술책
XMLHttpRequest보다 더 많은 옵션이 있는 새로운 방법, 약속을 반환합니다.
// Promise
fetch(url)
.then(res => res.json())
.then(data => console.log(data));
// async & await
const res = await fetch(url);
const data = await res.json();
console.log(data);
악시오스
XMLHttpRequest 및 fetch를 최대한 활용합니다.
// Promise
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
// async & await
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}
Reference
이 문제에 관하여(자바스크립트 트릭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/edisonsanchez/javascript-tricks-51pe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)