Java Script - Object

primitive 타입은 값만 하나만 받을 수 있지만

Object 타입은 여러가지 값을 담을 수 있는 컨테이너

 

모든 객체들은 (사용자의 클래스까지도) 모두 Object를 상속받고 있다.

-> Object의 기능을 사용할 수 있다.

 

자바스크립트에선 class 보다 더 많이 씀

 

 

1. object 생성

//오브젝트는 key와 value의 집합체
//key: name / value : "홍길동"
const person ={name:"홍길동", age:20};

 

다른 방법

//오브젝트 생성
const obj1={};  //object literal syntax
const obj2 = new Object();  //Object constructor syntax(클래스를 이용해서 생성)

 

뒤늦게 추가, 삭제 가능

//동적 언어(타입이 런타임 때 결정)이므로 뒤늦게 property 추가 가능
//웬만하면 하지 말자! 유지 보수가 어렵다.
person.hasjob = true;
console.log(person.hasjob);

delete person.hasjob;
console.log(person.hasjob); //undefined

삭제되어서 undefined가 나옴

 

 

 

2. computed properties

계산된 속성들?

오브젝트 속성에 접근할 때 두가지 방법이 있음

. 닷으로 접근하거나 [  ]를 써서 접근

[ ]의 경우 정해지지 않아서 실시간으로 값이 결정 되어야할 때 쓴다고 함

//computed properties

 //일반적인 코딩을 할 때 사용
console.log(person.name);  

//key는 string 타입으로 받아와야함
//런타임 중에 실시간으로 원하는 값을 받고 싶을 때 사용
//ex) 사용자가 입력하는 내용을 출력
console.log(person['name']);   

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

 

 

 

3. 오브젝트 생성시 반복되는 키 작성 지양하기

오브젝트를 생성할 때마다

const person ={name: '홍길동', age:  20}

const person ={name: '임꺽정', age: 25}

...

이렇게 작성한다면 생성할 때마다 name과 age 키값이 반복되게 됨

 

그래서 function을 하나 만들고 생성하는 게 좋음

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

 

 그런데 이것보단 생성자로 오브젝트를 생성하는 것이 더 좋다고 함

 

 

 

 

4. Constructor Function

생성자로 오브젝트 생성

return 을 사용하지 않고 이렇게 작성한다.

클래스의 생성자처럼 템플릿을 만들어주고 재사용하면 됨

 

//Constructor Function
//생성자로 오브젝트 생성
//return을 사용하는 것보단 이렇게 작성한다
function Person(name, age){ //대문자 시작
    //생략된 것: this ={};
    this.name = name;
    this.age = age;
    //생략된 것: return this;
}

const person1 = new Person('임꺽정', 30);
const person2 = new Person('김걱정', 40);
console.log(person1);
console.log(person2);

 

 

 

5. in operator

이 키가 오브젝트에 존재하는 지 True / False로 반환해줌 

console.log('name' in person1); //true
console.log('home' in person1); //false => undefined value

 

 

 

6. for ( key in Object )

오브젝트 안의 모든 키 값 출력

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

 

 

7. for ( value of Object )

배열, 리스트와 같이 순차적인 자료구조의 값을 순차적으로 출력해줌

즉, iterable 값만 적용이 됨

//배열, 리스트와 같이 순차적인 값만 출력해줌 (iterable)
for(value of person1){
     console.log(value);
}   //Error : person1 is not iterable!

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

 

 

8. 복제

먼저 있던 오브젝트 값에 새 오브젝트를 대입하면

두 오브젝트가 서로 같은 값을 가르키게 됨

그래서 어느 한쪽의 속성값을 바꾸게 되면 두 오브젝트의 속성 값이 모두 바뀌게 됨

const user = {name:'홍길동', age:10};
const user2 = user; //user와 user2의 refernce가 같은 값을 가르키게 됨
console.log(user.name); //홍길동
user2.name ="임꺽정";
console.log(user.name); //임꺽정

 

 

이렇게 말고 진짜 복제를 하려면 

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

빈 오브젝트를 하나 만들고

이렇게 반복문을 돌리면서 하나하나 대입해 줘도 되지만 

 

 

Object.assign 이라는 메서드를 사용하면 더 간편함

//Object.assign 을 사용
//타겟과 복사하고자 하는 값을 함께 전달한다.
//const user4={};
//Object.assign(user4, user);
const user4=Object.assign({},user);
console.log(`user4: ${user4.name}`);

 

주석친대로 쓰고 출력해도 되지만

Object.assign을 하면 반환되는 새로운 오브젝트를 변수에 담는 것으로

한줄로 표현할 수 있음

 

Object.assing({ }, user);

빈 오브젝트 { } : 타겟

user : 복사할 값

 

타겟에 복사할 값을 덮어 씌움

 

 

 

그래서 여러가지를 섞는다면 이런 값이 나옴

//여러가지 섞을 경우
const fruit1 ={color: 'red'};
const fruit2 = {color: 'blue', size: 'big'}
const mixed = Object.assign({},fruit1,fruit2);  //뒷쪽(->)에 있는 값이 앞의 값을 덮어 씌운다
console.log(mixed); //blue, big

red, blue, big 이렇게 안나오는 이유는

뒤쪽에 작성되는 값이 앞의 값들을 덮어씌우는 구조이기 때문이다.

{ } + furit1 된 값을 (red)

다시 fruit2가 덮어버림 (blue, big)

그래서 blue, big 이 출력됨

 

 

 

MDN에 가면 Object에 관련된 내용을 더 볼 수 있음

Object