[ch3.2] 자바스크립트의 객체 타입

Maru·2022년 7월 20일
0

[인사이드 자바스크립트] JS 공부 기록

목록 보기
4/5
post-thumbnail

이 글은 저서 [인사이드 자바스크립트]를 공부하고자 작성되었으며, 핵심 개념과 새롭게 알게 된 내용을 위주로 기록하였습니다.

이 장에서 다루는 내용

  • 참조 데이터 타입 : 객체
  • 주의해야 할 연산자

3.2 JS 참조 타입 (객체 타입)

기본 타입을 제외한 모든 값은 객체다.
따라서 배열, 함수, 정규표현식 등 모두 js 객체로 표현된다.

객체는 'key : value' 형태의 프로퍼티를 저장하는 컨테이너로서, 해시라는 자료구조와 상당히 유사하다.

기본 타입 vs 객체 타입

  • 기본 타입은 하나의 값을 가진다

  • 참조 타입(객체)는 기본 타입의 값을 포함하거나 다른 객체를 가리킬 수도 있다.

메서드란?

프로퍼티 성질에 따라 객체의 프로퍼티는 함수로 포함할 수 있으며 js에선 이러한 프로퍼티를 메서드라고 부른다.

  • 정규표현식이란? : 문자열 처리 방식 중 하나.

3.2.1 객체 생성

자바스크립트에서 객체 생성하는 방법 3가지

  1. 기본 제공 Object() 객체 생성자 함수 사용
  2. 객체 리터럴 사용
  3. 생성자 함수 이용

1. Object 생성자 함수 사용

js는 객체 생성 시 내장 Object() 생성자 함수를 제공한다.
Object()를 사용해 빈 객체를 생성하고, 프로퍼티를 추가할 수 있다.

2. 객체 리터럴

  • 리터럴 = 표기법
  • 객체 리터럴 = 객체 생성하는 표기법

간단한 표기법만으로도 객체를 생성할 수 있는 js의 강력한 문법
중괄호 { }를 이용해 객체를 생성

  • 아무것도 안적으면 빈 객체가 생성
  • { } 안에 이름:값 을 표기하면 해당 프로퍼티가 추가된 객체 생성 가능
  • 프로퍼티 이름으로는 문자열이나 숫자가 올 수 있다.
  • 프로퍼티 값으로는 어떤 표현식도 가능. 이 값이 함수일 경우 이러한 프로퍼티를 메서드라고 부른다.

3. 생성자 함수

js는 함수를 이용해서도 객체를 생성할 수 있다.
객체를 생성하는 함수를 생성자 함수라고 한다.

이는 4장에서 자세히 살펴보자
-> 4장 링크 :


3.2.2 객체 읽기/쓰기/갱신

객체는 새로운 값을 가진 프로퍼티를 생성하고, 그 프로퍼티에 접근해 해당 값을 읽거나 갱신할 수 있다.

객체 프로퍼티 접근 방법 2가지

1) 대괄호 [ ] 표기법

접근 하려는 객체 프로퍼티를 "문자열" 형태로 만든 다음 대괄호로 둘러 싼다
주의할 점 : 반드시 프로퍼티 이름을 문자열 형태로 만들어야함
모든 js 객체에서 호출 가능한 toString()이라는 메서드를 자동으로 호출해 이를 문자열로 바꾸려는 시도를 한다. 


var foo = {
name : 'foo'
}

console.log(foo['name']) // 'foo'
console.log(foo[name]) //
  • 대괄호 표기법만 사용해야하는 경우
    : 프로퍼티가 표현식이거나 예약어인 경우

-를 빼기 연산자로 계산하는 표현식으로 취급했기 떄문에 NaN 출력
ex) 


foo['full-name'] = 'foo bar' ;
console.log(foo.full-name) // Nan 값 출력

NaN (Not a Number) 값

수치 연산을 해서 정상적인 값을 얻지 못했을 때 출력
1 - 'hello' 와 같은 연산 결과가 NaN이다.

2) 마침표 . 표기법


var foo = {
name : 'foo'
}

console.log(foo.name) // 'foo'
console.log(foo.nickname) // undefined

객체 프로퍼티 동적 생성

js 객체는 생성 된 후에도 동적으로 프로퍼티를 생성해 해당 객체에 추가할 수 있다.

js 객체의 프로퍼티에 값을 할당할 때, 프로퍼티가 이미 있다면 해당 값을 갱신. 만약 없다면 새로운 프로퍼티를 동적으로 생성한 후 값을 할당한다.


3.2.3 for in 문과 객체 프로퍼티 출력

for in : 객체에 포함된 모든 프로퍼티에 대해 루프를 수행할 수 있다

var foo = {

  name:'foo',
  age:30
};

var prop;
for (prop in foo){
console.log(prop, foo[prop] 
}

출력 결과 :
name foo
age 30

  • 이때 [] 안에 들어가는 prop을 'prop'으로 쓰지 않아도 되는 이유는
    프로퍼티가 할당된 prop 변수 자체가 String 타입이기 때문이다.
    그렇기 때문에 당연히 foo.prop으로도 작성할 수 없다.

3.2.4 객체 프로퍼티 삭제

js에선 delete를 사용해 객체 프로퍼티를 삭제할 수 있다.

  • 주의 할 점 : 프로퍼티를 삭제할 뿐, 객체 자체는 삭제 할 수 없다.
var foo = {
  name:'foo',
  age:30
};

delete foo.name; 
console.log(foo.name) // undefine

delete foo;
console.log(foo); // foo

3.3 참조 타입의 특성

객체는 js에서 참조 타입이라고 불린다. 객체의 모든 연산이 실제값이 아닌, 참조값으로 처리되기 때문이다.

예제 3-9

var foo = {
  name:'foo',
  age:30
};

  • obj 변수는 객체 자체를 저장하는 것이 아니라, 생성된 객체를 가리키는 참조값을 저장하고 있다

  • 두 변수가 모두 동일한 객체를 참조하고 있어, 한 변수에서 값을 변경하면 다른 변수에서도 동일하게 출력된다.


3.3.1 객체 비교

동등 연산자 (==)를 사용해 객체를 비교할 때, 객체의 프로퍼티 값이 아닌 참조값을 비교하게 된다.

  • 기본 타입의 경우 :
    기본 타입의 변수는 동등 연산자(==)를 사용해 비교하면 값을 비교한다.

  • 객체 :
    같은 형태의 프로퍼티 값을 가졌더라도, 동등 연산자 (==)를 사용해 비교하면 참조값이 같아야 true가 된다


3.3.2 참조에 의한 함수 호출 방식

  • 기본 타입과 참조 타입은 함수 호출 방식이 다른다.

1) 기본 타입 : 값에 의한 호출

함수를 호출할 때 인자로 기본 타입의 값을 넘길 경우, 호출된 함수의 매개변수로 복사된 값이 전달.
때문에 함수 내부에서 매개변수를 이용해 값을 변경해도, 실제로 호출된 변수 값이 변경되지는 않는다.

2) 참조 타입 : 참조에 의한 호출

함수의 인자로 참조 타입인 객체를 전달 할 경우, 객체의 프로퍼티 값이 복사되지 않고, 참조값이 그대로 함수 내부로 전달된다.
그래서 실제 객체의 값을 변경할 수 있는 것이다.


3.4 프로토타입

js의 모든 개게는 자신의 부모 역할을 하는 객체와 연결되어있다.

이것은 마치 객체지향의 상속 개념과 같이 부모 객체의 프로퍼티를 자신의 것 처럼 쓸 수 있는 것 같은 특징이 있다
이러한 부모 객체를 "프로토타입 객체" 또는 "프로토타입" 이라고 부른다.

예제 3-12

var foo = {
  name:'foo',
  age:30
};

console.dir(foo)

console.log vs console.dir

foo 객체의 프로토타입에 toString() 메서드가 이미 정의 되어있고, foo 객체가 상속처럼 toString() 메서드를 호출 한 것이다.

foo 객체에는 proto 프로퍼티가 있다는 것을 확인할 수 있다
foo 객체의 부모인 프로토타입 객체를 가리킨다.

ECMAScript 명세서에서는 js의 모든 객체는 자신의 프로토타입을 가리키는 [[Proptotype]]라는 숨겨진 프로퍼티를 가진다고 설명하고 있다.

크롬 프라우저에선 proto가 바로 이 숨겨진 [[Prototype]] 프로퍼티를 의미한다.

모든 객체의 프로토타입은 js의 룰에 따라 객체를 생성할 때 결정된다.
-> 4.5 프로토타입 체이닝 url

객체 리터럴 방식으로 생성된 객체는 Object.prototype 객체가 프로토타입 객체가 된다.

profile
Maru
함께 일하고 싶은 개발자
이전 포스트

[ch3.5] 자바스크립트의 배열

다음 포스트

[ch3.7] 자바스크립트의 연산자

0개의 댓글