Links

자바스크립트 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

공부 참조 링크