알아두면 유용한 11가지 Modern JavaScript Tips

11 Useful Modern JavaScript Tips

미디움에서 자바스크립트 관련 아티클중 참고하기에 좋은 글을 소개하려고 한다
알고있는 팁들도 있었지만 모르고 있는 것들도 많이 있었고 실제 개발에도 적용가능할 만큼 유용한 팁들이 있다.

조건부로 객체에 속성 추가하기

const isValid = false
const age = 18

const person = {
  id: 'hi',
  name: 'Minki',
  ...(isValid && { isActive: true }),
  ...((age >= 18 || isValid) && {cart: 0})
}

console.log('person', person)

객체에 속성을 추가할 때 특정 조건에 따라 속성을 추가하거나 하지 않아야할 경우가 있다. 그럴 경우 if문을 사용해서 외부에서 조건을 사용할 수 있는데 객체 내부에서 조건에 따라 속성을 추가시킬 수 있기 때문에 유용하게 사용할 수 있다. 콘솔로 확인되는 결과는 isValid=false 이기 때문에 isActive:true 속성은 추가되지 않는다 isValid=false 이지만 age가 18이상이기 때문에 cart:0 속성은 추가된다.

객체에 속성이 존재하는지 확인하기

in을 사용하면 객체에 특정 속성이 존재하는지 true/false로 확인할 수 있다.

const person = {
  id: 'hi',
  name: 'Minki',
}

console.log('name' in person) // true
console.log('isActive' in person) // false

동적 key를 사용한 객체 구조 분해

const productData = { id: '23', name: 'Laptop' }
const { name: deviceName } = productData

console.log('deviceName', deviceName);

const extractKey = 'name'
const { [extractKey]: data } = productData;

console.log('data', data);

일반적으로 구조 분해 할당을 하게 되면 객체의 프로퍼티와 동일한 이름의 변수로 받아올 수 있지만 :를 사용해서 별칭으로 얻어올 수 있다. 또한 동적으로 객체의 속성을 받아올 수도 있다.

객체를 반복해서 원하는 key, value 얻어오기

Object.entries를 활용하면 객체의 모든 프로퍼티 key와 value를 얻어올 수 있다. 이때 만약 id와 name 프로퍼티의 key value를 얻어오고 싶다면 반복문을 사용하면 된다.

const data = { id: 1, name: 'Laptop', isSale: true }

Object.entries(data).forEach(([key, value])=>{
	if(['id', 'name'].includes(key)) {
      console.log('key: ',key, 'value: ',value);
    }     
})

forEach를 통해 Object.entries에 대해 반복을 실행한다. key를 사용해서 ['id', 'name'] 배열에 key값이 존재할 경우 key와 value를 출력한다.

optional Chaining을 사용해서 객체에 존재하지 않는 키에 접근할 때 오류 발생을 막는 방법

const data = { id: '21sase', isActive: true }

console.log('data', data.name);

console.log('data', data?.name);
            
console.log('data', data?.name?.user)

console.log('data', data?.nameDisplay?.())

Optional_chaining(MDN)

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish (en-US) (null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다.

data객체에 존재하지 않는 name 프로퍼티에 접근하면 에러가 발생한다. 하지만 Optional Chaining을 사용하면 프로퍼티가 존재한다면 그 값을 가져오고 만약 존재하지 않는다면 에러를 발생시키지 않고 undefinded를 리턴한다. 따라서 에러 없이 체크할 수 있는 기능이다. 또한 객체 내부에있는 객체의 프로퍼티에 접근하는 것도 가능하다.

배열에서 falsy 값 제외하기

const fruitList = ['apple', null, 'mango', undefined, '']

const filterFruitList = fruitList.filter(Boolean)

console.log(filterFruitList);

const isAnyFruit = fruitList.some(Boolean)

console.log(isAnyFruit);

filter(Boolean)을 보았을 때 true/false로 평가되는 값들만 필터링 한다는 뜻으로 생각했었는데, 실상은 null, undefined와 같은 falsy 값들을 필터링 한다는 뜻이었다. 결과적으로 falsy 값들을 제외한 나머지 값들이 있는 배열만을 얻을 수 있다.
배열을 사용하다보면 가끔씩 undefined가 들어갈 때가 있다. 이때 제대로된 필터링을 하지 않으면 이상한 결과가 나오는 것은 당연하다. 따라서 배열에 undefined가 올 것 같으면 filter(Boolean)을 사용하는 것도 좋은 팁이 될것이라 생각한다.
Falsy(MDN)
JavaScript Tips: Using Array.filter(Boolean)

배열에서 중복 제거하기

const fruitList = ['apple', 'mango', 'apple', 'grapes']

const uniqFruitList = [...new Set(fruitList)]

console.log(uniqFruitList)

알고리즘 문제를 풀 때 Set을 사용해서 중복을 제거하는 코드를 많이 사용했었다. 하지만 spread 연산자를 사용해서 새롭게 배열을 만드는 방법은 모르고 있었다

const fruitList = ['apple', 'mango', 'apple', 'grapes']

const set = new Set(fruitList);

const newArry = set.map((item) => item));

이런 방법으로 만들었던거 같다.

배열 타입 확인하기

자바스크립트에서 배열은 객체다. 따라서 typeof를 사용해서 확인해보면 object가 출력된다. 하지만 배열인지 객체인지 확실하게 구분해야할 때가 있다.

const fruitList = ['apple', 'mango']

console.log(typeof fruitList) // object

console.log(Array.isArray(fruitList)) // true

Array.isArray를 사용한다면 이것이 배열인지 확실하게 구분할 수 있다

String -> Number, Number -> String 변환

일반적으로 String 값을 Number 타입으로 변경할 때 Number를 주로 사용했었다. 하지만 + 연산자를 사용해서 Number로 쉽게 변경할 수 있고 반대로 Number 또한 쉽게 String으로 변경할 수 있다.

const personNo = '1234567';

// String -> Number
console.log('personNo:', +personNo, 'typeof', typeof +personNo); 

const personId = 1234567;

// Number -> String
cosnole.log('personId:', personId + '', 'typeof', typeof (personId + ''))

nullish coalescing(??) 연산자

Nullish Coalescing Operator (MDN) - 널 병합 연산자
처음 본 신기한 연산자다 OR(||) 연산자와 헷갈리기도 하지만 ?? 연산자는 왼쪽 피 연산자가 null, undefined 일때만 오른쪽 피연산자를 반환하고 OR 연산자의 경우 null, undefined 뿐만 아니라 falsy 값에 해당할 경우에도 오른쪽 피연산자를 반환한다.

let data = undefined ?? 'noData' // noData

data = null ?? 'noData' // noData

data = '' ?? 'noData' // '' 은 falsy이지만 ??은 ''을 반환한다.

data = 0 ?? null ?? 'noData' // 0은 falsy이지만 ??은 0을 반환한다.

data ??= 'noData' // 0

또한 축약으로 표현 가능하다 마지막 코드이 경우 data = data ?? 'nodata'를 축약한 것으로 data의 값이 0으로 존재하기 때문에 0이 할당된다.

OR 연산자는 같은 코드에서 다음과 같은 결과를 반환한다.

let data = undefined || 'noData' // noData

data = null || 'noData' // noData

data = '' || 'noData' // ''은 falsy이기 때문에 noData

data = 0 || null || 'apple' // falsy falsy 이기 때문에 apple 반환

data ||= 'noData' // apple

!! 연산자를 사용해서 Boolean으로 변환

console.log('This is not Empty: ', !!'') // false
console.log('This is not Empty: ', !!'Data') // true

!!연산자를 사용하면 Boolean 타입으로 변환할 수 있다. 이 때도 falsy 값은 false가 되고 나머지는 true가 된다.

마무리

여기까지가 원문에서 가져온 11가지 팁들이다. 쉬운 내용들이기 때문에 쉽게 익할 수 있는 팁들이라 생각하고. 특히 falsy 값들에 대한 내용들이 많이 포함되어 있는데 그 부분에 대해서 확실하게 알아둬야 할 것 같다. 틈틈히 다시 읽어보러 와야겠다.