본문 바로가기

Javascript

[Javascript] Lodash 사용해서 값찾기

728x90
반응형

 lodash _.find() 알아보기
먼저 find()에 대하여 알아봅니다. find() 원하는 값을 배열 / 객체에서 쉽게 찾아 사용할 수 있습니다. 배열의 경우 비교적 간단하게 원하는 값을 찾을 수 있지만 객체의 경우는 어떤가요? 뭔가 일치하는 값을 찾으려면 변환에 변환을 거치고 어렵게 원하는 값을 구할 수 있습니다. 하지만 find()를 사용하면 여러 값을 가지는 데이터에 대하여 매우 간단하게 원하는 값을 찾는 것이 가능합니다. 먼저 아래는 문법입니다.

_.find(collection, [찾을 조건])
_.find(collection, {찾을 조건})


찾을 Collection 대상에서 찾을 조건을 넘겨줘야 하는데 객체 / 배열 모두 가능합니다. 그렇다면 아래에서 예제를 통하여 어떻게 사용하는지 알아보도록 하죠.



# lodash _.find() 예제보기
먼저 예제로 하나의 sites라는 변수에 collection을 임의로 만들어봅니다.

var sites = [
  { no: 1, name: 'web', type: 'a' },
  { no: 2, name: 'is', type: 'b' },
  { no: 3, name: 'free', type: 'c' }
];


만약 위 값에서 no가 2인 데이터의 값인 객체를 가져오려면 어떻게 할까요? lodash를 사용하지 않는다면 찾기 위해 여러 과정을 거쳐야하며 성능 이슈도 고려해야합니다. 하지만 lodash의 find()를 사용하면 매우 간단합니다. 아래를 봐주세요.

 _.find(sites, {'no': 2});


위 코드를 실행하면 우리가 찾는 no가 2인 객체를 반환하게 됩니다.

{no: 2, name: "is", type: "b"}



! 여러개의 값이 일치하여 배열로 받아야 하는 경우
만약 여러개가 일치하면 배열로 리턴되야합니다. 이때는 _.filter()를 사용해야 합니다.

var sites = [
  { no: 1, name: 'web', type: 'a' },
  { no: 2, name: 'is', type: 'b' },
  { no: 3, name: 'free', type: 'b' }
  { no: 4, name: 'com', type: 'c' }
];


 _.filter(sites, { type: 'b' });

{ no: 2, name: 'is', type: 'b' },
{ no: 3, name: 'free', type: 'b' }


! 복수 조건을 설정하여 찾는 방법이번에는 두 개 이상의 조건을 사용하여 객체를 찾아보겠습니다. no가 2이면서 동시에 type값이 b인 값을 찾는다면 아래와 같이 명령어를 입력합니다.

_.find(sites, {'no': 2, 'type': 'b'});


반환결과 예상대로 원하는 데이터를 찾아서 객체를 반환합니다.

{no: 2, name: "is", type: "b"}



! 배열 방식으로 찾는 방법
배열방식으로 찾는 것도 가능합니다. 만약 type 프로퍼티가 'c'인 값을 찾는다면 아래처럼 배열의 순서대로 'type'과 'c'를 입력합니다.

_.find(sites, ['type', 'c']);


이처럼 배열을 사용하여 원하는 값을 찾을 수 있습니다.


! 함수를 적용하는 방법
find()에도 찾을 조건에 함수를 적용할 수 있습니다. 만약 no가 2인 값을 찾는 경우 아래처럼 함수를 인자로 넘겨서 찾을 수 있죠.

_.find(sites, function(site) {
  return site.no === 2 }
);


이처럼 함수를 사용하면 더 복잡한 다양한 조건을 설정하는 것이 가능합니다.

728x90
반응형

'Javascript' 카테고리의 다른 글

[Javascript] Thymeleaf  (0) 2020.12.10
[Javascript] var, let, const 차이점  (0) 2020.07.29
[Javascript] 파일 업로드  (0) 2020.03.31
[Javascript] Input 값 실시간 감지  (0) 2020.02.03
[Javascript] 원하는 위치로 이동  (0) 2020.01.28