[JS] 객체와 프로퍼티

객체와 프로퍼티에 관련된 예제 모음집

 

Array 예제

in 을 사용하여 index 값 출력하기

const arr = [100, 200, 300, 400, 500, 600, 700];

for (let i in arr) {
  console.log(i);
}

in을 사용하여 property 값 출력하기

for (let i in arr) {
  console.log(i, arr[i]);
}

 

of를 사용하여 property 값 출력하기

for (let i of arr) {
  console.log(i);
}

 

Object 예제

in을 사용하여 key값 출력하기

const obj = { name: "Kim", addr: "Yongsan", level: 1, role: 9, receive: false };

for (let i in obj) {
  console.log(i);
}

 

in을 사용하여 property 값 출력하기

for (let i in obj) {
  console.log(i, obj[i]);
}

of를 사용하여 property 값 출력하기

for (let v of Object.values(obj)) {
  console.log("v:", v);
}

Object.defineProperty 사용하기

// level 을 entries에 나타나지 않도록 하기
console.log(Object.defineProperty(obj, "level", { enumerable: false }));

console.log("----------------------");
//role을 읽기전용으로 바꾸기
console.log(Object.defineProperty(obj, "role", { writable: false }));

 

Object => Array, Array=> Object

// 배열 -> 객체
data = [
  ["A", 10, 20],
  ["B", 30, 40],
  ["C", 50, 60, 70],
];

function makeObjectFromArray(arg) {
  let result = {};
  for (let [k, ...content] of arg) {
    // result[k] = content;
    result = { ...result, [k]: content }; //frontend
  }
  return result;
}

dataObj = makeObjectFromArray(data);

console.log(dataObj);

console.log("----------------------");

// 객체 -> 배열

function makeArrayFromObject(obj) {
  let answer = [];
  for (const [k, v] of Object.entries(dataObj)) {
    //answer.push([k, ...v]);
    answer = [...answer, [k, ...v]];
  }
  return answer;
}

console.log(makeArrayFromObject(obj));

 

Shallow copy , Deep copy

Shallow copy 예제

function shallowCopy(obj) {
  // return {...obj}; // 정답!!
  const ret = {};
  for (const [k, v] of Object.entries(obj)) {
    ret[k] = v;
  }
  return ret;
}
// 1) shallow copy
const kim = { nid: 3, nm: "Kim", addr: "Pusan" };
const newKim1 = shallowCopy(kim);
newKim1.addr = "Daegu";
console.log(kim.addr !== newKim1.addr); // true면 통과!

Deep copy 예제

function deepCopy(obj) {
  const ret = {};
  for (const [k, v] of Object.entries(obj)) {
    // ret[k] = v !== null && typeof v === 'object' ? { ...v } : v;
    if (v !== null && typeof v === "object") {
      ret[k] = deepCopy(v);
    } else {
      ret[k] = v;
    }
  }
  return ret;
}

const kim2 = {
  nid: 3,
  nm: "Kim",
  addr: { city: "Pusan", road: "Haeundaero", zip: null },
};

const newKim2 = deepCopy(kim2);
newKim2.addr.city = "Daegu";
console.log(kim2.addr.city !== newKim2.addr.city); // true면 통과!

 

얕은 복사는 내부 객체를 공유하므로, 원본이 바뀔 수 있지만
깊은 복사는 내부까지 완전히 복사하므로, 원본 보호가 필요할 때는 깊은 복사를 해야된다.