[혼공스] 06 - 2 '객체의 속성과 메소드 사용하기' 정리(2)
06 - 2장 개념정리 두 번째 시간이다.
기본 자료형과 연결괸 객체, 자바스크립트에 내장된 객체에 대한 내용을 간단하게 살펴볼 예정이다.
중요한 개념이 많이 등장하니 꼼꼼하게 정리해보자.
그럼 정리 시작!
Number 객체
기본 자료형과 연결된 객체에서 자주 사용하는 것만 기능적으로 살펴보자. 우선 Number 객체의 기본 메서드이다.
소수점 N번째 자릿수까지 출력하기: toFixed()
Number 객체에서 자주 사용하는 메소드는 toFixed() 메소드이다. 소수점 이하 몇 자리까지만 출력하고 싶을 때 사용한다.
NaN과 Infinity 확인하기: isNaN(), isFinite()
어떤 숫자가 NaN인지 또는 Infinity인지 확인할 때는 Number.isNaN() 메소드와, Number.isFinite() 메소드를 사용한다. 이 메소드들은 숫자 자료 뒤에 온점을 찍고 사용하는 것이 아니라 Number 뒤에 점을 찍고 사용한다.
NaN과 비교하면 모든 값이 false로 나오므로 isNaN() 메소드를 사용해야 한다.
String 객체
문자열 양쪽 끝의 공백 없애기: trim()
문자열의 trim() 메소드를 사용하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거할 수 있다.
페이스북, 트위터, 카카오톡과 같은 소셜 네트워크 서비스에서 사용자의 실수 또는 악의적인 목적으로 문자열 앞뒤에 공백이 추가되는 경우가 많으므로 이런 것들을 미리 제거하기 위해 사용한다.
문자열을 특정 기호로 자르기: split()
알고리즘 대회 문제를 풀거나 웹 페이지에서 데이터를 긁으면 쉼표(또는 다른 것)로 구분된 문자열을 읽어서 분해해야 하는 경우가 있다.
이런 경우에는 split() 메소드를 사용한다. split() 메소드는 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드이다.
이 외에도 String 객체의 중요 속성은 앞에서 살펴본 length 속성, 주요 메서드는 indexOf() 메소드 등이 있다.
JSON 객체
기본 자료형과 관련된 객체 외 자바스크립트가 기본적으로 제공하는 내장 객체를 몇 가지 살펴보자.
인터넷에서 문자열로 데이터를 주고 받을때는 CSV, XML, CSON 등의 다양한 자료 표현 방식을 사용할 수 있다. 현재 가장 많이 사용되는 자료 표현 방식은 JSON 객체이다.
JSON은 Javascript Object Notation의 약자로 자바스크립트의 객체처럼 자료를 표현하는 방식이다.
다만 JSON 형식은 약간의 추가 규칙이 있다.
- 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다.(함수 등은 사용 불가)
- 문자열은 반드시 큰따옴표로 만들어야 한다.
- 키에도 반드시 따옴표를 붙여야 한다.
대부분의 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있다. 그래서 네트워크를 통해서 각각의 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 활용한다. 자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용한다.
<script>
const data = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML5 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}]
// 자료를 JSON으로 변환한다
console.log(JSON.stringify(data)) // 일반적인 방법, 한 줄로 변환
console.log(JSON.stringify(data, null, 2)) // 들여쓰기 두 칸 추가
</script>
첫번째 console.log처럼 매개변수를 하나만 넣으면 한 줄로 변환된다. 일반적으로 이렇게 사용한다. 두번째 console.log를 보면 세번째 매개 변수를 통해서 들여쓰기를 두 칸 추가했다. JSON.stringify의 두번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을때 사용하거나 거의 사용하지 않으며, 일반적으로 null을 넣는다.
JSON 문자열을 자바스크립트 객체로 전개할 때는 JSON.parse() 메소드를 사용한다. 매개변수에 JSON 형식의 문자열을 넣어주면 된다.
<script>
const data = [{
name: '혼자 공부하는 파이썬',
price: 18000,
publisher: '한빛미디어'
}, {
name: 'HTML5 웹 프로그래밍 입문',
price: 26000,
publisher: '한빛아카데미'
}]
// 자료를 JSON으로 변환한다.
const json = JSON.stringify(data)
console.log(json)
// JSON 문자열을 다시 자바스크립트 객체로 변환한다.
console.log(JSON.parse(json))
</script>
JSON 객체의 메소드는 stringify(), parse() 이렇게 두 가지 뿐이다.
Math 객체
수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용한다. Math 객체 속성으로는 pi, e와 같은 수학 상수가 있다. 메소드로는 Math.sin(), Math.cos(), Math.tan()와 같은 삼각함수도 있다.
Math 객체의 메소드 중에서 많이 사용하는 '랜덤한 숫자 만들기'에 대해 살펴보자.
랜덤한 숫자를 생성할 때는 Math.random() 메소드를 사용한다. Math.random() 메소드는 0 이상 1미만의 랜덤한 숫자를 생성한다. 0 <= 결과 < 1의 범위만 생성하므로 그 이상의 범위에서 랜덤한 숫자를 구하려면 다양한 처리를 해야한다.
<script>
const num = Math.random()
console.log('# 랜덤한 숫자')
console.log('0~1 사이의 랜덤한 숫자:', num)
console.log('')
console.log('# 랜덤한 숫자 범위 확대')
console.log('0~10 사이의 랜덤한 숫자:', num * 10)
console.log('0~50 사이의 랜덤한 숫자:', num * 50)
console.log('')
console.log('# 랜덤한 숫자 범위 이동')
console.log('-5~5 사이의 랜덤한 숫자:', num * 10 - 5)
console.log('-25~25 사이의 랜덤한 숫자:', num * 50 - 25)
console.log('')
console.log('# 랜덤한 정수 숫자')
console.log('-5~5 사이의 랜덤한 정수 숫자:', Math.floor(num * 10 - 5))
console.log('-25~25 사이의 랜덤한 정수 숫자:', Math.floor(num * 50 - 25))
</script>
Math.floor() 메소드는 매개 변수보다 작거나 같은 가장 가까운 정수를 반환한다.
이상으로 기본 자료형과 연결괸 객체(Number, String), 자바스크립트에 내장된 객체(JSON, Math)에 대한 내용을 간단하게 살펴보았다.
06 - 2장의 내용이 다 끝난 것은 아니지만 이 뒷 부분의 내용은 결이 살짝 다르기 때문에 잠깐 쉬어가도록 하겠다.
내일은 06 - 2 장의 내용을 마저 정리하도록 하자.
오늘 하루도 쌓였다.