[lodash] get 메소드 알아보기

오늘은 lodash의 get() 메소드에 대하여 자세히 알아봅니다.

# Lodash get() 메소드

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

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

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

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

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

! lodash get() 메소드 예제보기

몇 가지 예제를 만들어봅니다. 아래의 객체 myObj는 여러 개의 값을 가지고 있는데요 ~ get()을 사용해 다양한 값을 얻기 위해 사용해보고 그 결과가 어떻게 다른지도 확인해보려고 합니다.

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

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

만약 객체 값으로 객체를 가지는 하위 뎁스의 값을 얻기 위해서는 아래와 같이 . 기호를 사용하여 얻을 수  있습니다.

위 예제는 .(dot) 기호를 사용하였는데 이는 아래처럼 배열로 변경해 사용이 가능합니다. 아래 코드는 동일하게 작동합니다.


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

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


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

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

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

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


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

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


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