javaScript의 기초 #6 - 객체

1. 객체의 특징

JavaScript의 자료는 기본자료형(primitives)와 객체 자료형(object) 두 가지로 나눌 수 있다.

 

JavaScript에서는 기본 자료형이 객체 자료형이 될 수도 있다.

console.log(1===1);		//	true
console.log([] === []);		//	false
console.log({} === {});		//	false

let a = {price: 10000};
let b = {price: 10000};

console.log(a===b);		//	false

배열과 객체의 경우, 생긴게 같아도, 심지어 둘 다 비어있다고 해도 저 둘은 다른 공간을 의미한다.

 

그러나 다른 객체들 안에 있는 요소의 key와 value가 같다면 그 키는 같다.

1.1 this 를 이용한 자신의 요소 출력

this는 다양한 의미와 용도가 있지만 여기서는 객체에서

 

자신의 요소를 출력할 때 사용한다는 것을 우선 알아둬야 한다.

const obj1 = {
	name: 'lsj',
        age: 29,
        infor: function () {
        console.log('나는'+this.name+'입니다.');	 //  this를 사용해 자신의 요소 name 출력
        }
     }

        obj1.infor()	//	나는lsj 입니다.

 

1.2 객체에 요소를 추가/제거하는 메소드

객체에 요소를 추가하거나 제거하기 위한 방법이 있다.

 

1.2.1 객체에 요소 추가

우선 객체를 선언하고, 추가할 속성과 값을 다음과 같이 추가해준다.

const 객체이름 = {};
객체이름.속성 = '값'

const infor = {}
student.name = 'lsj';
student.age = '29';

console.log(infor)	//	추가한 속성과 그 값들이 나온다.

 

1.2.1 객체에서 요소 삭제

delete 키워드를 사용한다.

delete 객체이름.속성이름

delete infor.age //
console.log(infor)	//	age 관련 정보가 제거된 후 출력된다.

 

2. 객체의 복사 (깊은 복사 vs 얕은 복사)

배열과 객체는 할당할 때 얕은 복사(swallow copy)가 이루어진다.

복사했을 때 다른 이름이 붙을 뿐인 것을 얕은 복사(참조 복사)라고 한다.

예를 들어,

const arr1 = ['aa', 'bb'];
const arr2 = obj1;
obj2.push('cc');
obj2.push('dd');

console.log(obj1);
console.log(obj2);	//	어떤 것을 출력해도 같은 값이 나오는 것을 알 수 있다.

당연히 얕은 복사의 반대말은 깊은 복사(deep copy)이다.

이 경우, 복사한 배열은 원본 배열과 독립적으로 작동한다.

깊은 복사를 위해서는 전개 연산자를 사용하면 된다.

[...배열]

예를 들어,

const arr1 = ['aa', 'bb']
const arr2 = [...arr1];		//	전개 연산자를 활용한 깊은 복사 실행
arr2.push('cc');
arr2.push('dd');

console.log(arr1);
console.log(arr2);		//	arr2에만 추가한 요소들이 나타난다.

객체의 특성 중 하나는 const로 선언했더라도 그 후 데이터를 추가할 수 있다는 점이 있다.

틀만 변경되지 않으면 어떤 값이 들어가도 무관하다.

전개 연산자를 이용하면, 객체의 안에 다른 객체나 배열의 값을 바로 추가하는 것도 가능하다.

const block1 = {
		aa : 'bb',
        	cc : 'dd',
            	ee : 'ff'
                }

const block2 = [
		{gg : 'hh'},
        	{ii : 'jj',
            	kk : 'll'}
            	]

const blocks = {
	       block1: {...block1},
               block2: [...block2]
              }

console.log(blocks);

 

3. 비슷한 객체 여러개를 간단히 만들기

이를 위해서는 this와 new 키워드에 대해 알아야한다.

 

3.1 new

new 키워드는 새로운 객체를 사용할때 사용되는 연산자이다. 이를 this와 잘 조합해

사용하면, 여러 개의 객체, 특히 key값이 같고 value값이 다른 한 세트의 객체를 쉽게 만들 수 있다.

function block1 (name, number) {
	this.name = name;
    	this.age = 29;
    	this.number = number;
        this.address = 'Seoul';
        }

let a1 = new block1 ('abc', 1);		//	이름과 번호만 다른 한 세트의 객체 생성
let a2 = new block1 ('def', 2);
let a3 = new block1 ('ghi', 3);		//	new 를 이용, 새로운 객체 생성	

console.log(a1);
console.log(a2);
console.log(a3);