TIL 2주차 - 3. 배열, 객체

배열

mutable vs immutable

• mutable 함수

  splice
  sort
  reverse
  push / pop
  shift / unshift

• immutable 함수

  filter
  map
  slice

---

객체

객체 읽고 쓰기

. (마침표) 연산자

let user = {
  name: "John",
  age: 30
};

user.name // => "John"

[ ] 대괄호 연산자

정적인 키에 접근하기 위해서는 ""로 묶어주어야 한다.

user["name"] // => "John"

동적인 키에 접근하기 위해서는 대괄호 연산자만 사용 가능하다.

function(obj, key){
  return obj[key] //--> key가 동적으로 변하기 때문에 대괄호로 묶어준다.
  // [x] obj.key  / obj["key"]
}

let result = fun(obj, key)

Object.keys, values, entries. fromEntries

• Object.keys(obj) – 객체의 키만 담은 배열을 반환

• Object.values(obj) – 객체의 값만 담은 배열을 반환

• Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환

let user = {
  name: "John",
  age: 30
};

Object.keys(user) = ["name", "age"]
Object.values(user) = ["John", 30]
Object.entries(user) = [ ["name","John"], ["age",30] ]

• Object.fromEntries(arr) - 배열을 객체로 반환

const arr = [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ];
const obj = Object.fromEntries(arr);
console.log(obj); // { 0: "a", 1: "b", 2: "c" }

객체 변환하기

객체에서는 map, filter 메소드를 사용하지 못한다. 때문에 entires로 배열을 얻고, map를 사용한 후에, fromEntries로 다시 객체로 만든다.

• Object.entries
• Object.fromEntries

1. Object.entries(obj)를 사용해 객체의 키-값 쌍이 요소인 배열을 얻습니다.
2. 1.에서 만든 배열에 map 등의 배열 전용 메서드를 적용합니다.
3. 2.에서 반환된 배열에 Object.fromEntries(array)를 적용해 배열을 다시 객체로 되돌립니다.

let prices = {
  banana: 1,
  orange: 2,
  meat: 4,
};

let doublePrices = Object.fromEntries(
  // 객체를 배열로 변환해서 배열 전용 메서드인 map을 적용하고 fromEntries를 사용해 배열을 다시 객체로 되돌립니다.
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

console.log(doublePrices.meat); // 8

얕은 복사, 깊은 복사

const obj = {
  a: "하나",
  b: {
    c: "둘",
  },
};

const copiedObj = Object.assign({}, obj);

obj === copiedObj // false

obj.a = "하나하나"
obj.a === copiedObj.a // false

copiedObj.b.c = "둘둘"
obj.b.c === copiedObj.b.c // true

Object.assign()은 얕은 복사가 된다.
때문에 객체 안의 객체의 경우 동일한 참조값을 갖게 되기 때문에, obj의 b안의 c의 value를 바꾸게 되면 copiedObj의 b안의 c에도 동일한 변경된 값을 가지게 된다.
즉, 참조값이 가장 바깥의 참조값만 다르고, 객체 안의 참조값들은 같은 참조값을 가지게 되는 것이다.