이 팁으로 JS 기술을 향상시키세요 #2

이 기사에서 나는 당신의 기술을 향상시킬 수 있는 JS에 대한 몇 가지 뉴스 팁을 공유할 것입니다!

삭제를 사용하여 속성을 제거하지 마십시오.

delete 객체에서 속성을 제거하는 것은 매우 좋지 않으며(성능이 좋지 않음), 많은 부작용이 발생합니다.

그러나 속성을 제거해야 하는 경우에는 어떻게 해야 합니까?

기능적 접근 방식을 사용하고 이 속성 없이 새 개체를 만들어야 합니다. 👇 다음과 같은 기능으로 이 작업을 수행할 수 있습니다.

const removeProperty = (target, propertyToRemove) => {
    // We split the property to remove from the target in another object
    const { [propertyToRemove]: _, ...newTarget } = target
    return newTarget
}

const toto = { a: 55, b: 66 }
const totoWithoutB = removeProperty(toto, 'b') // { a: 55 }

많은 도움이 될 아주 간단한 스니펫!

존재하는 경우에만 객체에 속성 추가

이 속성이 정의된 경우 객체에 속성을 추가해야 하는 경우가 있습니다. 👇 우리는 이런 것을 만들 수 있습니다.

const toto = { name: 'toto' }
const other = { other: 'other' }
// The condition is not important
const condition = true

if (condition) {
   other.name = toto.name 
}

❌어쨌든 별로 좋은 코드는 아니지만...

✅ 더 고급스럽게 사용할 수 있어요!👇

// The condition is not important
const condition = true

const other = {
   other: 'other',
   ...condition && { name: 'toto' }
}

부울의 스프레드 연산자에 대한 자세한 설명:

조건이 참이면 객체에 속성을 추가합니다(&& 연산자 덕분에 작동함)

👇이것도 만들 수 있어요.

// The condition is not important
const condition = true
const toto = { name: 'toto' }

const other = {
   other: 'other',
   ...condition && toto
}

템플릿 리터럴 문자열 사용

자바스크립트에서 문자열을 배우고 변수와 연결해야 할 때 👇과 같은 코드를 작성합니다.

const toto = 'toto'
const message = 'hello from ' + toto + '!' // hello from toto!

❌ 다른 변수와 문자열을 추가하면 쓰레기가 될 수 있습니다!

템플릿 리터럴 문자열을 사용할 수 있습니다.

간단한 따옴표나 큰 따옴표를 백틱으로 바꾸면 됩니다.

그리고 ${variable}로 모든 변수를 래핑합니다.

const toto = 'toto'
const message = `hello from ${toto}!` // hello from toto!

단락 조건부

👇과 같이 조건이 참인 경우에만 함수를 실행해야 하는 경우

if(condition){
    toto()
}

👇과 같이 단락을 사용할 수 있습니다.

condition && toto()

&& (AND) 연산자 덕분에 조건이 true이면 toto 함수를 실행합니다.

변수의 기본값 설정

기본값을 변수로 설정해야 하는 경우

let toto

console.log(toto) //undefined

toto = toto ?? 'default value'

console.log(toto) //default value

toto = toto ?? 'new value'

console.log(toto) //default value

?? (Nullish coalescing) 연산자 덕분에 첫 번째 값이 정의되지 않았거나 null이면 ( ?? ) 뒤에 기본값을 할당합니다!

콘솔 타이머 사용

예를 들어 함수의 실행 시간을 알아야 하는 경우 타이머를 콘솔할 수 있습니다. 함수 실행 전후의 시간을 매우 빠르게 돌려줍니다!

console.time()
for (i = 0; i < 100000; i++) {
  // some code
}
console.timeEnd() // x ms

이 글이 마음에 드셨으면 좋겠습니다!

🎁 저를 팔로우하고 MP하시면 제 새책Underrated skills in javascript, make the difference을 무료로 받으실 수 있습니다 😁

또는 그것을 얻으십시오 HERE

🇫🇷🥖 프랑스어 개발자의 경우 내

🎁 MY NEWSLETTER

☕️ 할 수 있어요 SUPPORT MY WORKS 🙏

🏃‍♂️ 👇 팔로우 하시면 됩니다.

🕊 트위터 :

👨‍💻 Github: https://github.com/Code-Oz

그리고 이 글을 🔖 마크할 수 있습니다!