JS 문법 보충 - 객체

Class: 제로베이스
Created: December 6, 2022 6:39 PM
Type: Javascript
강의 명: 초심자도 빈틈없이 학습하는 자바스크립트

객체

래퍼 객체

• 원시 타입을 객체화 한 것
• 임시로 객체를 생성하는 것
• 원시 타입
  • string, number, boolean, undefined, null

string, number type 같은 원시타입들도 메서드들을 가지며, 마치 객체인것 처럼 이용하곤 한다. 메서드를 가진다는 것은 객체의 성격을 가질 때만 가능 한 것인데 , 어떻게 string과 number가 객체인 것처럼 메서드를 가질 수 있게 되는 것일까?

래퍼객체(Wrapper Object)이기 때문이다.

래퍼객체는 총 3가지 이며 이들은 객체형(참조형) 데이터 타입의 한 종류이다.

• Number
• String
• Boolean

예 )

var str = 'coding';
console.log(str.length);        // 6
console.log(str.charAt(0));     // "C"

원래라면 ‘coding’이라는 문자열의 값을 가지고 있는 str의 데이터타입은 string, 즉 원시형데이터타입이기 때문에 객체와 같이 메서드를 가질 수 없다.

하지만 자바스크립트는 숫자형(number), 문자열(string), 조건형(boolean) 에 대해서 일시적으로 ‘’객체’’ 화가 되는 것을 허용 하며, 그 순간 숫자,문자,조건도 객체처럼 메서드를 쓸수 있는 것이다.

위에서 1.을 보면, str은 문자열이다.

하지만 2.에서 console.log(str.length); 를 입력하며 객체의 고유 메서드인 length를 이용하려 할 때, 1.과 2. 사이에서는 마치,

str = new String(‘coding’) 이라는 선언이 일시적으로 생성되어 str을 객체화 시키게 된다.

이로써 new String(‘coding’) 을 통해 객체화 된 str은 length라는 메서드를 이용할 수 있게 되는 것이다.

이렇게 , 원시타입을 객체화 시켜주는 객체형데이터 타입을 래퍼객체라고 하며, 그 종류는 Number, String, Boolean 이 있다.

래퍼 객체 변화 과정

1. 원시 타입 해당하는 객체 생성
2. 생성된 객체의 함수 호출
3. 함수 처리
4. 생성된 객체 소멸
5. 원시 타입만 존재

객체 내 접근

점 표기법

let info = {
  age : 20,
  name : 'kody',
  weight : 60,
  interest : ['music', 'sports'],
  desc : function() {
    console.log('it`s my info')
  }
}
console.log(info.age); // 20
console.log(info.interest[0]); // music
info.desc(); // it`s my info

대괄호 표기법

console.log(info['age']) // 20
console.log(info['interest'][1]) // sports

객체 프로퍼티 열거

배열 열거	프로퍼티 열거
배열 순회	객체 순회
순서 보장	순서 미보장
length, index 있음	length, index 없음

| For 문, for-in 문, forEach, Map,
filter, reduce | Object.keys( ), for-in 문,
Objext.values( ), Objext.entries( ) |

Object.keys( ) - 객체의 key 값을 배열로 반환

let info = {
  age : 20,
  name : 'kody',
  weight : 60,
  interest : ['music', 'sports'],
  desc : function() {
    console.log('it`s my info')
  }
}
console.log(Object.keys(info)) 
// [ 'age', 'name', 'weight', 'interest', 'desc' ]

Object.values( ) - 객체의 value 값을 배열로 변환

let info = {
  age : 20,
  name : 'kody',
  weight : 60,
  interest : ['music', 'sports'],
  desc : function() {
    console.log('it`s my info')
  }
}
console.log(Object.values(info)) 
// [ 20, 'kody', 60, [ 'music', 'sports' ], [Function: desc] ]

Object.entries( ) - 객체의 [key , value] 값을 배열로 변환

console.log(Object.entries(info)) 
// [
//   [ 'age', 20 ],
//   [ 'name', 'kody' ],
//   [ 'weight', 60 ],
//   [ 'interest', [ 'music', 'sports' ] ],
//   [ 'desc', [Function: desc] ]
// ]

for … in 문

let info = {
  age : 20,
  name : 'kody',
  weight : 60,
  interest : ['music', 'sports'],
  desc : function() {
    console.log('it`s my info')
  }
}

for(let i in info) {
  console.log(i) 
  // age name weight interest desc
  // 객체 info의 key 값을 문자열로 반환
}

객체 프로퍼티 조작

값 재할당 / 추가

let info = {
  age : 20,
  name : 'kody',
  weight : 60,
  interest : ['music', 'sports'],
  desc : function() {
    console.log('it`s my info')
  }
}
// 값 재할당 
info.weight = 70;
info["name"] = 'james'
console.log(info.weight) // 70
console.log(info.name) // james

// 값 추가
info.height = 180;
info['interest'].push('singing')
console.log(info.height) // 180
console.log(info.interest) // [ 'music', 'sports', 'singing' ]

// 값 삭제
delete info.age
console.log(info.age) // undefined

옵셔널 체이닝

옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.

?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고  undefined를 반환.

옵셔널 체이닝 문법 ?.은 세 가지 형태로 사용할 수 있습니다.

1. obj?.prop – obj가 존재하면 obj.prop을 반환하고, 그렇지 않으면 undefined를 반환함
2. obj?.[prop] – obj가 존재하면 obj[prop]을 반환하고, 그렇지 않으면 undefined를 반환함
3. obj?.method() – obj가 존재하면 obj.method()를 호출하고, 그렇지 않으면 undefined를 반환함

여러 예시를 통해 살펴보았듯이 옵셔널 체이닝 문법은 꽤 직관적이고 사용하기도 쉽습니다. ?. 왼쪽 평가 대상이 null이나 undefined인지 확인하고 null이나 undefined가 아니라면 평가를 계속 진행합니다.

?.를 계속 연결해서 체인을 만들면 중첩 프로퍼티들에 안전하게 접근할 수 있습니다.

?.은 ?.왼쪽 평가대상이 없어도 괜찮은 경우에만 선택적으로 사용해야 합니다.

꼭 있어야 하는 값인데 없는 경우에 ?.을 사용하면 프로그래밍 에러를 쉽게 찾을 수 없으므로 이런 상황을 만들지 말도록 합시다.