[Javascript] Object

객체

객체는 중괄호{}로 감싸져 있고 :로 key, value를 구분하며 각 프로퍼티는 ,로 구분한 형태이다. 배열과 다르게 순서가 없다.

객체를 const로 선언하면 객체내에 내용을 수정하거나 추가 삭제는 에러가 나지 않지만 새로운 객체를 다시 선언하면 에러가 난다.

◼️ 프로퍼티 : 객체에서 key
◼️ 매서드 : 객체어서 저장된 함수

프로퍼티 접근

let plan1 = {   
  name: "Basic"
};

plan1.name;
plan1["name"];

위 두 방법 전부 Basic 이 출력된다.

대괄호로 접근할 때는 따옴표""를 써줘야한다.
두 방법의 차이는 []는 안에 변수가 들어갈 수 있다.

let plan = {   
  name: "Basic"
};

let pro = "name";

console.log(plan[pro]);

똑같이 Basic이 출력된다.

let plan = {   
  name1: "Basic1",
  name2: "Basic2",
  name3: "Basic3"
};

let pro = "name";

console.log(plan[pro+"1"]);
console.log(plan[pro+"2"]);
console.log(plan[pro+"3"]);

변수로 선언하였을 떄 위처럼 반복되는 key가 나오면 반복문으로 처리하기 쉽다.

let myObj = {
    property1: "hello",
    property2: [1,2,3,4,5],
    property3: {
      childproperty: "haha"
    }
    
  };
  let name = "property1";
  
  myObj.property3.siblingproperty = [3, 6, 9];
  
  myObj[name] = ["hi", "hello"];
  console.log(myObj);

property3에 {siblingproperty = [3, 6, 9]} 프로퍼티를 추가하고 property1에 value를 ["hi", "hello"]로 바꾼다.

프로퍼티 추가

const information = {
    name: '김개발'
  }
  const verb = 'developes';
  const project = 'facebook';
  information[verb] = project ;
  information.age = 24;

  console.log(information);

변수를 추가할 땐 []를 사용하여 프로퍼티를 추가하고, 변수가 아닌 값을 추가할 떈 .을 사용한다
위 결과는 { name: '김개발', developes: 'facebook', age: 24 }로 출력된다.

객체 비교

const hiObj = { 
  name: '안녕' 
};

const helloObj = {
  name: '안녕'
};

console.log(hiObj === helloObj);

객체의 키와 값이 똑같은데 false가 출력된다.
그 이유는 객체는 객체 자체를 저장하는 것이 아니라 객체가 담긴 메모리의 주소가 변수에 저장되기 때문이다. 즉, 변수는 객체가 담겨져있는 메모리의 주소를 저장하고 있다.

객체 순회

배열을 순회할 떄 for문을 사용하여 array[0]부터 array[array.length]까지 요소에 접근할 수 있었다.
배열은 순서가 있기때문에 for문으로 접근이 가능하지만 객체는 순서가 없기때문에 for문으로 접근이 불가능하다.

◼️ Object.keys()

객체에서 key만 배열로 반환한다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

Object.keys(obj); // ['name', 'weight', 'price', 'isFresh']

키만 배열로 만들었기때문에 순서가 생겨 반복문을 사용할 수 있다

◼️ Object.values()

객체에서 values만 배열로 반환한다.

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

console.log(Object.values(obj));//[ 'melon', 4350, 16500, true ]

◼️ Object.entries()

key와 values를 배열로(배열안에 배열) 반환한다.

const obj = {
    name: 'melon',
    weight: 4350,
    price: 16500,
    isFresh: true
  }
  
  console.log(Object.entries(obj));

[ [ 'name', 'melon' ], [ 'weight', 4350 ], [ 'price', 16500 ], [ 'isFresh', true ]]가 출력된다.

for-in

const obj = {
  name: 'melon',
  weight: 4350,
  price: 16500,
  isFresh: true
}

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

for(순환할 키를 변수 선언, 객체이름){}를 사용하여 첫번째 키부터 순서대로 접근한다. value에 접근하고 싶으면 obj[key]를 사용하여 접근한다.

위 출력은 아래와 같이 나온다

name
melon
weight
4350
price
16500
isFresh
true