깔끔한 자바스크립트 팁 5가지
깔끔한 팁 목록:
구조화
What a better way to explain something than through an example. Let's imagine we have an object with some tiger data and we need a function that will tell if the tiger is endangered.
const tiger = {
specific: 'Bengal',
latin: 'Panthera tigris tigris',
endangered: true,
weight: 325,
diet: 'fox',
legs: 4
}
// Bad code 💩
function isEndangered(tiger){
if (tiger.endangered) {
return `${tiger.specific} tiger (${tiger.latin}) is endangered!`
} else {
return `${tiger.specific} tiger (${tiger.latin}) is not
endangered.`
}
}
// Good code 👍
function isEndangered({endangered, specific, latin}){
if (endangered) {
return `${specific} tiger (${latin}) is endangered!`;
} else {
return `${specific} tiger (${latin}) is not
endangered.`;
}
}
// or
function isEndangered(tiger) {
const {endangered, specific, latin} = tiger;
// the rest is the same
콘솔 팁
코드 실행 시간 ⏲️
console.time 및 console.timeEnd를 사용하여 코드가 얼마나 빠른지(또는 느린지) 확인하십시오.다음은 예입니다.
console.time('TEST')
//some random code to be tested
console.timeEnd('TEST')
스타일로 로깅 😎
사용자 정의 출력을 가지려면 아래와 같이
%c를 추가한 다음 실제 CSS를 두 번째 인수로 사용합니다.console.log('%c AWESOME', 'color: indigo; font-size:100px')
테이블
객체 배열
console.table을 기록할 때 유용합니다.// x,y,z are objects
console.table([x, y, z])
스택 추적 로그
함수가 호출되는 위치의 스택 추적을 얻으려면 다음을 사용할 수 있습니다
console.trace.function foo(){
function bar(){
console.trace('test')
}
bar();
}
foo();
동적 키 이름
A super useful tip!
const key = 'dynamic'
const obj = {
dynamic: 'hey',
[key]: 'howdy'
}
obj.dynamic // hey
obj[key] // howdy
obj['dynamic'] //hey
obj.key // howdy
데이터 구조로 설정
If I'd ask you to remove the duplicates from an array of numbers. How would you do it?
Use Set as a data structure to improve the functionality and performance of your app. Here's an example where I'll remove duplicates from an array of numbers using Set object.
const arr = [1, 2, 2, 3]
const newArr = new Set(arr)
const unique = [...newArr]
// unique - [1, 2, 3]
콜백 기반 API -> 약속
To make things cleaner and more efficient you can transform the callback (ourCallbackFn) into a promise being a function.
// we start with this
async function foo() {
const x = await something1()
const y = await something2()
ourCallbackFn(){
// ...
}
}
// the transformation
async function foo() {
const x = await something1()
const y = await something2()
await promiseCallbackFn() //👀
}
function promiseCallbackFn() {
return new Promise((resolve, reject) => {
ourCallbackFn((err, data) => { //👀
if (err) {
reject(err)
} else {
resolve(data)
}
})
})
}
This was a list of 5 JavaScript tips. Pretty neat, right?
I hope you find my first post useful! Any feedback is greatly appreciated!
Thank You!
Dalibor
Reference
이 문제에 관하여(깔끔한 자바스크립트 팁 5가지), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/daliboru/5-neat-javascript-tips-284o텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
