자바스크립트 object

object

'use strict';
// Objects
// one of the JavaScript's data types.
// a collection of related data and/or functionality.
// Nearly all objects in JavaScript are instances of Object
// object = { key : value };

//object 만드는 방식
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);// ellie 4


//자바스크립트는 동적으로 타입이 runtime때 결정되므로 밑에 상황이 가능하다.
// can add properties later
// 나중에 추가가 가능함 (유지보수할때 힘들기 때문에 피하는게 좋음)
ellie.hasJob = true;
console.log(ellie.hasJob);

// can delete properties later
// 나중에 삭제 가능함 (유지보수할때 힘들기 때문에 피하는게 좋음)
delete ellie.hasJob;
console.log(ellie.hasJob);

• 자바스크립트는 동적으로 타입이 runtime때 결정됨

• object 은 key : value 의 집합체이다.

Computed properties

console.log(ellie.name); // ellie 어떠한 값을 정확히 가져올때
console.log(ellie['name']); // ellie 정확하게 어떠한 값을 받을지 모를때 사용함 
ellie['hasJob'] = true;
console.log(ellie.hasJob); // true

function printValue(obj, key) {
    console.log(obj[key]); // 어떤키를 받을지 모를때 이렇게 사용함
}

printValue(ellie, 'name'); // ellie
printValue(ellie, 'age'); // 4

Property value shorthand

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

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

in operator: property existence check (key in obj)

// 키가 있는지 없는지 확인해줌
console.log('name' in ellie); //true
console.log('age' in ellie); //true
console.log('random' in ellie); //false
console.log(ellie.random); // undefined

for..in vs for..of

// for (key in obj)
console.clear();
for (let key in ellie) {
    console.clear(); // clear() 이전 로그를 다 지워줌
    console.log(key); //ellie에 있는 모든키을을 출력
}
//  ellie의 모든 속성을 확인해보고 싶을때 사용 for in

// for (value of iteralble)
const array = [1, 2, 4, 5];
for (let value of array) { //array 모든값을 할당해줌
    console.log(value);
}
// 배열안에 모든 값들을 한번에 불러오는 속성 

Fun cloning

// Object.assign(dest, [obj1, 0bj2, obj3...])
const user = { name: 'ellie', age: '20' };
const user2 = user; // user2에도 동일한 레퍼런스를 가지고 있음
user2.name = 'coder';
console.log(user); // coder

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

console.clear();
console.log(user3); // 값이 복사됨 coder, 20 이 출력이됨

const user4 = Object.assign({}, user); // Object.assign -> 복사됨
console.log(user4); //coder, 20 이 출력이됨
// 같은 코드
// const user4 = {};
// Object.assign(user4, user);
// console.log(user4);

//anther example 
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); // blue -> 뒤에나오는 것이 값을 덮어씌움(유의해야함)
console.log(mixed.size); // big

공부 참조 링크

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object