[JAVASCRIPT - ES6] 객체의 이해, 객체의 속성 추가, 변경, 삭제

웹에서 대부분의 데이터는 JSON, XML 로 표현되어 전송되며 다양한 타입의 데이터가 한꺼번에 넘어옵니다.

이런 데이터를 타입별로 구분하여 저장한다는것은 굉장히 비효율적이고 처리 지연 시간을 발생시킵니다.

 

객체는 이런 데이터들을 하나의 컨테이너에 담아 저장하고, 데이터에 접근할 수 있는 메서드, 속성을 제공합니다.

 

자바스크립트의 객체는 "key : value" 쌍으로 하나의 데이터를 표현합니다.

key와 value쌍을 중괄호({})로 감싸서 객체임을 표시합니다.

let friend = {name: '라이언'};

객체의 데이터는 "키를"속성으로 속성값을 얻어낼 수 있습니다.

let data = 객체.속성이름;

객체는 원시자료형 뿐만 아니라 객체나 배열을 함께 담을 수 있습니다.

let friends = {original: [{name: "라이언" ,age: 5}, {name: "어피치" ,age: 4}]};

friends.original[1].age ==4;  //true

 

 

객체 표기 방법

• key와 value 사이에는 공백을 하나 둔다.
• 객체 요소 쉼표 뒤에는 공백을 하나 둔다.
• 문자열 값의 표현은 쌍따옴표를 사용한다.

 

 

객체 속성의 추가, 변경, 삭제

객체 속성 추가

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

1. 객체["속성"] = 속성값;  : 배열 인덱스 형태로 값을 지정
2. 객체.속성 = 속성값;     :  객체 속성을 읽는 속성 체인에 값을 지정

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

 

객체 속성값 변경

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

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

 

객체 속성 삭제

별도로 delete연산자가 있습니다.

delete 객체.속성;

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

delete연산자는 삭제 후 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);