[TIL] more about JS

This is what I learned:

▪️ 자바스크립트에서 사용하는 자료는 크게 기본자료형(primitives)/ 객체 자료형(object)로 구분할 수 있다.

 기본 자료형 - 숫자(Number), 문자열(String), 불(Boolean)

 객체 자료형 - 기본 자료형을 제외한 모두

• 속성과 메소드를 모두 가질 수 있음 (= 객체 ⇒ 배열도 객체가 될 수 있음)

> const a = [] //a라는 이름의 배열을 선언
undefined

> a.내맘대로속성 = 10 // 배열에 속성 지정
10

> a.sample // 배열이 속성을 가질 수 있다는 것을 알 수 있음
10

• 함수도 객체이다.

> function b () { } // 함수 b를 선언
undefined

> b.내맘대로속성 = 10 // 함수에 속성 지정
10

> b.sample // 함수가 속성을 가질 수 있다는 것을 알 수 있음
10

• 기본 자료형에 속성과 메소드 추가해보기

> const c = 10 // 기본 자료형인 숫자로 만들어 봄 시도
undefined

> c.sample = 20 // c.sample = 20이 들어간 것처럼 보이지만
20

> c.sample // 실제로 출력해봤을때 제대로 된 값이 나오지 않음
undefined 

💡 짚고 넘어가기

• 기본 자료형: 속성과 메소드 가질 수 X
• 객체 자료형 : 속성과 메소드 가질 수 O

• typrof 연산자 사용해서 배열의 자료형을 확인해 볼 수 있음

이때 어떤 대상이 배열인지 확인하려면 “Array.isArray()” 메소드를 사용함

> const a = []
undefined

>typeof(a)
"object"

> Array.isArray(a)
true

> Array.isArray(10)
false

> Array.isArray({})
false

• 함수는 ‘실행이 가능한 객체’라는 특이한 자료로 typeof 연산자를 사용해 자료형을 확인하면 “function”을 출력한다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급객체 (first-class object)에 속한다고 표현하기도 한다.

 기본 자료형 (객체가 아니므로 속성이나 메소드 가질 수 없음/ 위 설명)

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

— 이전에 자료형변환을 할 때 Number(), Boolean(), String() 함수를 사용했는데, 이 앞에 new 를 붙여주게 되면 기본 자료형을 넣었을 때 객체로 만들게 됨. (ex. new Number())

> const a = new Number(10)
undefined

> const b = new String('문자열')
undefined

> const c = new Boolean(true)
undefined

> typeof(a) + ' ' + typeof(b) + ' ' + typeof(c)
"object object object" // typeof(a)typeof(b)typeof(c) 모두 object로 뜸

//new Number()을 사용해서 숫자를 생성하면 숫자와 관련된 연산자도 모두 활용 가능,속성과 메소드 활용 가능

> const f new Number(273)
undefined

> typeof f
"object"

> f.sample = 10
10

> f.sample // 속성을 가질 수 있음
10 

> f
Number {273, sample: 10} //콘솔에서 단순하게 f를 출력하면 객체형태로 출력됨

//숫자와 똑같이 활용할 수 있고 valueOf()메소드를 사용해 값 또한 추출 가능

> f + 0 
273

> f.valueOf()
273 

⚠️ WARNING ⚠️ : new 키워드를 사용하지 않을 시, 함수가 자료형 변환 기능으로 작동됨

> const g = Number(273)
undefined

> typeOf g
"number" // 객체 아님

 기본 자료형의 일시적 승급

문자열 자료형 등을 생성하고 뒤에 온점을 찍으면 다음과 같이 자동 완성 기능으로 메소드들이 나오는 것을 알 수 있다.

또한 실행도 가능하다.

> '안녕하세요'.anchor('greeting')
"<a name="greeting">안녕하세요</a>"

> '안녕하세요'.bold()
"<b>안녕하세요</b>"

앞에서 설명했듯이 기본 자료형은 속성과 메소드를 가질 수 없는데 이와 같이 가지고 있는 이유는?

자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때 (기본 자료형 뒤에 온점을 찍고 무언가 하려고 하면) 일시적으로 기본 자료형을 객체로 승급시킨다. ⇒ 속성과 메소드를 사용 가능

BUT, 이러한 승급은 일시적!

sample 속성에 기본 자료형이 추가되는것 처럼 보이지만 실제로는 추가되지 않은 현상이 일어남

> const h = 'Hello'
undefined

> h.sample = 10 // 일시적으로 객체가 승급되어 sample 속성 추가 가능
10

> h.sample // 일시적으로 승급된 것이라 추가했던 sample 속성은 이미 사라지는 현상 발생
undefined

이는 승급때 잠시 속성이라는 새 옷을 입었다가 바로 뺏긴다고 생각하면 이해하기 쉽다.

따라서 기본 자료형의 경우 속성과 메소드를 사용할 수는 있지만, 속성과 메소드를 추가로 가질 수는 없다고 생각하면 된다.

그렇다면 승급 때 일시적으로 입는 새 옷 자체를 변경하면 어떻게 될까?

아래 프로토타입(prototype)으로 메소드 추가하기에서 알아보자.

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

• 어떤 객체의 prototype이라는 속성이 바로 객체 전용 옷(틀) 이라고 할 수 있다
• prototype 객체에 속성과 메소드를 추가하면 모든 객체(와 기본 자료형)에서 해당 속성과 메소드를 사용할 수 있다

객체 자료형 이름.prototype.메소드 이름 = function () { 

} // 객체 자료형 이름 = Number , String, Boolean

[example]

> Number.prototype.sample = 10 // Number.prototype에 sample이라는 속성 추가하면 
10

> const i = 273 
undefined

> i.sample //sample 속성을 갖고 있음
10

몇가지 예를 살펴보자면,

최신 자바스크립트에는 제곱 연산자(**)가 있다. 이를 사용하면 아래와 같이 숫자를 n제곱할 수 있다

이를 활용해 숫자 자료형에 n제곱하는 메소드를 추가해보자면,

코드에서 this.valueOf()로 숫자 값을 꺼냈다.그냥 this ** n 을 해도 아무 문제없이 계산된다.

하지만 객체 내부에서 값을 꺼내 쓰는 것임을 명확하게 하기 위해서는 valueOf() 메소드를 사용하는 것이 일반적이다.

이렇게 프로토타입에 메소드를 추가하면 이를 활용해서 숫자를 제곱할 수 있다.

함수를 생성 할 때 기본 매개변수도 사용했다.

여기서 기본 매개변수란 ->function (n=2) -> n = 2 === let n = 2 같은 말이다.

[example]

• 자바스크립트에서 문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때는 indexOf() 메소드를 사용한다.
• indexOf() 메소드는 문자열에 포함되어있는 문자가 몇번째 index에 있는지 알려주는 메소드이다. 문자열에 문자가 없을때 -1을 출력함.

자바스크립트에는 어떠한 문자열 내부에 어떠한 문자열이 포함되어 있는지를 알수 있는 메소드가 따로 없다. 그래서 어떠한 문자열 내부에 어떠한 문자열이 포함되어 있는지를 알수있는 방법은 indexOf() 메소드를 활용을 해서

문자열.indexOf('찾을 문자열') >= 0로 알아볼 수 있다.

문자열의 indexOf() 메소드를 사용하는 예를 알아보자.

프로토타입(prototype)이란 일시적으로 승급이 일어나는 옷이며 여기다가 메소드를 추가해서 기본자료형이 추가적인 메소드를 활용할 수 있게 하는 녀석이다! 라는 것을 꼭 기억해두자

 Number 객체

🔻 toFixed()

• Number 객체에서 자주 사용하는 메소드 toFixed() 이다
• 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용한다

소수점을 가진 숫자.toFixed(나타낼 소수점자리수)

[example]

• 출력된 자료형의 타입은 'string'이다

  isNaN() , isFinite()

🔻 isNaN()

• NaN(Not a Number) -> 자료형은 숫자인데 값이 숫자가 아닌것

어떤 숫자가 NaN(Not a Number)인지 또는 infinity(무한)인지 확인할 때는

Number.isNaN()

Number.isFinite()

메소드를 사용한다.

이 메소드들은 숫자 자료형 뒤에 온점을 찍고 사용하는 것이 아니라 Number 뒤에 점을 찍고 사용한다.

우선 isNaN() 을 알아본다.

🔖 isOO() 로 시작되는 메소드들은 true 또는 false를 리턴함, 나중에 이러한 메소드를 보면 이게 무엇을 리턴하는지 예상할 수 있다.

위 같이 NaN과 비교해서는 NaN인지 확인할 수 없다.그래서 NaN인지 확인할 때는isNaN() 메소드를 써준다.

> const m = Number('숫자로 변환할 수 없는 경우')
undefined

> m // NaN을 생성한다
NaN

> m === NaN // NaN과 비교해서는 NaN인지 확인할 수 없음
false 

> Number.isNaN(m)
true

🔻 isFinite()

• 10 / 0 은 Infinity로 나온다.
• Infinity는 무한대 숫자를 의미한다.
• 자바스크립트가 내부적으로 표현할 수 없을만큼 큰 숫자를 Infinity라고 표현한다.
• isFinite() 는 말그대로 유한한가? 라는 뜻이기때문에 유한한 숫자인지 확인하는 메소드이다.

> const n = 10 / 0 
undefined
> n
Infinity // 양의 무한대를 생성함

> const o = -10 / 0 
undefined
> o 
-Infinity // 음의 무한대를 생성함

// isFinite(유한한 숫자인가?)가 false로 나옴
> Number.isFinite(n)
false

> Number.isFinite(o)
false

// 일반적인 숫자는 셀 수 있으므로 true가 나옴
> Number.isFinite(1)
true

> Number.isFinite(10)
true

무한대 숫자는 양의 무한대 음의 무한대 숫자로 나뉜다.

isFinite()메소드가 false인 경우는 양의 무한대 숫자와 음의 무한대 숫자 2가지 경우이다.

그리고 Infinity와 직접 비교해봐도 확인할 수 있다.

> a === Infinity
true

> b === -Infinity
true