자바스크립트에서 사용하는 자료는 크게 기본자료형(primitives)과 객체자료형(object)으로 구분할 수 있다.
앞서 공부했던 기본자료형 복합자료형 부분에서 다루었던 내용이지만 한번더 다뤄본다.
- 기본 자료형 -> 스택에 값을 저장
숫자 , 문자열 , 불- 객체 자료형 -> 스택과 힙을 연결(래퍼런스한다)
함수 , 배열 , 객체 , 등등~
객체 자료형들은 스택과 힙을 연결하며 자신의 크기(저장공간)을 늘릴수 있기때문에 속성과 메서드를 가질수 있는 반면에,
기본자료형은 값 이외엔 아무것도 갖지 않게된다.
아래 코드의 실행결과를 보면 쉽게 이해할 수 있다.
배열과 함수는 둘다 객체자료형이므로 속성과 메서드를 가질 수 있어서 출력결과가 나오고,
기본 자료형인 const c = 10; 은 c.age = 20를 하였을때 속성이 추가된 것처럼 보이지만
console.log(c.age) 를 할경우 undefined 가 나온다.
이와 같이 일시적으로 보이는 현상을 ->
기본자료형의 일시적 승급 이라고한다.
뒤에 설명 하겠다.
ex) ->
- 기본 자료형 -> 속성과 메서드 가질 수 없음
- 객체 자료형 -> 속성과 메서드를 가질 수 있음
유연함의 대명사인 자바스크립트는 기본 자료형이 객체 자료형이 될 수도 있다.
어떤 경우에 그렇게 되는지도 뒤에 알아보자.
Array.isArray()
typeof() 키워드 연산자를 사용하면 타입을 알수있지만, 배열을 넣었을시 객체자료형이므로 object라고
나온다.
배열인지 알수 있는 메서드로 Array.isArray()를 사용해서 확인해본다.
일급 객체
물론 함수도 객체자료형이지만 typeof(함수)를 출력해보면 'function' 이라고는 나온다.
이렇게 함수를 객체로 다루고,'함수를 변수에 넣는다'라는 개념자체가 요즘에는 모든 언어가 다 갖고 있는 개념이지만 옛날에는 특별했다.
그래서 이 개념에 특별한 이름을 붙여서 특별하게 취급을 해주는데 자바스크립트에서 함수를
일급 객체(first-class object)다 라고 표현한다.
new 키워드 사용하여 기본 자료형을 객체로 선언하기
자바스크립트는 기본 자료형을 객체로 선언하는 방법을 제공한다.
이전에 살펴보았던 숫자, 문자열, 불 등으로 자료형을 변환하는 함수(Number(), String(), Boolean())는 아래와 같이 사용한다.
const 객체 = new 객체자료형이름()
이렇게 new 키워드를 사용하면 숫자 객체, 문자열 객체, 불 객체 를 생성할 수 있다.
new 키워드를 사용하지 않으면 함수가 우리가 알고있던 자료형 변환 기능으로 작동한다.
new 키워드를 쓰지않은 그냥 자료형변환 기능을 할때
->
new 키워드를 사용하여 객체로 선언했을때
->
기본 자료형의 일시적 승급
문자열의 length속성을 사용해본 적이 있으므로 위에서 공부하면서 약간 이상하다고 생각할 수 있었다.
또한 문자열 자료형 등을 생성하고 뒤에 온점을 찍으면 자동완성기능으로 메소드들이 나온다.
심지어 실행도 가능하다.
기본 자료형은 속성과 메소드를 가질수 없는데 어떻게 사용했을까?
자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때(기본 자료형 뒤에 온점을 찍고 무언가 하려고하면) 일시적을 기본 자료형을 객체로 승급시킨다.
그래서 속성과 메소드를 사용할 수 있는 것이다.
이러한 승급은 일시적이다.
따라서 글의 상단에 설명했던
const c = 10; c.age = 20; 처럼 속성에 기본 자료형이 추가되는 것처럼 보였지만, 실제로는 추가되지 않는 현상이 일어난 것이다.
승급때 잠시 속성이라는 새 옷을 입었다가 바로 뺏긴다고 생각하면 이해하기 쉽다.
따라서 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다고 생각하면 된다.
그렇다면 승급 때 일시적으로 입는 새 옷 자체를 변경하면 어떻게 될까???
아래 프로토타입(prototype)으로 메소드 추가하기에서 알아보자.
프로토타입(prototype)으로 메소드 추가하기
숫자 객체 전체에 어떤 속성과 메소드를 추가할 수 있다면 기본 자료형 숫자도 속성과 메소드를 사용할 수 있다.
어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀)이라고 할 수 있다.
prototype객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있다.
객체 자료형 이름.prototype.메소드 이름 = function () {}
객체 자료형 이름 = Number , String, Boolean
한번 객체 자료형 이름의 prototype 객체안에 메소드를 추가해보자.
추가적으로 아래처럼 Number.prototype.example = 10;
const a = 123 이라는 코드를 쓰면,
숫자 객체 안의 prototype객체안에 example = 10 이라는 속성을 추가했다.
그리고 const a = 123 은 typeof a -> 'number'이기때문에
a.example -> 10이 나오게된다.
몇가지 예를 살펴보자.
최신 자바스크립트에는 제곱 연산자(**)가 있다.
이를 사용하면 아래와같이 숫자를 n제곱할 수 있다.
이를 활용해서 숫자 자료형에 n제곱하는 메소드를 추가해본다.
코드에서 this.valueOf()로 숫자 값을 꺼냈다.
그냥 this ** n 을 해도 아무 문제없이 계산된다.
하지만 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해서는 valueOf() 메소드를 사용하는 것이 일반적이다.
이렇게 프로토타입에 메소드를 추가하면 이를 활용해서 숫자를 제곱할 수 있다.
함수를 생성 할때 기본 매개변수도 사용했다.
여기서 기본 매개변수란 ->
function (n=2) -> n = 2 === let n = 2 같은 말이다.
조금 더 실용적인 예제를 살펴본다.
자바스크립트에서 문자열 내부에 어떤 문자열이 있는지,
배열 내부에 어떤 자료가 있는지 확인할 때는 indexOf() 메소드를 사용한다.
indexOf() 메소드는 문자열에 포함되어있는 문자가 몇번째 index에 있는지 알려주는 메소드이다.
문자열에 문자가 없을때 -1을 출력함.
자바스크립트에는 어떠한 문자열 내부에 어떠한 문자열이 포함되어있는지를 알수 있는 메소드가 따로 없다.
그래서 어떠한 문자열 내부에 어떠한 문자열이 포함되어있는지를 알수있는 방법은 indexOf() 메소드를 활용을 해서
문자열.indexOf('찾을 문자열') >= 0
로 알아볼 수 있다.
문자열의 indexOf() 메소드를 사용하는 예를 알아보자.
프로토타입(prototype)이란 일시적으로 승급이 일어나는 옷이며 여기다가 메소드를 추가해서 기본자료형이 추가적인 메소드를 활용할 수 있게 하는 녀석이다!
라는 것을 꼭 기억해두자.
