[JavaScript 11] 객체의 속성과 메소드

김헤일리·2022년 11월 18일

JavaScript 항해99

JavaScript

목록 보기

12/20

자바스크립트에서 사용하는 자료형은 크게 기본 자료형primitives과 객체 자료형object으로 구분할 수 있다.
하지만 자바스크립트는 기본 자료형이 객체 자료형이 될 수도 있다!
이를 활용하는 객체를 prototype객체라고 한다.

1. 객체 자료형

속성과 메소드를 가질 수 있는 모든 것은 객체다.
배열과 함수도 속성과 메소드를 가질 수 있기 때문에 객체다.
- 배열의 속성을 typeof로 확인할 경우, "object"라고 표시된다.
- 정확하게 배열인지 확인하기 위해선 Array.isArray()라는 메소드를 사용한다.
함수는 "실행이 가능한 객체" 라는 특이 케이스로, typeof 연산자 사용 시 "function" 이라고 표시된다.
- 하지만 객체의 특성을 완벽하게 갖고 있기 때문에 "일급객체"에 속한다.
- 일급객체란?
  - 특정 언어의 일급 객체란, 컴퓨터 프로그래밍 언어에서 일반적으로 다른 객체들에 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. (링크 참조)

2. 기본 자료형

자바스크립트에서 undefined, null을 제외한 자료중 객체가 아닌 것을 기본 자료형이라고 한다.
- 숫자, 문자열, 불린 자료형이 "primitive types"에 속한다.
- 해당 자료형들은 객체가 아니기 때문에 속성을 가질 수 없다.
- 그래서 자바스크립트에선 기본 자료형을 객체로 선언하는 방식이 있다.

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

const 객체 = new 객체 자료형 이름() 형식 사용 시, 숫자 객체, 문자열 객체, 불린 객체를 생성할 수 있다.
- 기본 자료형이 아니라 객체가 되기 때문에 속성을 가질 수 있다.
- 예시:

//기본 자료형일 때
	const c = 273  // >>> undefined
    
    c.sample = 10 // >>> 10  | 임의로 속성을 만들고 10 할당

	c.sample //  >>> undefined | 속성을 만들 수 있는 것 처럼 보였지만 실제로 만들어지지 않음

//객체로 선언한 이후
	const f = new Number(273) // >>> undefined
    
    typeof f // >>> "object"
    
    f.sample // >>> 10

	f // >>> Number {273, sample:10} | 콘솔에서 출력 시 객체 형태로 출력

	f + 0 // >>> 273 | 객체가 되어도 숫자와 똑같이 활용 가능

	f.valueOf() // >>> 273 | valueOf() 메소드를 활용해서 값 추출 가능

자바스크립트는 사용 편이성을 위해서 기본 자료형의 속성과 메소드를 호출할 때 일시적으로 기본 자료형을 객체로 승급시킨다.
- 속성과 메소드를 사용할 수는 있지만, 추가로 가질 수는 없다.
- 속성을 추가했지만, 추가하고 실제로 호출했을 땐 적용되지 않은 것을 확인할 수 있다.

❗️ 프로토타입으로 메소드 추가하기

객체의 prototype이라는 속성이 객체 전용 틀이다.
prototype 객체에 속성과 메소드를 추가하면 모든 객체와 기본 자료형에서 해당 속성과 메소드를 사용할 수 있다.
- 객체 자료형 이름. prototype.메소드 이름 = function () {}
예시:

Number.prototype.sample = 10

const i = 273

i.sample // >>> 10 | prototype을 사용했기 때문에 숫자형인 i가 속성을 가질 수 있다.

프로토타입에 메소드를 추가하면 다양하게 활용할 수 있다.

또 다른 예시: 제곱 수 구하기

// power() 메소드를 추가
 Number.prototype.power = function (n=2) {
   return this.valueOf() ** n
 }

const a = 12
console.log('a.power():', a.power()) // 144 
console.log('a.power(3):', a.power(3)) // 1728
console.log('a.power(4):', a.power(4)) // 20736

프로토타입으로 메소드 추가 시 숫자에도 메소드를 사용할 수 있다.

또또 다른 예시: 문자열에 원하는 값이 있는 지 찾는 메소드

// 문자열에 prototype을 이용해서 contain() 메소드 추가
// 매개변수에 들어온 값이 배열 안에 있는 경우 true, 아닌 경우에 false를 반환한다.
String.protype.contain = function (data) {
  return this.indexOf(data) >= 0
}

Array.protype.contain = function (data) {
  return this.indexOf(data) >= 0
}

// 
const a = '안녕하세요'
console.log('안녕 in 안녕하세요:', a.contain('안녕')) 
// '안녕'은 '안녕하세요'라는 문자열에 존재함으로 true 반환
console.log('없는데 in 안녕하세요:', a.contain('없는데'))
// '없는데'는 '안녕하세요'라는 문자열에 없음으로 false 반환

const b = [273, 32, 103, 57, 52]
console.log('273 in [273, 32, 103, 57, 52]:', b.contain(273))
console.log('273 in [273, 32, 103, 57, 52]:', b.contain(0))

3. Number 객체

숫자에 메소드를 사용할 때 가장 자주 쓰이는 메소드 예시보기.

❗️ toFixed: 숫자 n번째 자릿수까지 출력하기

소수점 이하 몇자리까지만 출력하고 싶을때 사용하는 메소드
- 예시:

// toFixed() 에서 인자에 넣는 숫자 (n)에 따라서 출력되는 소수점 이하 단위를 조절할 수 있다.

const l = 123.456789

l.fixed(2) // >>> "123.46"


l.fixed(4) // >>> 123."4567"

❗️ isNaN() / isFinite(): NaN과 Infinity 확인하기

어떤 숫자가 NaN인지, infinity인지 확인할 수 있음.
- Number.메소드 형식으로 사용하고, 해당 숫자가 "NaN"인 경우 "true", "infinity"인 경우 "true"를 반환한다.
- 예시:

*** isNaN() ***
  
const m = Number('문자열')

Number.isNaN(m) 
// >>> true. | Number() 인자 안에 '문자열'이라는 숫자가 아닌 인자가 들어갔기 때문에 true가 반환된다. (m is NaN)

m === NaN 
// >>> false | NaN의 경우, 비교연산자는 사용할 수 없다. 모든 비교 대상이 false로 반환되기 때문.

*** isFinite() ***

const n = 10/0 
// >>> n = infinity | 양의 무한대 생성
const m = -10/0 
// >>> m = -infinity | 음의 무한대 생성


Number.isFinite(n) 
// >>> false | n은 유한한 숫자가 아님
Number.isFinite(m) 
// >>> false | m은 유한한 숫자가 아님
Number.isFinite(1) 
// >>> true | 1은 유한한 숫자 (셀 수 있는 숫자는 true 반환)

n === Infinity 
// >>> true | Infinity의 경우, NaN과 다르게 비교 연산자로 비교할 수 있음.

4. String 객체

string 객체에 자주 사용되는 메소드 살펴보기

❗️ trim() : 문자열 양 끝의 공백 제거하기

예시:

const stringA = `
메세지를 입력하다보니 앞에 줄바꿈도 들어가고` 
// `` 사이에 문자열이 들어가는데, 문장에 첫마디에 의미 없이 줄바꿈(공백) 추가됨.

const stringB = `   문장 앞과 뒤에 공백이 들어감    `

stringA.trim() 
// >>> "메세지를 입력하다니 앞에 줄바꿈도 들어가고" | 문장 첫마디에 의미 없는 줄바꿈 제거

stringB.trim()
// >>> "문장 앞과 뒤에 공백이 들어감" | 문장 앞뒤에 있던 의미 없는 공백 제거

❗️ split() : 문자열 특정 기호 기준으로 자르기

쉼표, 슬래시, 닷 등 문자열을 구분짓는 특정 기호나 공백을 제거할 수 있음
문자열을 매개변수로 잘라서 배열을 만들어 반환함
예시:

let input = `일자, 달러, 엔, 유로 
02,1141.8,1097.46,1262.37`

input.split('\n') = ["일자, 달러, 엔, 유로", "02, 1141.8, 1097.46, 1262.37"
// 줄바꿈을 기준으로 문자열을 자름 => 줄바꿈이 없어지고 문자열이 배열로 변경됨

5. JSON 객체

JSON = JavaScript Object Notation의 약자로, 자바스크립트의 객체처럼 자료를 표현하는 방식이다.
JSON 자료 형식의 추가 규칙
- 값 표현 시 문자열, 숫자, 불 자료형만 사용할 수 있음. (함수 사용 불가)
- 문자열은 반드시 큰따옴표여야 한다.
- 키(key) 값은 반드시 따옴표가 붙어야 한다.
예시:

// 하나의 자료 예시
{
  "name": "혼자 공부하는 자바스크립트",
  "price": 18000,
  "publisher": "한빛미디어"
}

// 여러 개의 자료 예시
[{
  "name": "혼자 공부하는 자바스크립트",
  "price": 18000,
  "publisher": "한빛미디어"
}, {
  "name": "HTML5 웹 프로그래밍 입문",
  "price": 26000,
  "publisher": "한빛아카데미"
}]

❗️JSON.stringfy()

자바스크립트 객체를 JSON 문자열로 변환할 땐 JSON.stringfy(data, property, num) 메소드를 사용한다.
- data : JSON 형식으로 변환할 자료를 담고 있는 변수/상수의 이름
- property : 객체에서 특정 속성만 선택해서 추출하고 싶을 때 사용 (일반적으로 null이 들어간다)
- num : JSON 형식으로 변환했을 때 추가되는 들여쓰기의 수

❗️JSON.parse()

JSON 문자열을 자바스크립트 객체로 전개할 때 사용하는 메소드
매개변수에 JSON 형식의 문자열을 넣는다.

6. Math 객체

수학과 관련된 기본 연산을 할 때 사용하는 메소드.
최댓값/최솟값 구하기, 삼각함수 구하기 등 다양한 종류가 있다.

pi와 e 같은 수학 상수를 구할 수도 있다.

예시:

> Math.PI // >>> 3.14592653589793
 > Math.E // >>> 2.718281828459045

❗️ Math.random()

랜덤한 숫자를 만들고자 할 때 사용되는 메소드.
0 이상, 1 미만의 숫자를 생성한다.
- 0 <= X < 1 의 범위에서만 숫자가 생성되기 때문에, 다른 범위 내의 값을 구하기 위해 다양한 처리를 해야한다.
- 예시:

const num = Math.random()

console.log(num) // 기본 범위 내 랜덤한 숫자를 반환한다.

console.log(num *10) // [0 <= X < 10]의 범위로 반환

console.log(num*50) // [0 <= X < 50]의 범위로 반환

console.log(num*10 -5) // [-5 <= X < 5]의 범위로 반환

console.log(Math.floor(num*10-5)) // [-5 <= X < 5]의 범위에서 정수만 반환 (Math.floor()를 통한 숫자 내림)

내가 아는 컴퓨터 언어라곤 자바스크립트 뿐이다.
하지만 자바스크립트 하나만으로 굉장히 방대해서, 공부를 하면 할 수록 모르는 내용이 많다는 게 신기할 정도다.

기본기를 어느정도 다지고 나서 외부 라이브러리를 보면서 다른 사람들이 작성한 코드를 보는 것도 좋을 것 같다!

지식이 늘어나는건 기쁜일이야! 😆

출처: 혼자 공부하는 자바스크립트 (한빛미디어)

김헤일리

공부하느라 녹는 중... 밖에 안 나가서 버섯 피는 중... 🍄

이전 포스트

[JavaScript 10] 객체의 기본

다음 포스트