Home IT/WEB 객체 내부에 객체를 삽입하는 방법 _.set()

[lodash] 객체 내부에 객체를 삽입하는 방법 _.set()

set 메소드는 객체의 속성에 값을 할당하는 기능을 수행합니다. 이 메소드를 사용하면 객체 내에 존재하지 않는 속성도 자동으로 생성하고 값을 할당할 수 있습니다. 또한, 객체의 중첩된 속성도 점 또는 배열 인덱스를 사용하여 쉽게 접근할 수 있습니다. set 메소드에 대해서 알아보겠습니다.

set 메소드의 구문

inline ad
_.set(object, path, value)
  • object: 값을 할당할 대상 객체입니다.
  • path: 값을 할당할 속성의 경로입니다. 문자열 또는 배열 형태로 지정할 수 있습니다.
  • value: 할당할 값입니다.

set 메소드의 동작 방식

set 메소드는 object 객체 내의 path 경로에 value 값을 할당하는 역할을 합니다. path 경로는 문자열 또는 배열로 지정할 수 있으며, 여러 단계의 중첩된 속성에도 접근할 수 있습니다.

// 대상 객체
const person = {
  name: 'Lee',
  age: 18,
  address: {
    city: 'Seoul',
    postCode: '10001'
  }
};

// `set` 메소드를 사용하여 값을 할당
_.set(person, 'name', 'Kim');
_.set(person, 'address.city', 'Busan');
_.set(person, ['address', 'postCode'], '90001');
_.set(person, 'hobbies[0]', 'Reading');

console.log(person);
/*
출력 결과:
{
  name: 'Kim',
  age: 18,
  address: {
    city: 'Busan',
    postCode: '90001'
  },
  hobbies: ['Reading']
}
*/

객체 내에 객체를 삽입하는 예제

set 메소드를 사용하면 간편하게 객체 내에 객체를 삽입할 수 있습니다.

// 대상 객체
const person = {
  name: 'Lee',
  age: 18,
};

// 중첩된 객체를 삽입할 경로
const path = 'address';

// 삽입할 중첩된 객체
const address = {
  city: 'Seoul',
  postCode: '10001',
};

// set 메소드를 사용하여 중첩된 객체를 삽입
_.set(person, path, address);

console.log(person);
/*
출력 결과:
{
  name: 'Lee',
  age: 18,
  address: {
    city: 'Seoul',
    postCode: '10001',
  }
}
*/

Lodash의 set 메소드는 객체의 속성에 값을 할당하고, 중첩된 속성에도 간편하게 접근할 수 있는 유용한 메소드입니다. set 메소드를 사용하여 객체를 쉽게 조작하고 관리할 수 있으며, 존재하지 않는 속성도 자동으로 생성되므로 편리하게 활용할 수 있습니다.

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 속성이...