[자바스크립트] 객체의 속성 및 메서드 활용

자바스크립트의 자료형

기본 자료형

숫자, 문자열, bool

객체 자료형

함수, 배열, 등등

객체 자료형

속성과 메서드를 가지는 모든 것은 객체이다

그래서 typeof() 연산자를 사용해서 배열의 자료형을 확인해보면 'object' 라고 나오기 때문에
배열인지 확인하기 위해서는 Array.isArray() 메서드를 사용했다

다만 함수는 '실행이 가능한 객체'라는 특이한 자료로 typeof() 연산자를 사용해서 자료형을 확인해보면 function 이 출력된다

일급 객체 fist-class object || first-class citizen

함수는 객체의 특성을 완벽하게 가지고 있기 때문에 자바스크립트에서는 함수를 일급 객체에 속한다고 표현한다

기본 자료형

primitive types || primitives

자바스크립트에서는 실체가 있는 것 undefined, null이 아닌 것 중에 객체가 아닌 것을 기본 자료형 이라고 한다
숫자, 문자열, bool
객체가 아니기 때문에 속성을 가질 수 없다

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

자바스크립트는 기본 자료형을 객체로 선언하는 방법이 제공된다
Number, String, Boolean 같이 자료형을 변환하는 함수를 사용한다

const 객체 = new 객체 자료형 이름()

new Number(10)
new String('안녕하세요')
new Boolean(true)

단순 기본 자료형이 아니기 때문에 속성을 가질 수 있다
new Number() 함수를 사용해서 숫자를 생성하면 숫자와 관련된 연산자도 모두 활용이 가능하고
속성과 메서드를 활용할 수도 있다

new 키워드를 사용하지 않을 때의 주의할 점

new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동된다

const g = Number(273)
typeof g // 'number' 객체가 아니다

기본 자료형의 일시적 승급

원래 기본 자료형은 속성과 메서드를 가질 수 없는데 문자열의 length 속성의 경우는 ??

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

이러한 승급은 일시적이기 때문에 속성을 추가되는것처럼 보여도 실제로는 추가되지 않는 현상이 일어난다

따라서 기본 자료형의 경우 속성과 메서드를 일시적으로 사용할 수 있지만, 속성과 메서드를 추가로 가질 수는 없다

프로토타입으로 메서드 추가하기 : prototype

숫자 객체 전체에 어떤 속성과 메서드를 추가할 수 있다면 → 기본 자료형 숫자도 속성과 메서드를 사용할 수 있다

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

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

Number.prototype에 sample 이라는 속성을 추가하면
기본 자료형 숫자 뒤에 온점을 찍고 해당 속성을 활용할 수 있다

Number.prototype.sample = 10
const i = 273
i.sample // 10

모든 숫자 자료형이 어떤 값을 공유할 필요는 없기 때문에 일반적으로 프로토타입에 속성을 추가하지 않는다

Number 객체

toFixed()

숫자 (소수점) N번째 자릿수까지 출력하기

isNaN(), isFinite()

NaN과 Infinity 확인하기

split()

문자열을 특정기호로 자르기

String 객체의 중요 속성 length, indexOf()

JSON 객체

인터넷에서 문자열로 데이터를 주고 받을 때에는 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용이 가능하지만 JSON 객체의 자료표현방식을 가장 많이 사용한다

Javascript Object Notation 의 약자
자바스크립트의 객체처럼 자료를 표현하는 방식
자바스크립트 배열과 객체를 활용해 어떤 자료를 표현하는 형식

JSON 형식의 규칙

• 값을 표현할 때에는 문자열, 숫자, bool 자료형만 사용이 가능하다 함수는 사용불가
• 문자열은 반드시 큰 따옴표 " 로 만들어야 한다
• 키에도 반드시 따옴표를 붙여야 한다

JSON.stringfy()

대부분의 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있기 때문에
네트워크를 통해 각각의 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 사용한다
자바스크립트 객체 → JSON 문자열로 변환할 때에는 JSON.stringfy() 메서드를 사용한다

JSON.stringfy(data, null, 2)
// 들여쓰기 2칸설정

매개변수

두번째 매개변수
객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하지만 거의 사용하지 않으며
일반적으로 null (아무것도 없음)을 넣는다

세번째 매개변수
틀여쓰기 설정

만약 매개변수를 하나만 넣으면 한줄로 변환되는데 일반적으로는 이러한 방식으로 사용한다

JSON.parse()

JSON 문자열 → 자바스크립트 객체로 변환
매개변수에 JSON 형식의 문자열을 넣어주면 된다

Math 객체

수학과 관련된 기본적인 연산할 때 사용한다
Math 객체 속성으로는 pi, e와 같은 수학 상수가 있다
Math 메서드로는 삼각함수가 있다

Math.random()

랜덤한 숫자를 생성할 때 사용한다

0이상, 1미만의 랜덤한 숫자를 생성하기 때문에 0 <= 결과 < 1 의 범위만 생성된다
그 이상의 범위에서 랜덤한 숫자를 구하려면 다양한 처리를 해야 한다

Lodash 라이브러리

내가 만든 외부 자바스크립트 파일을 읽을 수도 있지만, 다른 사람이 만든 외부 자바스크립트 파일을 사용할 수 있는데
다른 사람들이 만든 다양한 함수와 클래스를 묶어서 제공해주는 것을 외부 라이브러리 라고 부른다

유틸리티 라이브러리

개발할 때 보조적으로 사용하는 함수들을 제공하는 라이브러리
underscore, Lodash 등의 다양한 라이브러리가 있지만 Lodash 라이브러리가 많이 사용된다