[자바스크립트] 7. 오브젝트

자바스크립트 기초 강의(ES5+) - 드림 코딩 by 엘리 강의 정리 입니다. 

자세한 내용을 공부하고 싶으시면 위의 링크에 들어가셔서 학습하시는 것을 추천드립니다.

 

오브젝트(Object)

오브젝트는 자바스스크립트의 데이터 타입중 하나입니다. 

 

1. 오브젝트 생성

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

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

const ellie = { name: 'ellie', age: 4 };
print(ellie);

// with JavaScript magic (dynamically typed language)
// can add properties later
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
delete ellie.hasJob;
console.log(ellie.hasJob);

 

- 위 코드는 오브젝트를 생성하는 것을 보여주는 코드입니다.

 

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

- 오브젝트 안에서 key로 사용 되는 것은 name, age가 되고 value로 사용 되는 것은 'ellie' 와 4입니다.

 

ellie.hasJob = true;
console.log(ellie.hasJob);

- 이와 같이 동적으로 자주 짜게 되면 나중에 유지 보수 하기 힘들어질 수 있습니다.

 

 

계산된 프로퍼티

console.log(ellie.name);
console.log(ellie['name']);
ellie['hasJob'] = true;
console.log(ellie.hasJob);

function printValue(obj, key) {
  console.log(obj[key]);
}
printValue(ellie, 'name');
printValue(ellie, 'age');

- ellie 라는 오브젝트를 접근하는 코드입니다.

 

console.log(ellie['name']);

- 이런 식으로 접근을 할때는 key의 값을 스트링 형태로 접근해야 합니다. 만약 'name' -> name으로 하게 되면 찾지 못하게 됩니다. 

 

생성 함수

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
const person4 = new Person('elile', 30);
console.log(person4);

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

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

- 함수를 이용해서 오브젝트를 만들 수 있는 함수입니다.

 

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

- 위와 같이 해도 함수를 만들 수 있습니다.

- 하지만 순수하게 오브젝트를 만들 수 있는 형식이 있습니다.

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

- 위와 같이 코드를 짜면 자바스크립트에서 알아서 오브젝트를 만들어 줍니다.

 

 

in 연산자

오브젝트 안에 해당하는 키가 있는지 없는지를 확인하는 연산자 입니다.

console.log('name' in ellie);
console.log('age' in ellie);
console.log('random' in ellie);
console.log(ellie.random);

 

for...in , for...of

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

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

- for in 의 경우는 key 에 관한 것을 출력 해줍니다.

- for of 의 경우는 value를 출력 해줍니다.

 

 

오브젝트 복사

// Object.assign(dest, [obj1, obj2, obj3...])
const user = { name: 'ellie', age: '20' };
const user2 = user;
console.log(user);

// old way
const user3 = {};
for (let key in user) {
  user3[key] = user[key];
}
//console.clear();
console.log(user3);

const user4 = Object.assign({}, user);
console.log(user4);

// another example
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);

 

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color);
console.log(mixed.size);

- Object.assign 를 여러개 할 때, 같은 키가 있다면, 뒤에 나오는 것으로 덮어씁니다.