object란?

object
Js의 데이터 타입 중 하나이다
함수나 데이터와 연관된 것들의 모음
Js의 거의 모든 객체는 Object의 인스턴스이다
object = { key: value};

 

1.literals and propertries

1-1.객체 리터럴, 객체 생성자

 const obj1 = {}; //'객체 리터럴' syntax
 const obj2 = new Object(); //'객체 생성자' syntax

 //객체 리터럴
 function print(person) {
  console.log(person.name);
  console.log(person.age);
 }

 //객체 생성자
 const ellie = {name:'ellie',age:4};
 print(ellie);

1-2.자바스크립트는 dynamically typed language이다

->동적으로 type이 runtime(프로그램이 동작하고 있을때)에 정해진다

그래서 나중에 속성을 추가할 수도 있다.(권장하지 않음)

const ellie = {name:'ellie',age:4};
 print(ellie);

//나중에 속성을 추가할 수 있다
 ellie.hasJob = true;
 console.log(ellie.hasjob);//true 

 //나중에 속성을 삭제할수도 있다
 delete ellie.hasJob;
 console.log(ellie.hasJob);//undefined

 

2.computed properties

 const ellie = {name:'ellie',age:4};
 print(ellie);

console.log(ellie.name);//ellie (방법1)
 console.log(ellie['name']);//ellie (방법2 <-computed properties)
//키는 항상 문자열이어야 한다(not name-> 'name')

//위의 1-2를 computed properties로 접근한것
ellie['hasJob']= true;
console.log(ellie.hasJob);

//방법 1과 2는 어떨때 어떻게 활용할까?
//코딩하는 순간 값을 받아와 사용하고 싶을때는 방법1
//정확하게 어떤 key가 필요한지 모를때 즉,runtime에서 결정될때 방법2를 사용
//평소에는 그냥 방법1을 쓰는것이 맞다

//(예시로 실시간으로 원하는 key의 값을 받아오고 싶을때 computed properties)
function printValue(obj,key){//key는 user에게 input받는다고 가정
  console.log(obj[key]);//만약 여기서 .key라고 하면 결과는 undefined
}
printValue(ellie,'name');//ellie
printValue(ellie,'age');//4

 

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('ellie',30);

function makePerson(name,age){
  return{
    name,//name:name의 shorthand
    age,// age:age의 shorthand
  };
}
console.log(person4);//{name: 'ellie', age: 30}

 

4. Constructor function

 

const person4 = new Person('ellie',30);
function Person(name,age){//첫문자는 대문자로 해야한다는점 기억
  //this = {};
  this.name = name;
  this.age = age;
  //return this;
}
/*class가 나타나기 전에는 위의 3번의 예시처럼 많이 작성이 되었고,
 다른 계산을 하지않고 순수하게 object를 생성하는 함수들은 위와같이 작성하게 되었다
 */

 

5.5.in operator: property 존재 확인 (객체안에 key가 있는지)

 console.log('name' in ellie);//t
 console.log('age' in ellie);//t
 console.log('random' in ellie);//f
 console.log(ellie.random);//undefined

 

6.for..in vs for..of

for in

//객체안에 들어있는 key들을 전부 보여준다
//for (key in obj)
 const ellie = {name:'ellie',age:4};
 for (key in ellie)
 console.log(key);//name, age

for of

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

//이거를

for(value of array) {
  console.log(value);// 1, 2, 4, 5
}//이렇게 간단히 표현할 수 있도록 해준다

7.cloning

const user = {name: 'ellie', age:'20'};
const user2 = user;
user2.name = 'coder';
console.log(user);// coder(user의 refernce를 참조한 user2의
//name을 바꾸면 refernce의 본주인 user의 name도 변경된다)

//user N이 user의 key들을 완전히 복사하는법
//옛날방식
const user3 = {};
for (key in user) {
  user3[key] = user[key];
  console.clear();
  console.log(user3);//{name: 'coder', age: '20'}
}

//요즘 방식
//Object.assign(dest,[obj1,obj2,obj3...])
const user4 =
Object.assign({}, user);
console.log(user4);//{name: 'coder', age: '20'}

//another 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