[JS]05-object(for..in, for..of 등)

Object

- object = {key : value};

---

1. Literals and properties

 

-Object literal: {}를 이용해서 만드는 방법

const obj1 = {};

 

-object constructor: class를 이용하여 new라는 키워드를 이용한 방법

const obj2 =new Object();

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

const tom = { name: 'Tom' , age: 20};
print(tom);

//dynamically typed language라 properties를 나중에 추가 가능함
tom.hasJob = true; //추가
console.log(tom.hasJob); 

delete tom.hasJob; // 삭제

---

2. Computed properties ([''])

 

항상 스트링타입으로 지정해야함.

 

<데이터에 접근하는 방법>

- ' . ' 을 이용한 방법: 코딩하는 순간 해당하는 값을 받아오고 싶을때 사용.

console.log(tom.name);

 

-computed properties 방법: 배열에서 데이터를 가져오는 것처럼 ['변수를 스트링형태로만듬']을 이용한 방법. 정확하게 어떤 key가 필요한지 모를때 즉 Runtime에서 결정될때 사용함. 실시간으로 받아오고 싶을때.

console.log(tom['name']);
tom['hasJob']=true; //추가도 가능함

function printValue(obj, key){
    console.log(obj[key]); //console.log(object.key);라고 적으면 값을 불러올 수 없음
}
printValue(tom, 'name');
printValue(tom, 'age');

---

3. Property value shorthand

동일한 key와 value 값을 생략하기위해 함수를 설정해서 줄여쓸수 있다.

 

예를들어

const person1 = { name: 'Bob', age: 2};
const person2 = { name: 'Mike', age: 2};
const person3 = { name: 'Jane', age: 2};
.
.

이런것들은 좀더 간단하게 작성을 하려면

아래와 같이 함수를 작성하면 된다.

function makePerson(name, age){
    return{
        name, //name = name; 을 함축해서 name으로만 적을 수 있다.
        age,
    };
} 

const person4 = {'Jack, 2'};

이런식으로 간단하게 작성 가능!

 

이렇게 적어줘도 되지만

보통은 아래처럼 constructor function으로 적어준다.

 

4. constructor function

 

function Person(name, age){ //첫글자는 대문자로 적기

    this.name = name; //return은 생략하고 class만드는것처럼 적어주기.
    this.age = age;
    
}

모양새가 class랑 비슷해보인다.

 

호출할때도

const person4 = new Person('Jack, 2');

이런식으로 new를 붙여서 호출한다.

 

---

5. in operator: property existence check (key in obj)

-해당 오브젝트 안에 key가 있는지 없는지 확인하는것. (true,false)

 

console.log('name' in tom); // true
console.log('random' in tom); // flase
console.log(tom.random); // undefined

---

- for..in (key in obj) 

오브젝트의 모든 key들을 받아와서 일들을 처리하고 싶을때 쓰임.

for (key in tom){
    console.log(key);
}

 

-for..of (value of iterable)

오브젝트를 쓰는것이 아니라 배열과 같은 배열리스트, 순차적으로 iterable 한 아이들을 쓴다.

//const array = [1, 2, 3, 4]; 이런 데이터가 있다 가정하면..

for (let i = 0; i<array.length; i++){
    console.log(array[i]);
} //이렇게 쓰기보단

//for..of를 이용하여 
for(value of array){
    console.log(value);
} 
//간단하게 작성할수 있다.

---

 

7.cloning

<오브젝트를 복사하는 방법>

-old way

const user3 ={}; //새로운 빈 오브젝트를 만들어서 for..in으로 수동적으로 할당해주는 방법

for(key in user){
    user3[key] = user[key]; // 빈 user3안에 user의 key를 할당시킴
}

console.log(user3); // user의 값이 복사되어진것을 볼 수 있다.

 

-Object.assign 을 통한 방법 

const user4 ={}; // 빈 오브젝트를 만들어준뒤
Object.assign(user4, user);  //Object.assign작성후 적어주면 복사가 된다

//좀더 간단하게 작성하려면 
const user4 = Object.assign({},user); //이렇게 한줄로도 작성이 가능하다.
console.log(user4)

 

- another example 

const fruit1 = { color: 'red'} ;
const fruit2 = { color: 'blue', size:'big'} ;
const mixed = Object.assign({}, fruit1, fruit2);

console.log(mixed.color); //출력하면 fruit2의 blue 가 출력이됨. 
//왜냐, ({}, fruit1, fruit2)에서 맨뒤의 값이 출력되기 때문!
//({}, fruit2, fruit1)이렇게 작성하면 fruit1의 값이 덮어씌워지게 됨. 이점을 주의할것.

 

 

---

이 글은 유튜브 드림코딩 by 엘리님의 JS 입문강의를 보면서 정리한것 입니다.