Object를 알아보자

Object란 무엇인가

• one of the javaScript's data types.
• a collection of related data and/or functionality.
• nearly all objects in JS are instances of Object
• object는 key와 value의 집합체이다. object = {key : value}
• 순서가 있는 배열과 달리 순서 없이 정보를 저장한다.

참고 사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object

1. Literals and properties

원시타입의 경우 변수 하나당 하나의 값만 들어갈 수 있다. 아래와 같이 각각 출력해야 하므로 인자가 많아지면 추가하거나 삭제해야할 것도 많아져 데이터의 관리도, 출력도 힘들다.

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

const name = 'somi';
const age = 20;

print(name, age); //somi, 20

그러나 객체의 경우, 아래와 같이 데이터를 한데 묶어두기에 관리가 용이하다.

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

const somi = { name: 'somi', age: 20 }

print(somi); // somi, 20

객체 생성의 두가지 방법

const obj1 = {}; //object literal(객체 리터럴 문법)
const obj2 = new Object(); //object constructor (객체 생성자 문법, 클래스를 이용하는 방법)

자바스크립스트는 dynamic clip type language이기 때문에 프로그램이 동작하고 있을 때 결정되는 언어이기 때문에 아래와 같은 미친짓이 가능하다!

데이터 추가하기

somi.hasJob = false;
console.log(somi.hasJob); //false
console.log(somi) //{name: "somi", age: 20, hasJob: false}

데이터 삭제하기

delete somi.hasJob;
console.log(somi.hasJob); //undefined
console.log(somi) //{name: "somi", age: 20}

2. Computed properties(계산된 프로퍼티)

• 데이터에 접근은 두가지 방법이 있다. dot 또는 computed property
• dot을 사용하는 경우는 코딩하는 그 순간 키의 값에 해당하는 것을 받아오고 싶을때,
• computed는 런타임에서 그 값이 결정될 때(답을 모를 때) 사용된다.(실시간)
• 여기서 key는 항상 string타입으로 접근되어야 한다.

console.log(somi.name); //somi
console.log(somi['name']); //somi

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

예시

function printValue(obj, key){
    console.log(obj.key) //언제 어떤 키를 받을지 모른다.
}
printValue(somi, 'name')//undefined

function printValue2(obj, key){
    console.log(obj[key])
}
printValue2(somi, 'name')//somi

• 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우, 이를 계산된 프로퍼티(computed property) 라고 부른다.

3. Property value shorthand

const person1 = { name: 'bob', age: 2};
const person2 = { name: 'steve', age: 3};
const person3 = { name: 'dave', age: 4};

//자바스크립트에서는 아래와 같이 키와 벨류의 이름이 동일하다면 생략이 가능하다.
//클래스가 나오기 전까지는 아래와 같이 객체를 만들었다!ㄷㄷ
function makePerson(name, age) {
    return{
        name,
        age,
    };
}

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

console.log(person4); //{name: "somi", age: 30}

4. Constructor function

그러나 보통 객체를 만들때는 아래와 같은 형태로 만든다.

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

5. in operator: property existence check(key in obj)

//해당하는 오브젝트 안에 키가 들어있는지 여부를 확인하는 것

console.log('name' in somi); //true
console.log('age' in somi); //true
console.log('random' in somi); //false
console.log(somi.random); //정의하지 않은 키를 설정하면 undefined 

6. for..in vs for..of

for (key in obj)

모든 키들을 받아와서 처리하고 싶을 때 유용

for(let key in somi){
    console.log(key) //name, age, hasJob
}

for (value of iterable)

배열과 같이 순차적인 데이터를 처리하는 것

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

7. Cloning

const user = { name: 'somi', age: '20'};
const user2 = user;
user2.name = 'coder';
console.log(user); //{name: "coder", age: "20"}

여기서는 클론이 된게 아니라 같은 오브젝트에 접근하는 것.
같은 객체를 만들려면 아래와 같은 방법을 취해야한다.

old way

const user3 = {};
for (let key in user) {
    user3[key] = user[key];
}
console.log(user3) //{name: "coder", age: "20"}

new way1

• Object.assign(dest, [obj1, obj2, obj3...])

const user4 = {}; //타겟 생성
Object.assign(user4, user); //복사하고자하는 오브젝트 전달
console.log(user4); //{name: "coder", age: "20"}

new way2

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

another example

const fruit1 = {color: 'red'};
const fruit2 = {color: 'blue', size: 'big'};
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color, mixed.size); //blue, big
//뒤에 있는 오브젝트가 덮혀 씌어진다.