꼭 알아야 할 5가지 자바스크립트 팁과 요령

JavaScript는 새롭고 깔끔한 기능을 계속 추가합니다. 때로는 따라 잡기가 어렵습니다. 이 기사에서는 최신 정보를 얻고 JS 지식을 심화할 수 있는 몇 가지 멋진 팁과 요령을 공유합니다.

1. "Set" 개체를 사용하여 고유한 값으로 배열을 만듭니다.

일부 중복 항목이 있는 배열이 있고 고유한 항목만 필터링하려고 한다고 상상해 보십시오.

이를 달성하기 위해 맵이나 필터를 작성할 수 있습니다. 또는 ES6에서는 단 한 줄의 코드로 이 문제를 해결하는 Set 개체를 도입했습니다.

const arrayWithUniqueItems = [...new Set([1, 2, 3, 3,])]
// [1, 2, 3]

이제 이 예제에서는 정수를 사용하지만 문자열과 부동 소수점 숫자도 사용할 수 있습니다!

Set 개체에 대한 좀 더 자세한 정보는 이 를 확인하십시오.

2. "만약" 진술을 짧게 하라

이제 이것은 까다로운 것입니다.

"if"문을 줄이는 것은 코드를 단순화하는 좋은 방법이 될 수 있습니다.

그러나 더 복잡한 문장을 작성해야 하는 경우에는 반드시 첫 번째 옵션을 선택해야 합니다.

// Instead of using this                                      
if (iAmHungry) {
   bakeAnEgg()
}

// You can use this
if (iAmHungry) bakeAnEgg()

// Or this
iAmHungry? bakeAnEgg() : 0

가독성과 사용 용이성은 몇 줄 적은 코드보다 더 중요합니다.

3. 길이 속성을 사용하여 배열 단축

배열을 줄이는 가장 좋은 방법은 길이 속성을 재정의하는 것입니다.

let array = [0, 1, 2, 3, 4, 5, 6, 6, 8, 9]
array.length = 4

// Result: [0, 1, 2, 3]

그러나 알아야 할 중요한 점은 이것이 배열을 변경하는 파괴적인 방법이라는 것입니다. 즉, 배열에 있던 다른 모든 값을 잃게 됩니다.

4. 스프레드 연산자를 사용하여 개체 결합

여러 개체를 모두 포함하는 하나의 개체로 결합하려고 한다고 가정해 보겠습니다.

스프레드 연산자( … )는 이를 달성하는 좋은 방법입니다!

const obj1 = {'a': 1, 'b': 2}
const obj2 = {'c': 3}
const obj3 = {'d': 4}

// Combine them using the spread operator            
const objCombined = {...obj1, ...obj2, ...obj3}

// Result: {'a': 1, 'b': 2, 'c': 3, 'd': 4}

이것을 사용하는 동안 염두에 두어야 할 점은 개체 중 하나를 업데이트할 때마다 결합된 개체에 해당 변경 사항이 반영되지 않는다는 것입니다.

5. window.location 개체 사용

JavaScript는 window.location 개체를 사용하여 현재 URL에 액세스할 수 있습니다. 꽤 깔끔하지만 더 멋진 점은 이 객체가 URL의 특정 부분도 포함하고 있다는 것입니다.

프로토콜/호스트/경로 이름/검색 등에 액세스하십시오!

// JavaScript can access the current URL in parts. For this URL:
`https://thatsanegg.com/example/index.html?s=article`

window.location.protocol == `https:`
window.location.host == `thatsanegg.com`
window.location.pathname == `/example/index.html`
window.location.search == `?s=article`

그게 다야!

읽어 주셔서 감사합니다. 얼마나 배웠는지 살펴보세요 😄

이 문서는 원래 "That's an Egg"에 작성되었습니다.