[Javascript]자바스크립트 Object활용법 정리

[Javascript]자바스크립트 Object활용법 정리

안녕하세요 미나라이입니다.

 

이번포스팅에서는 자바스크립트의 Object활용법을 정리해보았습니다.

 

선언방식

// literal syntax
const obj1 = {};
const obj = { name : 'hong', age : 20};

// constructor syntax
const obj2 = new Object();

Object항목추가 방법

Object변수를 선언하고 추가하고싶은 key값을 obj변수 뒤에 붙혀서 추가하면 됩니다. 

const obj = new Object();

obj.name = 'hong';
obj.age = 20;

위와 같은 경우에는 key값(name등)이 코딩 시점에서 확정이 났을 경우에는 활용이 가능하지만

처리 중간에 key값을 넣고 싶은 경우에는 아래와 같이 선언해주면 됩니다.

아래와 같이 key를 선언하는 방법을 Computed properties라고 합니다.

// constructor syntax
const obj = new Object();
let i = 1;

// Computed properties
obj['name' + i] = 'hong';
obj['age' + i] = 20;

Object항목 삭제 방법

delete obj.name;
delete obj['age'];

Object를 생성하는 다양한 방법

const person = {name : 'bob', age : 20};

// Property value shorthand
const person2 = makePerson('steve', 30);

function makePerson(name, age) {
    return {name, age};
}

// Constructor Function
const person3 = new Person('dave', 35);

function Person(name, age) {
    this.name = name;
    this.age = age;
}

Object안에 Key값이 존재하는지 확인하는 방법

const obj = { name : 'hong', age : 20};

var check = 'name' in obj; // True
var check = 'job' in obj; // False

Object항목을 전부 출력하는 방법

const obj = { name : 'hong', age : 20};

for (key in obj) {
    console.log(key);
}

Object를 복사(Copy)하는 방법

Object를 복사하려고 할 때 단순하게 변수를 이식할 경우에 주소값이 공유되어서 원본도 같이 변해버리기 때문에 주의해야 합니다.

const obj = { name : 'hong', age : 20};
const obj2 = obj;
obj2.name = 'coder1';

console.log(obj.name);
console.log(obj.age);

obj2에 obj를 이식하고 obj2의 값을 변경했지만 obj의 값도 변해버립니다.

coder1 20

위와 같은 상황을 막기 위해서는 아래의 방법을 사용하면 됩니다.

 

예전부터 사용되어온 방식

obj2를 새로 선언한다음에 obj에 있는 key를 순차적으로 이식합니다.

이 경우 서로 다른 object끼리 값만 던져주고 있기 때문에 주소가 겹칠 일이 사라집니다.

const obj = { name : 'hong', age : 20};

const obj2 = {};
for(key in obj) {
    obj2[key] = obj[key]
}

새로운 방식

Object의 assign기능을 이용하면 간편하게 값을 이식 할 수 있습니다.

const obj = { name : 'hong', age : 20};

const obj2 = {};
Object.assign(obj2, obj);

// mixed
const fruit1 = {color : 'red'};
const fruit2 = {color : 'blue', size : 'big'};

// 위와같이 선언 했을 경우 뒤쪽 파라미터(fruit2)의 key데이터를 계속 덮어씌운다
const mixed = Object.assign({}, fruit1, fruit2);

이상으로 Object의 다양한 활용법에 대해 정리해보았습니다.