JavaScript 메소드:Object.assign()

JavaScript에는 이러한 개체를 조작하는 데 사용할 수 있는 모든 종류의 메서드가 있는 Object 클래스가 있습니다. 이 기사에서는 Object.assign() 메서드를 살펴보고 어떻게 사용되는지 보여드리겠습니다.

약간의 배경

다시 말하지만 객체는 Python의 사전과 유사한 JavaScript의 데이터 유형이며 키:값 쌍이라고 하는 것을 포함합니다. 물체가 있다고 가정하고 Harry라고 합시다. 다음과 같은 키:값 쌍이 있을 수 있습니다.

let Harry = {
 	firstName: 'Harry',
 	lastName: 'Potter',
 	age: 11,
 	house: 'Gryffindor',
 	pet: {
   	  name: 'Hedwig',
        animal: 'owl'
 	}
};

이 상황에서 테마의 기본 규칙은 콜론 왼쪽에 있는 속성 이름이 키이고 오른쪽에 있는 항목이 값이라는 것입니다. 대부분의 키와 값은 매우 간단합니다. 약간 애매할 수 있는 유일한 것은 가장 마지막 속성인 pet입니다. 이 경우에는 여전히 애완 동물이 핵심입니다. 그러나 값은 두 개의 키:값 쌍이 더 있는 개체입니다. 이것이 우리가 중첩 개체라고 부르는 것입니다.

Object.assign(대상, …sourceObjs);

assign()이라는 Object 메서드가 있습니다. 하나 이상의 소스 개체를 가져와 대상 개체에 복사하는 데 사용할 수 있습니다. 코드로 바로 이동하여 코드가 수행하는 작업을 살펴보겠습니다.

let hpChar = {
 firstName: 'Harry',
 lastName: 'Potter',
 age: 11,
 house: 'Gryffindor',
 pet: {
   name: 'Hedwig',
   animal: 'owl'
 }
}
 
Object.assign({}, hpChar);
console.log(hpChar, '\n');
Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);
 
console.log(hpChar)

코드를 함께 살펴보겠습니다. hpChar라는 객체 리터럴로 시작합니다. 이 hpChar에는 firstName, lastName, age, house 및 pet 속성이 있습니다. 그 애완 동물 속성은 개체 자체이며 자체 키와 값이 있습니다.

다음으로 여기에서 이야기할 메서드의 첫 번째 인스턴스가 있습니다. Object.assign은 두 개 이상의 매개변수를 사용합니다. 첫 번째는 항상입니다. 값을 할당하려는 대상 개체입니다. 이 경우에는 빈 개체입니다.

두 번째 매개변수는 위에서 정의한 객체입니다. 이것은 대상 개체(첫 번째 매개변수)에 할당하기 위해 가져갈 소스 자료입니다.

다음 줄은 결과를 콘솔에 기록합니다.

참가자의 81%는 부트캠프에 참석한 후 기술 직업 전망에 대해 더 자신감을 느꼈다고 말했습니다. 지금 부트캠프에 참여하십시오.

부트캠프 졸업생은 부트캠프 시작부터 첫 직장을 찾는 데까지 6개월도 채 걸리지 않았습니다.

{ firstName: 'Harry',
  lastName: 'Potter',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Hedwig', animal: 'owl' } }

크게 다르지 않죠? 빈 개체에 hpChar를 할당했기 때문입니다. 기본적으로 개체를 복제했습니다. 만약 우리가 그것을 다시 하되 일부 값을 변경한다면 어떻게 될까요? 이번에는 빈 개체 대신 hpChar 개체로 교체해 보겠습니다. 이번에는 이것이 우리의 목표가 될 것입니다. 두 번째 매개변수의 일부 값을 변경해 보겠습니다. 키를 동일하게 유지하는 한 값을 자유롭게 사용하십시오.

다음은 내가 바꿀 값입니다. 대상 개체의 값을 변경할 필요가 없으면 소스 개체에서 해당 값을 명시적으로 호출할 필요가 없습니다.

Object.assign(hpChar, {
 	firstName: 'Hermione',
 	lastName: 'Grainger',
 	pet: {
   		name: 'Crookshanks',
   		animal: 'cat'
 	}
}
 
);

두 번째로 결과를 콘솔에 기록했을 때 대상 개체를 반환하여 속성을 새 값으로 덮어씁니다. 이제 콘솔은 다음과 같습니다.

{ firstName: 'Hermione',
  lastName: 'Grainger',
  age: 11,
  house: 'Gryffindor',
  pet: { name: 'Crookshanks', animal: 'cat' } }

동일한 속성을 가진 두 개체를 병합하는 방법은 다음과 같습니다. 이제 다른 속성을 가진 세 개의 객체를 병합한다면 어떻게 될까요? 어떤 일이 일어날 것으로 예상하십니까?

var obj1 = {
 foo: 1
}
 
var obj2 = {
 bar: 2
}
 
var obj3 = {
 baz: 3
}
 
Object.assign(obj1, obj2, obj3)
 
console.log(obj1);

Obj1은 대상 obj입니다. Obj2 및 obj3은 소스 개체입니다. 그것들은 우리의 대상 객체에 병합될 것입니다. 속성이 겹치지 않기 때문에 모든 속성은 해당 값과 함께 obj1에 병합됩니다.

{ foo: 1, bar: 2, baz: 3 }

당신은 그것을 가지고 있습니다! Object.assign()의 작업 구현. 여기에서 개념을 이해하면 JavaScript 프레임워크를 배우는 데 한 걸음 더 다가간 것입니다!

더 많은 정보를 원하십니까?

이 튜토리얼을 살펴보고 학습을 더 발전시키십시오...

JavaScript Object.keys()

JavaScript Let

자바스크립트 유형

JavaScript 문자열 포함:단계별 가이드

자바스크립트 변수