자바스크립트 JSON(또는 Map) 프로퍼티 추가 방법 총정리 ~ Dev.

자바스크립트에 프로퍼티 추가 기본 방법

JSON(또는 Map) 객체에 프로퍼티를 추가하는 가장 기본적인 방법은 객체에 직접 프로퍼티를 할당하는 것입니다. 이 방법은 아래와 같이 코드를 작성하여 사용할 수 있습니다.

var obj = {};
obj.propertyName = "value";
obj["propertyName"] = "value";

위의 두 번째와 세 번째 줄은 같은 작업을 수행합니다. 프로퍼티 이름이 유효한 자바스크립트 식별자인 경우에는 첫 번째 방법을 사용할 수 있습니다. 하지만 식별자로 사용할 수 없는 문자가 포함된 경우에는 두 번째 방법을 사용해야 합니다.

var obj = {};

//일반적인 식별자
obj.color = "red";

//숫자로 시작하는 경우 또는 공백이 포함된 경우
obj["1st_place"] = "Alice";
obj["Total score"] = 100;

위와 같은 방법으로 직접 프로퍼티를 추가하고 값을 설정할 수 있습니다. 이 방법은 간단하고 직관적이기 때문에 자주 사용됩니다.

자바스크립트에서는 Object.assign() 메소드를 이용하여 JSON(또는 Map) 객체에 여러 프로퍼티를 한 번에 추가할 수 있습니다. 이 메소드는 소스 객체의 프로퍼티를 타겟 객체로 병합하는 데 사용됩니다.

var targetObj = {
  name: "John Doe",
  age: 30
};

var sourceObj = {
  city: "Seoul",
  age: 31
};

Object.assign(targetObj, sourceObj);

Object.assign() 메소드를 사용하면, targetObj의 프로퍼티가 sourceObj의 프로퍼티로 병합되어 변경됩니다. 이 때, 원본 객체를 보존하려면 빈 객체를 생성하여 프로퍼티를 병합해야 합니다.

var newObj = Object.assign({}, targetObj, sourceObj);

위 코드는 targetObj와 sourceObj의 프로퍼티를 빈 객체에 병합하고, 그 결과를 새로운 객체인 newObj에 할당합니다. 이렇게 하면 원본 객체는 변경되지 않습니다.

스프레드 연산자(...)를 활용하면 JSON(또는 Map) 객체에 쉽게 프로퍼티를 추가할 수 있습니다. 스프레드 연산자는 주로 배열이나 객체의 프로퍼티를 펼쳐 하나의 새로운 객체에 합치거나 복사하는 데 사용됩니다.

var obj1 = {
  a: 1,
  b: 2
};

var obj2 = {
  b: 3,
  c: 4
};

var combinedObj = { ...obj1, ...obj2 };

위 코드는 obj1과 obj2 객체의 프로퍼티를 병합하여 새로운 combinedObj 객체를 생성합니다. 이 방법은 기존 객체를 변경하지 않고 새로운 객체에 프로퍼티를 추가하는 데 유용합니다.

자바스크립트에서 JSON(또는 Map) 객체에 프로퍼티를 추가하는 방법은 다양합니다. 본 글에서는 기본적인 방법, Object.assign() 메소드를 활용한 방법, 그리고 스프레드 연산자를 이용한 방법을 설명하였습니다.

기본적인 방법은 간단하고 직관적이지만, 한 번에 하나의 프로퍼티만 추가할 수 있습니다. 반면 Object.assign() 메소드와 스프레드 연산자는 여러 프로퍼티를 동시에 추가하거나 병합할 때 유용합니다.

따라서 프로젝트의 필요에 따라 적절한 방법을 선택하여 사용하면, JSON(또는 Map) 객체를 더 효율적으로 다룰 수 있습니다. 이러한 기법들을 숙지하고 활용하면 자바스크립트로 작업하는 데에 도움이 됩니다.