[Javascript] 자바스크립트 Object 기초

Object 기본 형태

const obj1 = {};	//object literal
const obj2 = new Object();	// object constructor

object는 키와 value의 집합체이다.

 

Object 사용법

// Object
const ellie = {name: 'ellie', age: 4};

// Function
function print(person) {
	console.log(person.name);
    console.log(person.age);
}

// 함수 출력
print(ellie);
console.log(ellie.name);
console.log(ellie.['name']);

 

자바스크립트는 동적으로 타입이 runtime때 결정될 수 있기 때문에 위에서 선언한 ellie에 property를 추가하고 싶을때, ellie.hasJob = true; 와 같은 로직을 써서 추가할 수 있다. 하지만 이는 유지보수 측면에서 좋지 않기 때문에 잘 사용하지 않는 편이 좋다.

오브젝트에서 ellie.name 처럼 마침표를 사용해서 값을 뽑아오거나 [ ]를 사용해서 값을 뽑아올 수 있다. 마침표를 사용해서 값을 뽑아오는 방법은 보통 우리가 정말 순수하게 그 키에 해당하는 값을 받아오고 싶을때 사용하고, [ ]를 사용해서 값을 뽑아오는 방법은 어떤 키가 필요한지 모를때 사용한다. 예시로 설명하자면,

function printValue(obj, key) {
	console.log(obj.key);	// (1) 결과: undefined
    console.log(obj['key']);	// (2) 결과: ellie
}
printValue(ellie, 'name');

다음과 같이 obj의 key가 정해지지 않고 runtime시에 값이 정해지는 경우라면, 마침표를 사용하는 것이 아닌 [ ] 를 사용하는 방법인 computed property 방법을 사용해야 한다.

 

Constructor Function

// 기존 Function
function makePerson(name, age) {
	return {
    	name: name,
        age: age
    }
}

const person4 = makePerson('ellie', 30);

// Constructor Function
function Person(name, age) {
	// this = {};
	this.name = name;
    this.age = age;
    // retrun this;
}

const person4 = new Person('ellie', 30);

순수하게 오브젝트들을 생성하는 함수들은 'makePerson'과 같은 이름으로 생성하지 않고, 'Person'과 같이 대문자로 시작하는 명사를 이름으로 설정한다. 

 

In operator

console.log('name' in ellie);

오브젝트안에 키가 있는지 없는지 확인한다.

 

배열 for문

// for in
for (key in ellie) {
	console.log(key);
}

// for of
const array = [1, 2, 4, 5];
for(value of array) {
	console.log(value);
}

 

Clone (Assign)

// 1가지 속성만 복사할 때
const user1 = {name='ellie', age=27};
const user4 = Object.assign(user4, user);	// target object

// 2가지 이상의 속성 복사할 때
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);	// blue
console.log(mixed.size);	// big

 

 

출처: 드림코딩 by 엘리