HOME > lodash

[lodash] get 메소드 알아보기

Last Modified : 2022-11-20 / Created : 2022-11-20
64
View Count
오늘은 lodash의 get() 메소드에 대하여 자세히 알아봅니다.



# Lodash get() 메소드
get()은 객체에 사용하는 메소드로 객체가 가진 프로퍼티의 값을 구할 때 사용할 수 있습니다. 물론 프로퍼티의 값을 get()을 사용하지 않아도 얻을 수 있지만 get()을 사용하면 더 쉽고 편하게 얻을 수 있는데 특히 내부의 깊은 뎁스 구조를 가진 경우의 값을 얻을 때 매우 유용합니다. 먼저 간단한 문법입니다.

_.lodash(대상 객체, 찾을 경로, 기본값)

각각 다음을 위해 사용됩니다.

대상 객체 : 타겟이 되는 객체
찾을 경로 <Array | String > : 값을 얻기 위해서 사용될 경로 값
기본값(Option) : 찾는 값이 없는 경우 기본으로 반환 할 값(Default value)

사용 방법은 간단한데요 ~ 객체와 찾을 경로의 값만 입력하면 됩니다. 아래에서 간단한 예제를 만들어 쉽게 알아봅니다.


! lodash get() 메소드 예제보기
몇 가지 예제를 만들어봅니다. 아래의 객체 myObj는 여러 개의 값을 가지고 있는데요 ~ get()을 사용해 다양한 값을 얻기 위해 사용해보고 그 결과가 어떻게 다른지도 확인해보려고 합니다.
const myObj = {
  no: 1,
  name: 'Webisfree',
  url: 'webisfree.com',
  depth1: {
    depth2: {
      depth3: {
        num: 3
      }
    }
  }
}

이제 객체 myObj의 값을 얻기 위해 아래와 같이 get()을 사용해 보았습니다.
_.get(myObj, 'no')
_.get(myObj, 'name')
_.get(myObj, 'url')

// Result
1
'Webisfree'
'webisfree.com'

실행 결과 원하는 객체의 값을 비교적 쉽게 얻을 수 있었습니다.

만약 객체 값으로 객체를 가지는 하위 뎁스의 값을 얻기 위해서는 아래와 같이 . 기호를 사용하여 얻을 수  있습니다.
_.get(myObj, 'depth1.depth2.depth3.num')

// Result
3

위 예제는 .(dot) 기호를 사용하였는데 이는 아래처럼 배열로 변경해 사용이 가능합니다. 아래 코드는 동일하게 작동합니다.
_.get(myObj, ['depth1', 'depth2', 'depth3', 'num'])

// Result
3


@ 만약 프로퍼티가 없는 경우
객체의 값을 얻기 위해 사용했으나 실제로 프로퍼티가 없는 경우라면 어떻게 될까요? 코드를 조금 변경하여 없는 값을 찾을 경우 undefined를 반환하게 됩니다.
_.get(myObj, 'depth2')
_.get(myObj, 'depth1.depth3')
_.get(myObj, 'depth1.depth2.depth4.num')

// Result
undefined
undefined
undefined

여기에 세 번째 인자인 기본값(Default)을 사용할 수 있습니다. 만약 값이 없는 경우 0을 반환하게 하려면? 아래와 같이 변경할 수 있겠죠.
_.get(myObj, 'depth2', 0)
_.get(myObj, 'depth1.depth3', 0)
_.get(myObj, 'depth1.depth2.depth4.num', 0)

// Result
0
0
0


@ 순수 자바스크립트를 사용하는 방법과 차이점은?
만약 순수 자바스크립트를 사용하는 경우라면 undefined가 아닌 에러가 발생할 수도 있습니다. 예를들어 아래의 경우 undefined가 아닌 에러가 발생합니다.
console.log(myObj.depth1.depth2.depth4.num)

// 에러 발생
VM2217:1 Uncaught TypeError: Cannot read properties of undefined (reading 'num') at <anonymous>:1:28

콘솔에 출력해보니 에러가 발생합니다. 원인은 depth4라는 프로퍼티가 depth2 안에 존재하지 않는데 num 프로퍼티를 찾아 접근하려고 하기 때문입니다.

이처럼 에러가 발생하는 것과 undefined를 반환하는 것은 매우 큰 차이가 있습니다. 일반적으로 에러를 피하기 위해서 아래처럼 If문을 반복해 사용하기도 합니다.
if (myObj.depth1) {
  if (myObj.depth2) {
    if (myObj.depth4) {
      if (myObj.num) {
        ...

위와 같이 사용할 수도 있지만 한 눈에 알아보기 어렵고 코드가 매우 복잡합니다. 이런 경우 get()을 사용하는 것이 최선의 방법이겠죠.


[참고] ES 2020의 Optional Chaining을 사용하는 방법
최신의 ES 문법인 Optional Chaining을 사용하여 객체 프로퍼티에 접근할 수 있습니다. 이 방법의 장점은 프로퍼티가 존재하지 않는 경우 에러 없이 undefined를 반환하기 때문입니다. 아래 예제를 봐주세요. 위 코드를 다음과 같이 변경해 사용하였습니다. 결과는 에러없이 undefined를 반환합니다.
console.log(myObj.depth1?.depth2?.depth4?.num)

// Result
undefined

이와같이 Optional Chaining을 사용하면 매우 간결한 코드를 라이브러리없이 작성할 수 있어 유용합니다.


여기까지 lodash get()에 대하여 알아봤습니다.
Author ByEnSSo

이전 글 보기

Post thumbnail [lodash] compact 메소드 알아보기