<혼자 공부하는 Javascript> 06. 객체

객체 자료형

• 숫자, 문자열, 불과 같은 기본 자료형을 제외하고, 속성과 메소드를 가질 수 있는 모든 자료를 객체형으로 볼 수 있다.
• 특히 함수와 배열도 객체로 분류하는데, 함수는 '실행이 가능한 객체'라는 특수성을 가지고 있으며, typeof 연산자로 확인 시 'Function'을 출력한다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 일급 객체(first-class object)라고 표현하기도 한다. 배열의 경우 typeof 연산자로 확인 시 'object'로 객체가 출력되며, 일반 객체인지 배열인지 확인할 때에는 Array.isArray() 메소드를 사용하여 확인할 수 있다.

기본 자료형

• 기본 자료형의 종류: 숫자(Number), 문자열(String), 불(Boolean)
• 자바스크립트의 자료형은 기본자료형과 객체 자료형으로 나뉜다. 함수, 배열 등 기본 자료형 외에는 모두 객체 자료형으로 분류할 수 있다.
• Javascript는 유연함의 대명사이니만큼, 기본 자료형이 객체 자료형이 될 수도 있다. 기본 자료형을 객체로 선언하는 방법과 일시적 승급 및 Prototype 메소드를 활용한 속성 할당하는 방법은 아래에서 더 살펴보고자 한다.

기본 자료형을 객체로 선언하기

• 기본 자료형을 객체로 선언할 때에는 숫자, 문자, 불 등으로 자료형을 변환하는 함수를 활용하여 '숫자 객체, 문자 객체, 불 객체'를 생성할 수 있다.

const 객체 = new 객체 자료형 이름()
1) const 10 = new Number(10);
2) const 안녕하세요 = new String('안녕하세요')
3) const true = Boolean(true)

새롭게 생성된 숫자, 문자열, 불 자료는 더이상 단순한 기본 자료형이 아니라 속성을 가질 수 있는 '객체 자료형'으로 볼 수 있다.

>const f = new Number(123)
undefined

>typeof f
"object"

> f.sample = 10
10

>f
Number {123, sample:10}

>f+0
123

>f.valueOf()
123

*new 키워드를 사용하지 않을 경우, 함수가 자료형 변환 기능으로 작동하므로, 객체 자료형으로 변환하는 경우 'new' 키워드를 반드시 사용해야한다.

기본 자료형의 일시적 승급

기본 자료형에서도 메소드를 사용할 수 있는데, 객체가 아닌 이유는 무엇일까?

• 자바스크립트는 동적인 언어이기 때문에, 기보 자료형의 속성과 메소드를 호출할 때 일시적으로 '객체'로 승급을 시키는 특성이 있다. 따라서, 일시적으로 속성이나 메소드를 사용할 수 있지만, '가질 수'는 없기 때문에 객체로 분류하지 않는다.

> const h = '안녕하세요'
undefined

> h.sample = 10
10 //일시적 승급에 의해 속성 추가 

> h.sample
undefined // 일시적 승급이 종료되었으므로, 속성 값은 이미 사라져있다.

.prototype 메소드

승급할 때 '일시적으로 입는 옷' 자체를 변경한다면, 속성과 메소드를 가질 수 있지 않을까?

• prototype 객체에 속성과 메소드를 추가하면, 모든 객체와 기본 자료형에서 해당 속성과 메소드를 사용할 수 있다.

> Number.prototype.sample = 10
10

> const i = 123
undefined

> i.sample
10

> 123.sample
Uncaught SyntaxError: Invalid or unexpected token

> Number(123).sample
10

> '안녕'.sample
undefined

문자열에서 원하는 문자가 포함되어있는지 확인하는 방법

> const k = [1,2,3]
undefined

//indexOf로 문자열의 인덱스값 리턴하기(존재하지 않는경우 -1 리턴
>k.indexOf(2)
1

>k.indexOf(100)
-1

응용: 문자열.indexOf(answkduf) >= 0 으로 true인지 false인지 (포함되었는지, 없는지) 판별 가능

응용2: 위 내용을 메소드로 담기
contain()

//문자열에 prototype 속성 할당
String.prototype.contain = function (data) {
  retrun this.indexOf(data) >= 0
}

//배열에 prototype 속성 할당
Array.prototype.contain = function (data) {
  return this.indexOf(data) >= 0
}

const a = '안녕하세요'
console.log('안녕 in 안녕하세요:', a.contain('안녕'))
console.log('없는데 in 안녕하세요:', a.contain('없는데'))

// 안녕 in 안녕하세요: true
// 없는데 in 안녕하세요: false

const b = [123,456,789]
console.log('123 in [123,456,789]:', b.contain(123))
console.log('0 in [123,456,789]:', b.contain(0))

//123 in [123,456,789]: true
//0 in [123,456,789]: false