알아두면 유용한 8가지 자바스크립트 팁

안녕하세요! 저는 Javascript를 실무에서 거의 4년 이상 사용하고있는 개발자 노바 입니다!
업무를 진행하면서 유용한 팁들을 개인적으로만 정리하고 있었는데, 이런 좋은 사이트를 알게되어 더더욱 성장하길 바라는 마음에 공유해봅니다!

1. 얕은 복사와 깊은 복사를 구분하기

const person = [{ name: 'Yoon' }, { age: 31 }]
const shallowCopy = [...person]
const deepCopy = structuredClone(person)
shallowCopy[0].name = 'Kim'
console.log(person[0].name) // 'Kim'
deepCopy[0].name = 'Kwon'
console.log(person[0].name) // 'Kim'

얕은복사의 경우 복사본의 Object Value를 변경하면 원본까지 변경되어 버립니다. 깊은복사를 이용하면 복사본의 값만 변경 할 수 있습니다.

2. 배열과 객체의 순환 방법

/* Array */
const arr = [1, 2, 3, 4, 5]

for (const element of arr) {
  console.log(element) // 1, 2, 3, 4, 5
}
/* Object */
const obj = { a: 1, b: 2, c: 3 }

for (const key in obj) {
  console.log(obj[key]) // 1, 2, 3
}

for in으로 object를 순환 할 수 있고, for of로 배열 순환을 축약 할 수 있습니다.

3. 값이 있는지 간단하게 체크하기

const auth = { user: '' }
console.log(!!auth.user) // false

!! 연산자로 객체에 값이 존재하는지 유/무를 쉽게 체크 할 수 있습니다.

4. 비슷한 값을 가진 배열을 비교하여 값 추출하기

// 단순배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [1, 2]
const b = [3, 4, 1]const diff = b.filter(v => !a.find(v2 => v === v2)) // [3, 4]
const not = a.filter(v => !b.find(v2 => v === v2)) // [2]
// 객체배열 (긴 배열을 filter 앞에, 짧은 배열을 find 앞에)
const a = [{name: 'Y', age: 20}, {name: 'D', age: 19}]
const b = [{name: 'Y', age: 20}, {name: 'M', age: 20}, {name: 'D', age: 19}]
const diff = b.filter(v => !a.find(v2 => JSON.stringify(v) === JSON.stringify(v2))) // { name: 'M', age: 20 }

비슷한 배열간의 다른값만 추출해야 하는 경우가 종종 생길때 사용 할 수있습니다.

5. 파일 데이터를 쉽게 처리하기

Promise.all[...event.target.files].map(file => files.push(file)))

file 태그에서 파일을 여러개 선택하거나, 단일로만 선택 할 경우, 파일 객체 자체를 form-data로 넘기는 경우가 많습니다. 이럴때 두가지 케이스 모두 대응하기에 좋습니다.

6. 랜덤한 6자리 난수 쉽게 생성하기

Math.floor(100000 + Math.random() * 900000)

6자리의 난수를 생성해야 할 때(주로 인증번호) 사용하면 좋습니다.

7. UUID 쉽게 생성하기

// Browser
self.crypto.randomUUID()
// Node.js >= 19.0
import Crypto from "crypto"
Crypto.randomUUID()

예전엔 uuid 생성을 위해 특정 라이브러리 설치가 필요했었지만, 이제는 간단하게 생성이 가능합니다.

8. 배열 중복제거하기

// 단순배열 중복제거
const arr = [2, 2]
const arr2 = [...new Set(arr)]

// 객체배열 중복제거
const example = [{ id: 123 }, { id: 456 }, { id: 123 }]
example.filter(
(arr, index, callback) => index === callback.findIndex(t => t.id === arr.id)
)

배열안의 중복된 값을 간단하게 제거 할 수 있습니다.