[TIL] - more about JS

Soo·2022년 11월 30일

This is what I learned today:

프로토타입(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제곱할 수 있다

Untitled

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

Untitled

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

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

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

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

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

[example]

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

Untitled

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

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

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

Untitled

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

Number 객체

🔻 toFixed()

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

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

[example]

Untitled

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

📌 isNaN() , isFinite()

🔻 isNaN()

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

Untitled

어떤 숫자가 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와 직접 비교해봐도 확인할 수 있다.

String 객체

🔻 trim()

페이스북, 트위터, 카카오톡과 같은 소셜 네트워크 서비스를 사용하다 보면 문자열 앞뒤에 공백을 넣고 댓글을 입력하거나 메세지를 보냈는데, 앞뒤 공백이 사라진 상태로 전송된 경험이 있을것이다.

Untitled

이는 사용자의 실수 또는 악의적인 목적으로 문자열 앞뒤에 공백이 추가되는 경우가 많으므로 이런 것들을 미리 제거하는 것이다.
이러한 기능을 trim 이라고 부른다.
문자열의 trim() 메소드를 사용하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거할 수 있다.

[example]

Untitled

→ trim()을 사용함으로써 문자열 앞뒤 공백 제거를 볼 수 있음

🔻 split()

split()은 문자열을 특정 기호로 자르고 배열로 만들때 쓴다.
문자열을 매개변수(다른문자열)로 잘라서 배열을 만들어 리턴하는 메소드이다.

[example]

Untitled

→ split() 메소드를 사용함으로써 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들 수 있음

JSON 객체

JSON은 JavaScript Object Notation 의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식이다.
인터넷에서 문자열로 데이터를 주고 받을 때 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있다.현재 가장 많이 사용되는 자료 표현 방식은JSON 객체 이다.
JSON은 말이 어려워보일뿐이지 그저자바스크립트의 배열과 객체를 활용해 어떤 자료를 표현하는 형식일 뿐이다.
JSON 형식은 약간의 추가 규칙이있다.
1. 값을 표현할 때는 문자열,숫자,불 자료형만 사용할 수 있다. (함수 등 사용불가!) 2. 문자열은 반드시 큰따옴표로 만들어야함(" ") 3. 키(key)에도 반드시 따옴표 붙여야함 ("key": value)