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

• 자바스크립트에서 사용하는 자료형은 크게 기본 자료형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()를 통한 숫자 내림)

---

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

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

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

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