javascript-6: Object

Object

정의

• object = { key : value }; // object는 key와 value의 집합체이다.

1. 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 ellie = {name: 'ellie', age: 4};
print(ellie);

2. Computed properties //계산된 속성

• key should be always string

console.log(ellie.name);
console.log(ellie['name']);   

ellie['hasJob'] = true;

console.log(ellie.hasJob);

function printValue(obj, key){
  console.log(obj[key]);
}

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

* .은 코딩하는 순간 작성 / [ ]은 런타임 동안 결정될 때 사용

3. Property value shorthand

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

const person4 = makePerson('elile',30);
console.log(person4);
function makePerson(name, age) {
    return {
        name,        //name: name,
        age,         //age: age,   
    };
}

4. Constructor Function

4-1 Object literal

4-2 생성자함수 원리

* 생성자함수 이름 첫글자는 대문자로

4-3 객체 여러개 만들기

4-3 연습1

function User(name, age) {
  this.name = name;
  this.age = age;
  this.showName = function() {
    console.log(`나는 ${this.name} 이고, ${this.age}살 입니다.`)
  }
}
const user1 = new User('Mike', 30);
const user2 = new User('Tom', 50);
const user3 = new User('Andy', 40);
const user4 = new User('Gido', 30);
console.log(user1)
console.log(user2)
console.log(user3)
user4.showName();

4-4 연습2

function Item(title, price) {
  this.title = title;
  this.price = price;
  this.showPrice = function() {
    console.log(`가격은 ${this.price}원 입니다`);
  }
}
const bag = new Item('bag', 500);
bag.showPrice();

4-4 연습3

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

const person4 = new Person('elile',30);

console.log(person4);

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 ellie);   

console.log('age' in ellie);    

console.log('random' in ellie);   

console.log(ellie.random);

function isAdult(user){
  if(!('age' in user) || user.age < 20){
    return false;
  } 
  return true;
}
const Mike = {
  name : 'Mike',
  age : 30
};
const Jane = {
  name : "Jane"
};
console.log(isAdult(Jane))

* 유저안에 에이지가 없거나 20살보다 낮으면 false반환

6. for … in / for … of

6-1 for (key in obj)

const Mike = {
  name: "Mike",
  age: 30
};
for(x in Mike){
  console.log(Mike[x])
}

6-2 for (value of iterable)

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

Fun cloning

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

const user={name: 'ellie',age: '20'};
const user2=user;

console.log(user);

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

// another example

const fruit1 = {color: 'red'};

const fruit2 = {color: 'blue',size: 'big'};

const mixed = Object.assign({},fruit1,fruit2);

console.log(mixed.color);
console.log(mixed.size);

5. Object.assign( ): 객체 복제

* {}는 초기값. 초기값에 user를 덮어씌우는 원리.

* 복제했다고 해서 newUser가 User와 같은건 아님. User의 내용만 복제하는 것!

*초기값에 내용을 추가 할 수 있음!

* 여러개 합칠수도 있음

6. Object.keys() : 키를 배열로 변환

7. Object.values() : 값 배열 변환(값만 받아오고 싶을때)

8. Object.fromEntries( ): 키/값 배열을 객체로 변환