javascript Object 정리

Object 생성

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

위처럼 object를 만들 수 있다.
그럼 왜 우리는 object가 필요한 것일까?

const name = 'hun';
const age = '25';

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

만약 위와 같은 코드가 있다고 하자. name, age는 한사람은 이름과 나이다. 근데 사람이 많아지고 가지고 있는 정보가 많아진다면 위 코드처럼 하나하나 선언해주면 코드가 더러워진다. 그래서

function print(person){
  console.log(person.name);
  console.log(person.age);
}
const man1 = {name: 'hun', age: 25}

이렇게 하나의 object에 정보를 모아놓으면 정리도 쉽고 찾기고 쉽다.
그리고 Object는 key와 value의 집합체이다. name,age가 key가되고 'hun', 25가 value가 된다.

man1.height = 180;
console.log(man1); //{name: 'hun', age: 25, height: 180}

delete man1.height;
console.log(man1); //{name: 'hun', age: 25}

javacript는 동적인 언어이기 때문에 위처럼 중간에 object 요소들을 바꿀 수 있다.

object 접근방법

1. console.log(man1.name); //hun

2. console.log(man1['name']; //hun

위처럼 2가지 방법으로 접근이 가능한다.
*이때 주의할 점은 key는 string type으로 가져와야한다는 것이다.

둘의 차이점은 무엇일까?
1번 방법은 그 key에 해당하는 value를 받아오고 싶을때 쓴다.
2번 방법은 우리가 어떤 key를 써야할지 결정이 안못하고 runtime때 결정될 때 사용한다. 예를 들어

function printValue(obj, key){
  console.log(obj.key); // undefined
  
  console.log(obj[key]); // 성공
}

printValue(man1, 'name');

위처럼 key의 값이 runtime중에 결정이 되면 1번은 사용하지 못하고 2번을 사용해야한다. 즉 동적으로 key의 value를 받아 올때 2번을 유용하게 사용할 수 있다.

반복 줄이기

const person1 = {name: 'Park', age = 22};
const person2 = {name: 'Lee', age = 21};
const person3 = {name: 'Nam', age = 24};
const person4 = {name: 'Choi', age = 27};

만약 이렇게 많은 사람들은 만들어야하는데 name이랑 age를 계속치면 얼마나 귀찮을까? 이때 fucntion을 이용해서 object를 생성할 수 있다.

const person5 = makePerson('Hong', 30);

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

여기서 팁!
function makePerson(name, age){
  return {
    name,
    age,
  };
}
key와 value의 이름이 같다면 이처럼 줄일 수 있다. 

위처럼 function 이 object를 return해서 반복을 줄일 수 있다.
근데 생각해보면 class와 그 역할이 많이 비슷하다. 맞다.

//Constuctor

function Person(name, age){
//this = {}; 생략이 됨
this.name = name;
this.age = age;
//return this; 생략이 됨
}

이렇게 class처럼 역할을 하는 function은 시작할 때 대문자로 적어준다. 그리고 this를 사용해서 작성한다. 그러면 알아서 javascript 엔진이 알아서 object를 생성해준다. 그래서 위에 생략된 부분을 표시해주었다.
뭐랑 많이 비슷하게 생기지 않았나? 바로 Constructor이다.
class에서 사용하는 constructor가 위 함수의 다른 모습이다.

key확인하기

console.log('name' in person1) // true
console.log('height' in person1) // false

key의 존재 여부를 확인 가능하다.

for(key in person1){
  console.log(key)
}
//name
//age

for..in 을 사용해서 모든 key를 확인할 수 있다.

for..of 도 있는데 이것은 배열에서 사용할 수 있다

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

object clone하기

old way

const user = {name: 'Han', age : 34};
const user5 = {};
for (key in user){
  user5[key] = user[key];
}
console.log(user5) // {name: 'Han', age : 34}

Object.assign 사용하기

const user6 = {};
Object.assign(user6, user);

또는

const user7 = Object.assign({}, user);

이 두가지 방법으로 object를 복사할 수 있다.

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

Object.assign은 여러개의 소스를 전달할 수 있는데 뒤에 것을 앞에다가 덮어씌우는 방식으로 동작한다. 그래서 mixed가 b와 같아진 것이다.