[JavaScript] 객체의 기초

오늘은 객체를 공부했다. 

 

객체는 배열처럼 요소들을 저장할수 있는 Object 인데 배열과는 다르게 Key-Value 가 Pair 방식으로 값이 저장되어진다.

 

기본적인 사용방법은 다음과 같다.

let myUser = {
  name: 'Leo',
  age: 25,
  address: '안양'
 };
 
 console.log(myUser); // {name: "Leo", age: 25, address: "안양"}

 

그리고 객체의 값을 사용하는 방법에는 두 가지가 존재하는데 Dot notation 과 Bracket notation 이 존재한다.

 

let myUser = {
  name: 'Leo',
  age: 25,
  address: '안양'
 };
 
 // 둘 다 값은 동일하다.
 console.log(myUser.name + myUser.age); // Dot notation -> Leo25
 console.log(myUser['name'] + myUser['age']); // Bracket notation -> Leo25 

 

둘이 비슷하면서도.. 달라보인다.. 그렇다면 두 경우의 차이는 무엇일까?

 

Dot notation 의 경우 키 값을 확실하게 알아야 가져올 수 있다. 키 값이 만약 변수라면 객체.변수 형태로 값을 가져올 수 없는 것이다.

그러나 Bracket notation 은 다르다. 객체[변수] 형태로 속성값을 변수에 넣어서 가져올 수 있다.  (이게 정말 은근 유용하다..)

 

let myUser = {
  name: 'Leo',
  age: 25,
  address: '안양'
 };
 
 // Bracket notation을 사용할 때 Key 값은 꼭 문자열 형태로 넣어주어야 한다.
let str = 'age';
console.log(myUser[str]); // 25

 

 

자바스크립트에서의 객체는 값을 추가 하고 삭제하는 방식도 간단하다.

 

 

let myUser = {
  name: 'Leo',
  age: 25,
  address: '안양'
 };

// 값 추가
myUser['isSmart'] = true; // myUser.isSmart = true 도 동일
console.log(myUser); // {name: "Leo", age: 25, address: "안양", isSmart: true}


// 값 삭제 key-value 쌍으로 지워짐
delete myUser.address;
console.log(myUser); // {name: "Leo", age: 25, isSmart: true}

 

 

이 객체는 for 문에서도 유용하게 사용할 수 있다.

 

객체의 각 값에 참조하기 위해서는 일단 두 가지 방법이 있다.

 

let myUser = {
  name: 'Leo',
  age: 25,
  address: '안양'
 };

for(let prop in myUser) {
  console.log(myUser[prop]);
}

// 순서대로 출력
// Leo
// 25
// 안양


// key, value 를 변수로 두고 접근
// Object.entries() 메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환합니다. 
// (for-in 루프가 다른점은 프로토 타입 체인의 속성도 열거한다는 점입니다).
// -MDN 참조- https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

for(let [key, value] of Object.entries(myUser)){
  console.log(`${key}: ${value}`);
}

// name: Leo
// age: 25
// address: 안양

 

그리고 마지막으로 .. 객체안에 해당하는 키 값이 들어있는지 확인하는 방법과 객체안에 키 값이 몇 개나 있는지 확인하는 방법이 있다!

 

let myUser = {
  name: 'Leo',
  age: 25,
  address: '안양'
 };
 
 console.log(Object.keys(myUser));
 
// (3) ["name", "age", "address"]
//  0: "name"
//  1: "age"
//  2: "address"
// length: 3
// __proto__: Array(0)

 console.log(Object.keys(myUser).length); // 3
 
 // Object.keys()
 // 이 Object.keys()메서드는 지정된 객체의 고유 한 열거 가능한 속성 이름 배열을 반환 하며 일반 루프와 동일한 순서로 반복됩니다.
 // -MDN 참조-
 // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
 
 
 // 객체 안에 값이 들었는지 확인하는 방법
 console.log('content' in myUser); // false
 console.log('name' in myUser); // true

 

이걸 이용하면 객체를 이용한 다양한 알고리즘 문제를 풀 수 있다 ! 

 

아직은 개념들이 막 헷갈린다 ㅠㅠ

앞으로 더 공부하고 복습해야겠다 ..