06-2 자바스크립트 객체의 속성과 메소드

onezeun·2022년 1월 27일
0

기본 자료형과 객체 자료형

# 기본 자료형(primitives) → 스택에 값을 저장

속성과 메서드를 가질 수 없음

  • 숫자
  • 문자

# 객체 자료형(object) → 스택과 힙을 연결

속성과 메서드를 가질 수 있음

  • 함수
  • 배열
  • 객체
  • 등등

😜 일급 객체 꼭 기억하기

함수의 자료형

> function b () {}
undefined
> typeof b
"function"

자바스크립트에서 함수는 객체의 특성을 완벽하게 가지고 있어서
일급 객체 (first-class dbject)라고도 함

함수를 객체처럼 쓰는 언어는 "함수를 일급 객체로 다룬다"라고 표현합니당


배열 확인 메소드
typeof 연산자를 사용해 배열의 자료형을 확인하면 object라고 객체가 출력된다. 배열인지 확인하려면 Array.isArray()메소드를 사용

const a = []
> type of a
"object"
> Array.isArray(a)
true

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

실질적으로 사용하는 내용은 아니여서 기억은 안해도 됨
const 객체 = new 객체 자료형 이름()

const a = new Number(10)
const b = new String('문자열')
const c = new Boolean(true)

typeof(a) + ' ' + typeof(b) + ' ' + typeof(c)

실행 결과
'object object object'

→ 객체이기 때문에 속성을 가질 수 있고 메소드를 사용하여 값을 추출할 수도 있음

객체 자료형의 일시적 승급

🤔원래 기본 자료형은 속성과 메소드를 가질 수 없지만..

자바스크립트는 사용의 편리성을 위해 기본 자료형 뒤에 점을 찍고 속성과 메서드를 쓰면 일시적으로 객체로 변경해서 속성과 메소드를 쓸 수 있게 해준다!

따라서 속성과 메소드를 사용할 수는 있지만, 추가로 가질수는 없다고 생각하면 됨

프로토타입으로 메소드 추가하기

prototype 객체

객체의 틀을 의미하며, 이곳에 속성과 메소드를 추가하면 해당 객체 전체에서 사용할 수 있음
객체 자료형 이름.prototype.메소드 이름 = function() {}

더 자세한 설명

자바스크립트의 모든 객체는 프로토타입(prototype)이라는 객체를 가지고 있습니다. 
모든 객체는 그들의 프로토타입으로부터 프로퍼티와 메소드를 상속받습니다. 
이처럼 자바스크립트의 모든 객체는 최소한 하나 이상의 다른 객체로부터 상속을 받으며, 
이때 상속되는 정보를 제공하는 객체를 프로토타입(prototype)이라고 합니다.

String.prototype.value = 10 // 문자열 자료형에 value 속성 추가

const a = '문자열'
console.log(a.value)

실행 결과
10

자세하게 설명하기 위해서는 객체와 객체 공유모델이라는 걸 알아야 하는데, 이후에 배우는 클래스의 등장으로 인해 프로토타입이 자바스크립트에서 설 자리를 많이 잃었다 . .

🤗 프로토타입에 무언가를 추가하면 기본자료형에 추가적인 속성을 집어 넣을 수 있다. 까지만 기억하면 좋음


예제 : 숫자 자료형에 n제곱하는 메소드를 추가해보기

// 숫자 자료형에 power() 메소드 추가
// n = 2 → 기본 매개변수 (아무것도 입력 안했을 경우 제곱)
Number.prototype.power = function (n = 2) {
  // ** : 제곱 연산자
  return this.valueOf() ** n
}

// Number 객체의 power() 메소드 사용
const a = 12
console.log('a.power():', a.power())   // 12²
console.log('a.power(3):', a.power(3)) // 12³
console.log('a.power(4):', a.power(4)) // 12⁴

실행 결과
a.power(): 144
a.power(3): 1728
a.power(4): 20736

몰라서 찾아본 valueOf() 메소드 . . . .

valueOf() 메소드는 특정 객체의 원시 타입(primitive type)의 값을 반환합니다.

자바스크립트에서는 원시 타입의 값이 기대되는 곳에 객체가 사용되면, 내부적으로 이 메소드를 호출하여 처리합니다.

만약 어떤 객체가 원시 타입의 값을 가지고 있지 않다면, 이 메소드는 객체 자신을 반환합니다.

출처 : http://www.tcpschool.com/javascript/js_object_propertyMethod

원시타입과 객체타입

원시 타입(primitive type)
1. 숫자(number) 2. 문자열(string) 3. 불리언(boolean) 4. 심볼(symbol) : ECMAScript 6부터 제공됨 5. undefined

객체 타입(object type)
6. 객체(object)


실용적인 예제
프로토 타입으로 문자열 메소드 추가하기

indexOf() 메소드 : 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 사용

indexOf()
문자열 내부에서 특정 문자열을 찾아 그 인덱스를 리턴하는 메소드


1. 문자열 내부에 특정 문자열이 있으면 0 이상의 정수를 리턴
2. 문자열을 못찾으면 -1을 리턴

→1 또는 2를 사용하여 조건을 만들면 문자열 내부에 특정 문자열이 있는지 확인 가능


String.prototype.contain = function (다른문자열) {
  return this.indexOf(다른문자열) >= 0
}

const a = '문자열'
console.log(`a.contain('문자'): ${a.contain('문자')}`)

문자열 안에 문자가 포함되어있는지?

실행 결과
a.contain('문자'): true


프로토타입 이해 안가서 한시간 넘게 이것 저것 찾아봤ㄷ ㅏ...
하지만 . . . 요즘엔 많이 사용하지 않는다고 한ㄷ ㅏ.. . .

profile
엉망진창

0개의 댓글