#17. 자바스크립트(javascript) - for ... in & for ... of // cloning object

# for ... in 과 for ... of 의 차이점을 설명하도록 하겠습니다.
# 또한 Object를 cloning 하는 방법에 대해서도 설명하도록 하겠습니다.
# Object.assign(dest, [obj1, obj2, obj3...])

# 비전공자가 이해한 Javascript

 

---

1) for ... in  VS  for ... of

 

---

 

1) for ... in

key 값을 for문으로 출력합니다.

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

for (key in axce) {
  console.log(axce[key]);
}

 

---

 

2) for ... of

array의 value 값을 for문으로 출력합니다.

// for (value of iterable)
const array = [1, 2, 4, 5];

for (value of array) {
  console.log(value);
}

 

---

2) Cloning object

const user = { name: 'axce', age: '30' };
const user2 = user;

user2.name = 'coder';

user2는 user와 같은 값을 갖습니다. 따라서 user2.name을 변경하면 user의 name도 변경됩니다.
그 이유는 user 자체를 user2에 할당했기 때문입니다. 메모리는 오브젝트인 { name: 'axce', age: '30' } 만을 담고 있고, user와 user2라는 두 가지 포인터가 동시에 같은 오브젝트를 가리키고 있는 것 입니다.

console.log(user);
console.log(user2);

같은 값이 출력되는 것을 확인하실 수 있습니다.

아래부터는 cloning 하는 방법을 두가지 설명하도록 하겠습니다. 아래의 방법들은 단순히 두 가지 포인터를 만드는 것이 아닌 새로운 Object를 만드는 방법입니다.

 

---

 

1) Old way

const user3 = {};
for (key in user) {
  user3[key] = user[key];
}

이 방법은 새로운 object를 생성하면서 for문을 통해 key 값을 받아 value를 할당하는 방법입니다.
이렇게 만들어진 object는 user와는 독립적인 object를 갖습니다.

user3.name = 'monkey';
console.log(user);
console.log(user3);

 

---

 

2) new way

Object의 assign 함수를 활용해 할당하는 방법입니다.

const user4 = {};
Object.assign(user4, user);
user4.name = 'luffy';


console.log(user);
console.log(user4);

 

---

 

3) another example

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

// 뒤에 나오는 property가 앞에 나온 property를 덮어나감
console.log(mixed.color);
console.log(mixed.size);

위의 코드는 assign 함수로 동시에 여러 개의 object를 받아오는 방식입니다. 만약 assign으로 배정된 object들끼리 같은 속성값을 갖고 있어 충돌이 일어난다면 뒤에 있는 object의 속성값을 따라갑니다.

위의 예시와 같이 fruit1 이 color 속성의 속성값을 'red'로 갖고 있고, fruit2 가 color 속성의 속성값으로 'blue'를 갖고 있기 때문에 나중에 assign된 fruit2의 속성값인 'blue'로 출력되는 것입니다.

만약 fruit1이 color 값을 갖고 있고, fruit2가 color 값을 갖고 있지 않았다면 fruit1의 color 값인 red가 출력되었을 것입니다.

---

 

# 위의 내용은 Youtube 드림코딩 by 엘리 를 참고해서 작성
   - 위 유투브는 도움이 되는 내용의 영상이 많습니다. 구독하시고 유용한 정보를 많이 얻는 것도 좋습니다.
# Javascript Web browser에서 보는 방법: console.log 사용
# MDN Web Docs : https://developer.mozilla.org/en-US/docs/Web/JavaScript

 

 

JavaScript | MDN