(Javascript) Object

Objects

• one of the JavaScript's data types
• a collection of related data end/ or functionality
• Nearly all objects in JavaScript are instances of Object
• object = {key : value}; object는 key와 value의 집합체

 

Literals and properties

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

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

const jiwon = { name: 'jiwon', age: 4 }; // {}를 이용해서 바로 object 생성
print(jiwon);
// JavaScript는 Dynamically Typed Language
// 동적으로 type이 runtime(프로그램이 동작하고 있을때)때 결정
jiwon.hasJob = true; // can add properties later
console.log(jiwon.hasJob);
// 이처럼 너무 동적으로 코딩하면 유지보수 어렵고 에러 발생 가능성 있음
delete jiwon.hasJob; // can delete properties later

Javascript는 Dynamically Typed Laguage이다. 따라서 동적으로 type이 runtime(프로그램이 동작하고 있을때) 결정된다. 따라서 property를 이처럼 나중에 추가하는 것도 가능하고 삭제도 가능하다. 하지만 과하게 동적으로 코딩할 시에는 유지보수가 어렵고 에러가 발생할 확률이 높기때문에 좋지않다.

 

 

Computed properties

• object는 property를 . 문법을 이용해서 접근가능
• computed properties로 접근도 가능
• key should be always string

console.log(jiwon.name); // jiwon
console.log(jiwon['name']); // jiwon
console.log(jiwon.hasJob); // undefined
jiwon['hasJob'] = true; // computed property
console.log(jiwon.hasJob); // true 

// . 으로 접근할 때에는 코딩하는 순간 key에 해당하는 값을 받아오고 싶을 때 사용
// computed properties는 정확하게 어떤 key가 필요한지 모를때, runtime에서 결정될 때 사용
// 동적으로 key와 관련된 value를 받아와야할때 유용하게 사용
function printValue(obj, key) {
    console.log(obj[key]);
}
printValue(jiwon, 'name');

 

 

Property value shorthand

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
// 4 번째 사람을 만들고 싶다면 다시 이름, 나이 작성해야하는 번거로움 있음
// 따라서 함수로 만들었음 
const person4 = makePerson('jiwon', 30);
console.log(person4);
function makePerson(name, age) { //javascript에서 클래스가 없었을때
    return {
        // name: name, // javascript에서는 property value shorthand 기능으로 key와 value의 이름이 동일하다면 생략가능
        // age: age,
        name,
        age
    };
}

javascript에서는 property value shorthand 기능으로 key와 value의 이름이 동일하다면 생략이 가능하다.

 

 

Constructor function

function Person(name, age) { // 다른 계산을 하지않고 순수하게 object를 생성하는 함수들은 대문자로 함수 이름 설정
    // this = {};
    this.name = name; // class의 constructor처럼 
    this.age = age;
    // return this;
}
const person5 = new Person('jiwon', 30);

 

 

in operator: property existence check (key in obj)

• 해당하는 object 안에 key가 있는지 없는지 확인

console.log('name' in jiwon); // true
console.log('random' in jiwon); // fase
console.log(jiwon.random); // undefined

 

 

for .. in vs for .. of

for (key in jiwon) { // for (key in obj)
    console.log(key); // jiwon안에 있는 모든 key
}

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

 

 

Fun cloning

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

const user = { name: 'ellie', age: '20' };
const user2 = user; // user2는 user과 같은 reference를 갖고있음
user2.name = 'coder';
console.log(user) // user.name: coder

// object 복사
// old way
const user3 = {};
for (key in user) {
    user3[key] = user[key];
}
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({}, fruit, fruit2); // 뒤에 나올 수록 앞에 동일한 property가 있다면 값을 덮어씌어줌
console.log(mixed.color); // blue
console.log(mixed.size); // big