본문 바로가기
Frontend/JavaScript

객체 ② 기본 자료형과 객체 자료형

by minhi 2024. 9. 27.
기본 자료형과 객체 자료형

 
앞서 자료와 변수 ① 기본 자료형에서는 기본 자료형에 대해,
 
객체 ① 객체 기본에서는 객체 자료형에 대해 알아보았다.
 
JavaScript에서의 자료는 기본 자료형과 객체 자료형으로 구분할 수 있는데
 
기본 자료형으로는 숫자, 문자열, 불이 있고 이 셋을 제외한 나머지는 전부 객체 자료형에 해당된다.
 
이때 객체는 키와 값으로 구성된 속성을 가지는 자료형으로, 특히 함수 자료형을 가지는 속성은 메소드라고 부른다.
 
앞서 배운 배열, 함수 또한 객체 자료형으로, 속성과 메소드를 가질 수 있다.

> const a = []
undefined
> a.sample = 10
10
> a.sample
10

> typeof(a)
"object"
> function b () {}
undefined
> b.sample = 10
10
> b.sample
10

> typeof(b)
"function"

 

반면 기본 자료형은 속성과 메소드를 가질 수 없다.

> const c = 20
undefined
> c.sample = 10
10
> c.sample
undefined

 

 

그러나 JavaScript에서는 이런 기본 자료형을 객체로, 또는 객체처럼 사용할 수도 있다.

기본 자료형을 객체로 사용하기


기본 자료형 객체로 사용하려면 new 키워드 뒤에 Number(), String(), Boolean() 함수를 사용하면 된다.
 
이렇게 생성된 숫자 객체, 문자열 객체, 불 객체는 기본 자료형의 특징과 객체 자료형의 속성과 메소드 모두 가진다.

> const d = new Number(20)
undefined

> d + 10
30

> d.sample = 10
10
> d.sample
10

> d
Number {20, sample: 10}
> typeof(d)
"object"
더보기
더보기
  • Number(): 숫자 자료형이 아닌 자료형을 숫자 자료형으로 변환한다.
  • new Number(): 숫자 자료형을 객체 자료형으로 변환한다.

 

기본 자료형을 객체처럼 사용하기


기본 자료형을 객체처럼 사용한다는 것은 기본 자료형임에도 속성과 메소드를 가짐을 의미한다.

구체적으로 알아보기 전에, 앞서 문자열의 길이를 확인하기 위해 length 속성을 사용했던 것을 떠올려보자.

문자열은 기본 자료형으로 속성과 메소드를 가질 수 없는데 어떻게 이런 일이 가능했던 것일까?

JavaScript는 사용의 편리성을 위해 기본 자료형의 속성과 메소드를 호출할 때 기본 자료형을 일시적으로 객체 자료형으로 승급시킨다.

이러한 승급은 일시적이기 때문에 호출 당시에만 속성과 메소드가 작동하는 것처럼 보일 뿐,

이후에 속성에 접근하거나 메소드를 사용하려고 하면 작동하지 않는다.

즉, 기본 자료형에서는 일시적으로 속성과 메소드를 사용할 수는 있지만 속성과 메소드 자체를 추가할 수는 없는 것이다.

> const c = 20
undefined
> c.sample = 10
10
> c.sample
undefined

 

하지만 prototype 속성을 사용하면 기본 자료형 또는 객체 자료형에 속성과 메소드를 추가해 기본 자료형을 객체처럼 사용할 수 있다.

객체 자료형 이름.prototype.속성 이름 = 속성 값
객체 자료형 이름.prototype.메소드 이름 = function () {}
> const c = 20
undefined

> Number.prototype.sample = 10
10
> c.sample
10

> Number.prototype.power = function (n=2) {return this.valueOf() ** n}
ƒ (n=2) {return this.valueOf() ** n}
> c.power()
400

 

String.prototype.contain = function (data) {
  return this.indexOf(data) >= 0
}
	
Array.prototype.contain = function (data) {
  return this.indexOf(data) >= 0
}
	
const e = '안녕하세요'
console.log(e.contain('안녕'))
console.log(e.contain('반가워'))
	
const f = [10, 20, 30, 40]
console.log(f.contain(10))
console.log(f.contain(50))
true
false
true
false
더보기
더보기

문자열과 배열의 indexOf() 메소드는 문자열 내부에 특정 문자열, 배열 내부에 특정 요소가 존재할 경우 인덱스를 반환하고 존재하지 않을 경우 -1을 반환한다.

 

이를 통해 앞서 문자열에 length 속성을 사용할 수 있었던 것 또한

 

prototype 속성을 사용해 문자열 자료형에 미리 length 속성을 추가해놓았기 때문임을 알 수 있다.

그럼 length 속성과 같이 기본 자료형에 자주 사용되는 속성과 메소드를 알아보자.

Number 객체


toFixed()

소수점 이하 몇 자리까지 출력할 것인지 지정한다.
> const c = 20.123
undefined
> c.toFixed(2)
"20.12"
> c.toFixed(3)
"20.123"


isNaN(), isFinite()

특정 숫자의 NaN 여부, Infinity 여부를 반환한다.
> const o = Number('안녕하세요')
undefined
> o
NaN
> Number.isNaN(o)
true

> const m = 10 / 0
undefined
> m
Infinity
> const n = -10 / 0
undefined
> n
-Infinity
> Number.isFinite(m)
false
> Number.isFinite(n)
false

> o === NaN
false
> m === Infinity
true
> n === -Infinity
true
더보기
더보기

NaN은 비교 연산자를 통해 확인할 수 없지만 Infinity는 비교 연산자를 통해 확인할 수 있다.

 

String 객체


trim()

문자열 양쪽 끝의 공백을 제거한다.

 

이때 공백은 띄어쓰기, 줄바꿈을 포함한다.

> const e = '
안녕하세요   '
undefined
> e
"
안녕하세요   "
> e.trim()
"안녕하세요"


split()

특정 문자열을 기준으로 문자열을 잘라 배열을 반환한다.

 

이때 특정 문자열로는 쉼표, \n 등이 자주 사용된다.

> const e = '이름,나이,성별
김철수,20,남성
박영희,22,여성
이민수,24,남성
홍길동,22,남성'
undefined
> e = e.split('\n')
["이름,나이,성별", "김철수,20,남성", "박영희,22,여성", "이민수,24,남성", "홍길동,22,남성"]
> e = e.map((line) => line.split(','))
[Array(3), Array(3), Array(3), Array(3), Array(3)]
> JSON.stringify(e, null, 2)
"[
[
  "이름",
  "나이",
  "성별"
],
[
  "김철수",
  "20",
  "남성"
],
[
  "박영희",
  "22",
  "여성"
],
[
  "이민수",
  "24",
  "남성"
],
[
  "홍길동",
  "22",
  "남성"
]
]"


indexOf()

문자열 내부 특정 문자열의 인덱스를 반환한다.

 

문자열 내부에 특정 문자열이 존재하지 않는 경우에는 -1을 반환한다.

> const e = '안녕하세요'
undefined
> e.indexOf('안녕')
0
> e.indexOf('하세요')
2
> e.indexOf('반가워')
-1

 

JSON 객체


JSON은 JavaScript Object Notation의 약자로,

 

자료를 JavaScript 객체와 같은 형식으로 표현하는 자료 표현 방식을 의미한다.

현재 JSON은 인터넷에서 문자열로 데이터를 주고 받을 때 가장 많이 사용되는 자료 표현 방식으로,

 

JavaScript는 JSON 객체를 기본 내장 객체로 제공한다.

그러나 JSON 객체는 JavaScript 객체에 약간의 추가 규칙을 가지는데, JSON 객체에서

  • 키는 반드시 따옴표를 붙여야 한다.
  • 값은 숫자, 문자열, 불 자료형만 가질 수 있다.
  • 문자열을 반드시 큰따옴표를 붙여야 한다.

JSON 객체에서는 다음의 메소드가 자주 사용된다.

stringify()

JavaScript 객체를 JSON 객체로 변환한다.
const book = [{
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 파이썬',
  author: '윤인성',
  publisher: '한빛미디어'
}]

console.log(JSON.stringify(book))
console.log(JSON.stringify(book, null, 2))
[{"name":"혼자 공부하는 자바스크립트","author":"윤인성","publisher":"한빛미디어"},{"name":"혼자 공부하는 파이썬","author":"윤인성","publisher":"한빛미디어"}]
[
  {
    "name": "혼자 공부하는 자바스크립트",
    "author": "윤인성",
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 파이썬",
    "author": "윤인성",
    "publisher": "한빛미디어"
  }
]


parse()

JSON 객체를 JavaScript 객체로 변환한다.
const books = [{
  name: '혼자 공부하는 자바스크립트',
  author: '윤인성',
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 파이썬',
  author: '윤인성',
  publisher: '한빛미디어'
}]

const json = JSON.stringify(books)

console.log(json)
console.log(JSON.parse(json))
[{"name":"혼자 공부하는 자바스크립트","author":"윤인성","publisher":"한빛미디어"},{"name":"혼자 공부하는 파이썬","author":"윤인성","publisher":"한빛미디어"}]
(2) [{…}, {…}]
0: {name: '혼자 공부하는 자바스크립트', author: '윤인성', publisher: '한빛미디어'}
1: {name: '혼자 공부하는 파이썬', author: '윤인성', publisher: '한빛미디어'}
length: 2
[[Prototype]]: Array(0)

 

Math 객체

 

수학과 관련된 연산을 할 때는 Math 객체를 사용한다.

Math 객체에서는 다음의 속성과 메소드가 자주 사용된다.

PI

> Math.PI
3.141592653589793


E

> Math.E
2.718281828459045


random()

숫자를 랜덤으로 생성한다.

 

랜덤으로 생성되는 숫자의 범위는 0 이상 1 미만으로,

 

그 이상의 범위에서 랜덤으로 생성되도록 하기 위해선 추가적인 처리가 필요하다.

> Math.random()
0.5633899595398215
> Math.random()
0.16455701571308023
> Math.random() * 10
2.9787408856486386

 

_ 객체 

 

Lodash 라이브러리의 _ 객체는 몇몇 유용한 메소드를 가진다.

 

sortBy()

배열을 지정한 기준으로 오름차순 정렬한다.
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script>
const books = [{
  name: '혼자 공부하는 자바스크립트',
  price: 24000,
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 파이썬',
  price: 22000,
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 SQL',
  price: 26000,
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 네트워크',
  price: 25200,
  publisher: '한빛미디어'
}]

const output = _.sortBy(books, 'price')

console.log(JSON.stringify(output, null, 2))
</script>
[
  {
    "name": "혼자 공부하는 파이썬",
    "price": 22000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 자바스크립트",
    "price": 24000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 네트워크",
    "price": 25200,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 SQL",
    "price": 26000,
    "publisher": "한빛미디어"
  }
]

 

_orderBy()

배열을 지정한 기준으로 오름차순 또는 내림차순 정렬한다.
<script src="https://cdn.jsdelivr.net/npm/lodash@4.17.15/lodash.min.js"></script>
<script>
const books = [{
  name: '혼자 공부하는 자바스크립트',
  price: 24000,
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 파이썬',
  price: 22000,
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 SQL',
  price: 26000,
  publisher: '한빛미디어'
}, {
  name: '혼자 공부하는 네트워크',
  price: 25200,
  publisher: '한빛미디어'
}]

const output1 = _.orderBy(books, 'price')
const output2 = _.orderBy(books, 'price', 'asc')
const output3 = _.orderBy(books, 'price', 'desc')

console.log(JSON.stringify(output1, null, 2))
console.log(JSON.stringify(output2, null, 2))
console.log(JSON.stringify(output3, null, 2))
</script>
[
  {
    "name": "혼자 공부하는 파이썬",
    "price": 22000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 자바스크립트",
    "price": 24000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 네트워크",
    "price": 25200,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 SQL",
    "price": 26000,
    "publisher": "한빛미디어"
  }
]
[
  {
    "name": "혼자 공부하는 파이썬",
    "price": 22000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 자바스크립트",
    "price": 24000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 네트워크",
    "price": 25200,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 SQL",
    "price": 26000,
    "publisher": "한빛미디어"
  }
]
[
  {
    "name": "혼자 공부하는 SQL",
    "price": 26000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 네트워크",
    "price": 25200,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 자바스크립트",
    "price": 24000,
    "publisher": "한빛미디어"
  },
  {
    "name": "혼자 공부하는 파이썬",
    "price": 22000,
    "publisher": "한빛미디어"
  }
]

 

 

 

 

 

이 글은 혼자 공부하는 자바스크립트 (윤인성 저)를 바탕으로 공부한 내용을 작성한 글입니다.

'Frontend > JavaScript' 카테고리의 다른 글

문서 객체 모델 ① 문서 객체 조작  (0) 2024.10.02
객체 ③ 객체와 배열 고급  (1) 2024.09.30
객체 ① 객체 기본  (0) 2024.09.22
함수 ② 함수 고급  (2) 2024.09.22
함수 ① 함수 기본  (3) 2024.09.17

관련글

티스토리툴바