객체 속성의 추가, 수정, 삭제

객체는 다양한 데이터 값들을 모아서 저장한 컨테이너입니다.

다양한 데이터 타입과 많은 데이터를 담는 만큼, 빠르게 객체의 속성값을 얻거나, 객체 속성을 제어할 수 있는 메서드들을 제공합니다.

객체 속성값 얻기

모든 객체 데이터는 속성을 통해 얻습니다.

객체명.속성

객체명.속성[인덱스].속성

객체명.속성.속성.속성

과 같이 체인 연결로 최종 속성값, 또는 또 다른 객체를 얻게 됩니다.

중첩 객체인 경우 속성값으로 객체가 올 수 있으며, 해당 속성으로 접근시 객체가 반환됩니다.

속성값이 배열일 경우 배열 객체가 반환되며, 배열 길이 및 배열 요소에 속성 체인으로 바로 접근이 가능합니다.

let friends = {original: [{name: "라이언" ,age: 5}, {name: "어피치" ,age: 4}], newbee: {name: '네온', age: 3}};
console.log(friends.original[0]);console.log(friends.original[1].age);console.log(friends.original.length);console.log(friends.newbee);console.log(friends.newbee.name);

객체 속성 추가

객체 속성 추가는 2가지 방법으로 가능합니다.

객체 속성을 읽는 속성 체인에 값을 지정하거나, 배열 인덱스 형태로 값을 지정할 수 있습니다.

객체["속성"] = 속성값;

객체.속성 = 속성값;

속성값은 객체, 배열, 문자열, 숫자, 불리언, null 등이 가능합니다.

하위 객체에 속성을 추가하려면

객체.객체.객체.속성 = 속성값;

객체.객체["속성"] = 속성값;

방식으로 추가할 수 있습니다.

객체 속성값 변경

속성 추가와 같은 방법으로 속성을 수정합니다.

기존 속성이 있으면 변경하고, 속성이 없으면 추가하는 구조입니다.

객체["속성"] = 새속성값;

객체 속성 삭제

객체 속성 삭제는 조금 독특한 방법을 사용합니다.

별도로 delete 연산자가 있으며

delete 객체.속성;

과 같은 방식으로 삭제합니다.

delete 연산자는 삭제후 true/false 반환값을 반환합니다. 삭제에 성공하면 true, 실패하면 false를 반환합니다. 삭제시 조건문 체크를 이용해 삭제 성공 여부에 따른 추가 처리를 할 수 있습니다.

let friends = {brand: "카카오", original: [{name: "라이언" ,age: 5}, {name: "어피치" ,age: 4}], newbee: {name: '네온', age: 3}};
//속성값 얻기console.log(friends.original[0]);console.log(friends.original[1].age);console.log(friends.original.length);console.log(friends.newbee.name);
//속성 추가friends.newbee['sex'] = 'female';//객체 배열로 변환friends["newbee"] = [friends["newbee"], {name:"콘", age:2}];console.log(friends.newbee);
//속성 수정friends.newbee[0]['sex'] = 'male'; //배열 안의 속성에 접근friends.newbee.sex = 'unknown'; // 적용 안됨console.log(friends.newbee);
//속성 삭제delete friends.newbee[0].sex;friends.newbee.pop();delete friends.brand;console.log(friends);

!주의할 점

delete 연산자는 객체의 속성, 또는 배열 요소를 삭제할 수 있습니다.

객체 속성값이 배열인 경우 배열 요소를 삭제할 수도 있습니다.

단, delete 연산자로 배열 요소를 삭제할 경우, 배열의 pop(), shift(), splice() 메서드로 삭제하는 것과 달리 배열의 갯수가 변하지 않습니다.

delete 연산자로 배열 요소를 삭제한 후, 배열을 콘솔에 찍어보면 해당 위치는 undefined로 표시됩니다.

그러나, 순환 메서드로 배열을 순환해서 출력하면 해당 위치의 배열 요소는 존재하지 않습니다.

배열 요소의 참조 주소만 남고 실제 배열 요소는 삭제된 것입니다. 

혼동하지 않도록 주의해야 합니다.

이것은 배열 요소에 undefined를 지정하는 것과는 다릅니다.

배열[배열인덱스] = undefined;

는 배열 길이도 유지되고, 배열 요소에 undefined 원시형 데이터 타입을 지정한 것입니다.

순환 메서드로 순환하면 해당 배열 요소에 undefined 가 있는 것으로 출력 됩니다.

배열 내장 메서드를 이용한 배열 요소 삭제, delete 연산자를 이용한 배열 요소 삭제, 배열 요소에 undefined 를 적용하는 것은 배열의 길이, 배열 요소의 존재 여부가 모두 다릅니다.

사용할 때 개념을 분명히 알고 사용해야 하며, 배열에는 delete 연산자를 사용하는 것은 혼동을 일으킬 수 있다는 점을 꼭 알아두어야 합니다.

var trees = ['라이언', '프로도', '어피치', '콘', '무지'];
delete trees[3];console.log(trees.length); // 5출력console.log(trees);trees.forEach(function(item){  console.log(item); // "라이언", "프로도", "어피치", "무지" 4개 출력});
trees[2] = undefined;console.log(trees.length); // 5 출력console.log(trees);trees.forEach(function(item){  console.log(item); // "라이언", "프로도", undefined, "무지" 4개 출력});