Home IT/WEB 객체에서 원하는 키들만 선택하여 새로운 객체 만드는 방법, _.pick()

[lodash] 객체에서 원하는 키들만 선택하여 새로운 객체 만드는 방법, _.pick()

lodash는 JavaScript 유틸리티 라이브러리로, 객체와 배열을 다루는 다양한 메소드를 제공합니다. _.pick 메소드는 객체에서 지정된 키(key)들만을 선택하여 새로운 객체를 생성하는 기능을 수행합니다. 이는 원본 객체에서 원하는 속성만을 가져와서 새로운 객체를 만드는데 유용하게 사용됩니다.

작동 방식

inline ad

pick 메소드는 원본 객체에서 지정된 키들만 선택하여 새로운 객체를 생성됩니다. 선택된 속성들은 새로운 객체의 속성으로 복사됩니다. paths 에 포함된 키만 선택하게 됩니다. 원본 객체에 paths에 포함된 키가 없으면 무시돼요.

_.pick(object, [paths])

lodash _.pick 사용예제

pick 메소드는 원본 객체에서 특정 속성들만을 선택하여 새로운 객체를 생성하는 기능을 제공합니다. 선택하고자 하는 속성의 이름은 paths 매개변수를 통해 배열로 전달합니다. 원본 객체에 해당 키들이 존재하지 않는 경우에는 무시되고, 새로운 객체에도 해당 키들은 존재하지 않습니다.

const user = {
  id: 2023,
  name: 'Lee',
  age: 18,
  email: 'markettraders@gmail.com'
};

// 'name'과 'age' 속성만을 선택하여 새로운 객체 생성
const selectedUser = _.pick(user, ['name', 'age']);

console.log(selectedUser); // { name: 'Lee', age: 19 }

자바스크립트 reduce 사용예제

selectedKeys 배열에 선택하고자 하는 속성의 키들을 담아두고, reduce 메소드를 사용하여 원본 user 객체를 순회합니다. 각 속성의 키가 selectedKeys 배열에 포함되어 있다면, 해당 키와 값을 새로운 빈 객체({})에 추가합니다. 결과적으로 selectedUser 객체는 원하는 속성만을 가진 새로운 객체가 됩니다.

hasOwnProperty 메소드는 JavaScript의 내장 메소드로 객체가 특정 속성을 직접 가지고 있는지 확인하는 역할을 합니다. 이 메소드는 해당 객체의 프로토타입 체인을 따라가지 않고, 오직 객체 자체의 속성만을 확인합니다.

이 방법은 lodash를 사용하지 않고도 원하는 속성을 선택하여 새로운 객체를 생성할 수 있습니다. reduce 메소드를 사용하면 간단하고 자바스크립트 내장 함수만으로도 객체를 재구성할 수 있습니다.

const user = {
  id: 2023,
  name: 'Lee',
  age: 18,
  email: 'markettraders@gmail.com'
};

const selectedKeys = ['name', 'age'];

const selectedUser = selectedKeys.reduce((acc, key) => {
  if (user.hasOwnProperty(key)) {
    acc[key] = user[key];
  }
  return acc;
}, {});

console.log(selectedUser); // { name: 'Lee', age: 18 }

RECENT POSTS

[javscript]API 응답에서 키 값들을 검증하는 방법

API 응답에서 다수의 키 값들을 검증할 때 코드의 중복을 줄이는 것은 유지보수성을 향상시키고, 가독성을 높이는 데 중요합니다. 이를 위해 몇 가지 접근 방법을 사용할...

[javscript]특정 키를 제외하고 두 객체를 비교하는 방법

특정 키를 제외하고 두 객체를 비교하는 작업은 데이터의 동등성을 평가하고 싶을 때 유용합니다. Lodash 라이브러리를 통해서 처리할 수 있는 방법에 대해서 살펴보겠습니다. Lodash를 사용한 특정...

[javscript]배열을 특정 키의 값에 따라 정렬하는 방법, _.orderBy

Lodash의 _.orderBy 메소드를 사용하면 배열을 특정 키의 값에 따라 정렬할 수 있습니다. 이 메소드는 배열의 각 항목을 정렬할 기준이 되는 하나 이상의 속성 이름과...

[css]autoprefixer: end value has mixed support, consider using flex-end instead warning 처리 및 다양한 에러 메시지 의미

이 경고 메시지는 CSS를 처리하는 도구인 Autoprefixer가 justify-content: end; 속성값을 처리하려 할 때 발생합니다. Autoprefixer는 CSS에 벤더 접두사를 자동으로 추가해 주는 도구로, 다양한 브라우저에서 CSS 속성이...