시작하기 전에
현대 프로그래밍 언어는 모두 객체 지향이라는 패러다임을 기반으로 한다. 그래서 모든 개발이 객체로 이루어진다.
자바스크립트에서 사용하는 자료는 크게 기본자료형과 객체 자료형으로 구분할 수 있다.
기본자료형 : 숫자, 문자열, 불
객체자료형 : 함수, 배열 등등
객체 자료형
속성과 메소드를 가질 수 있는 모든 것은 객체이다. 예를 들면 배열도 객체이다. 다음과 같이 a라는 이름의 배열을 선언하고 배열에 속성을 지정한 후 확인해보면 배열이 속성을 가질 수 있다는 것을 알 수 있다.
const a = [];
>undefined
a.sample = 10;
>10
a.sample;
>10함수도 객체이다. 다음과 같이 함수 b를 선언하고 함수에 속성을 지정한 후 확인해보면 함수가 속성을 가질 수 있다는 것을 알 수 있다.
function b () {};
>undefined
b.sample = 10;
>10
b.sample;
>10그래서 typeof 연산자를 사용해서 배열의 자료형을 확인해보면 "object"라고 객체가 출력된다. 배열인지 확인하려면 Array.isArray() 메소드를 사용해야 한다.
함수는 '실행이 가능한 객체'라는 특이한 자료로 typeof 연산자를 사용해서 자료형을 확인하면 'function'을 출력합니다. 함수는 객체의 특성을 완벽하게 가지고 있으므로 자바스크립트에서는 함수를 일급객체에 속한다고 표현하기도 한다.
기본 자료형
자바스크립트에서 실체가 있는 것(undefined와 null 등이 아닌 것) 중에 객체가 아닌 것을 기본 자료형이라고 부른다. 숫자, 문자열, 불이 기본 자료형이다. 이러한 자료형은 객체가 아니므로 속성을 가질 수 없다.
기본 자료형을 객체로 선언하기
자바스크립트는 기본 자료형을 객체로 선언하는 방법을 제공한다. 2장에서 살펴보았던 숫자, 문자열, 불 등으로 자료형을 변환하는 함수(Number, String, Boolean)는 다음과 같이 사용한다.
const 객체 = new 객체 자료형 이름()ex)
let object1 = new Number(10)
let object2 = new String('안녕하세요')
let object3 = new Boolean(true)
console.log(object1)
>10
console.log(object1)
>"object"주의) new 키워드를 사용하지 않으면 함수가 자료형 변환 기능으로 작동하므로 주의한다.
기본 자료형의 일시적 승급
원래 기본 자료형은 속성과 메소드를 가질 수가 없다. 그런데 문자열.length와 같은 메소드는 작동하는 것일까. 자바스크립트는 사용의 편리성을 위해서 기본 자료형의 속성과 메소드를 호출할 때(기본 자료형 뒤에 온점을 찍고 무언가 하려고 하면) 일시적으로 기본 자료형을 객체로 승급시킨다.
프로토타입으로 메소드 추가하기
객체 자료형 이름.prototype.메소드 이름 = function () {
}ex) 숫자 자료형에 n제곱하는 메소드를 추가
<script>
// power() 메소드를 추가
Number.prototype.power = function (n = 2) {
return this.valueOf() ** n
}
</script>Number 객체
기본 자료형과 연결된 객체에서 자주 사용하는 것만 기능적으로 살펴보자. 먼저 Number 객체의 기본 메소드이다.
숫자 N번째 자릿수까지 출력하기: toFixed()
소수점 이하 몇 자리까지만 출력하고 싶을 때 사용. 소수점 아래 2자리까지 출력하고 싶다면 toFixed(2), 3자리까지 출력하고 싶다면 toFixed(3) 형태로 사용한다.
NaN과 Infinity 확인하기: isNaN(), isFinite()
어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한)인지 확일할 때는 Number.isNaN() 메소드와 Number.isFinite()메소드를 사용한다. 이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하는 것이 아니라 Number 뒤에 점을 찍고 사용한다.
String 객체
문자열 양쪽 끝의 공백 없애기: trim()
사용자의 실수 또는 악의적인 목적으로 문자열 앞뒤에 공백이 추가되는 경우가 많으므로 이런 것들을 미리 제거하는 메소드이다. 이러한 기능을 trim이라고 부른다. 문자열 trim() 메소드를 사용하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거할 수 있다.
const stringA = '
메시지를 입력하다보니 앞에 줄바꿈도 들어가고'
>undefined
const stringB = ' 앞과 뒤에 공백도 들어가고 '
>undefined
stringA.trim()
>"메시지를 입력하다보니 앞에 줄바꿈도 들어가고"
stringB.trim()
>"앞과 뒤에 공백도 들어가고"문자열을 특정 기호로 자르기: split()
split() 메소드는 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드.
이외에도 String 객체의 중요 속성은 앞에서 살펴본 length 속성, indexOf() 메소드 등이 있다.
JSON 객체
인터넷에서 문자열로 데이터를 주고 받을 때는 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있다. 현재 가장 많이 사용되는 자료 표현 방식은 JSON 객체이다.
JSON은 JavaScript Object Notation의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식이다. JSON은 자바스크릷트 배열과 객체를 활용해 어떤 자료를 표현하는 형식일 뿐이다. 다만 JSON 형식은 약간의 추가 규칙이 있다.
- 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다.(함수 등은 사용 불가)
- 문자열은 반드시 큰따옴표로 만들어야 한다.
- 키(key)에도 반드시 따옴표를 붙여야 한다.
대부분의 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있다. 그래서 네트워크를 통해 각각의 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 활용한다. 자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용한다.
Math 객체
수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용한다.
Math 객체의 메소드 중에서 많이 사용하는 것은 '랜덤한 숫자 만들기'이다.
랜덤한 숫자를 생성할 때는 Math.random() 메소드를 사용한다. 해당 함수는 0이상, 1 미만의 랜덤한 숫자를 생성한다.
Math.random()
> 0부터 1 미만의 랜덤한 숫자
Math.random() * 10
> 0부터 10 미만의 랜덤한 숫자
Math.random() * 50
> 0부터 50 미만의 랜덤한 숫자