[TIL] JS 기본편 - 객체의 속성과 메소드 사용하기

👉🏼 KIM·2023년 6월 1일
0

TIL

목록 보기
8/9
post-thumbnail

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

prototype 객체란 객체의 틀을 의미하며, 이곳에 속성과 메소드를 추가하면 해당 객체 전체에서 사용할 수 있다.

valueOf

  • 객체(배열포함) 내부에서 값을 꺼내 쓰기 위해 사용.
  • 문자열에 대한 원시데이터형(primitive value)을 리턴
// power() 메소드를 추가합니다.
Number.prototype.power = function (n = 2) {
  return this.valueOf() ** n
}

// Number 객체의 power() 메소드를 사용합니다.
const a = 12
console.log('a.power():', a.power())
console.log('a.power(3):', a.power(3))
console.log('a.power(4):', a.power(4))

indexOf()

문자열 내부에 어떤 문자열이 있는지, 배열 내부에 어떤 자료가 있는지 확인할 때 사용한다.

const stringValue = '안녕하세요. 자바스크립트 공부하는 학생입니다.';
alert(stringValue.indexOf('안녕')); // 0
alert(stringValue.indexOf('공부')); // 14
alert(stringValue.indexOf('php')); // -1, php는 stringValue안에 존재하지 않는다

기본 자료형과 연결된 객체에서 자주 사용하는 것에는 Number객체, String 객체, JSON 객체, Math 객체가 있다.

Number 객체

숫자 N번째 자릿수까지 출력하기: toFixed()
소수점 이하 몇 자리까지만 출력하고 싶을 때 사용한다. 소수점 아래 2자리까지 출력하고 싶다면 toFixed(2), 3자리까지 출력하고 싶다면 toFixed(3) 형태로 사용한다.

NaN과 Infinity 확인하기: isNaN(), isFinite()
어떤 숫자가 NaN(Not a Number)인지 또는 Infinity(무한)인지 확인할 때는 Number.isNaN()메소드와 Number.isFinite() 메소드를 사용한다. Number 뒤에 점을 찍는 것이 포인트!

NaN(Not a Number)은 '숫자가 아니다'라는 의미로 자바스크립트에서 숫자로 나타낼 수 없는 숫자를 의미한다.


String 객체

문자열 양쪽 끝의 공백 없애기: trim()
문자열 앞뒤에 공백이 추가되는 경우가 많으므로 이런 것들을 미리 제거하는 것이다. 이 메소드를 사용하면 문자열 앞뒤 공백(띄어쓰기, 줄바꿈 등)을 제거할 수 있다.

문자열을 특정 기호로 자르기: split()
쉼표(또는 다른 것)로 구분된 문자열을 읽어서 분해할 때 사용한다.
split() 메소드는 문자열을 매개변수(다른 문자열)로 잘라서 배열을 만들어 리턴하는 메소드이다.


JSON 객체

자바스크립트 배열과 객체를 활용해 어떤 자료를 표현하는 형식이다.

  • 값을 표현할 때는 문자열, 숫자, 불 자료형만 사용할 수 있다. (함수 등은 사용 불가)
  • 문자열은 반드시 큰따옴표로 만들어야 한다.
  • 키(key)에도 반드시 따옴표를 붙여야 한다.

대부분의 프로그래밍 언어는 JSON 형식의 문자열을 읽어들이는 기능이 있다. 그래서 네트워크를 통해 각각의 프로그래밍 언어로 만든 애플리케이션들이 데이터를 교환할 때 활용하는데, 자바스크립트 객체를 JSON 문자열로 변환할 때는 JSON.stringify() 메소드를 사용한다.

// 자료를 생성합니다.
const data = [{
  name: '연금술사',
  price: 12000,
  publisher: '문학동네'
},{
  name: '세이노의 가르침',
  price: 7200,
  publisher: '데이원'
}]

// 자료를 JSON으로 변환합니다.
console.log(JSON.stringify(data)) 
//매개변수를 하나만 넣으면 한줄로 변환, 일반적으로 이렇게 사용함.

console.log(JSON.stringify(data, null, 2))
//2번째 매개변수는 객체에서 어떤 속성만 선택해서 추출하고 싶을 때 사용하나 거의 사용하지 않으며, 일반적으로 null(아무것도 없음)을 넣는다. 3번째 매개변수는 들여쓰기를 의미하며 2칸으로 설정함. 
console.log(JSON.stringify(data)) 

[{"name":"연금술사","price":12000,"publisher":"문학동네"},{"name":"세이노의 가르침","price":7200,"publisher":"데이원"}]


console.log(JSON.stringify(data, null, 2))
[
  {
    "name": "연금술사",
    "price": 12000,
    "publisher": "문학동네"
  },
  {
    "name": "세이노의 가르침",
    "price": 7200,
    "publisher": "데이원"
  }
]

Math 객체

수학과 관련된 기본적인 연산을 할 때는 Math 객체를 사용한다.
Math 객체의 메소드 중에서 많이 사용하는 건 '랜덤한 숫자 만들기'이다.
랜덤한 숫자를 생성할 때는 Math.random() 메소드를 사용한다. Math.random() 메소드는 0 이상, 1 미만의 랜덤한 숫자를 생성한다. 0<=결과<1의 범위만 생성하므로 그 이상의 범위에서 랜덤한 숫자를 구하려면 다양한 처리를 해야한다.

const num = Math.random()

console.log('# 랜덤한 숫자')
console.log('0~1 사이의 랜덤한 숫자:', num)//0.9901577096747438
console.log('')

console.log('# 랜덤한 숫자 범위 확대')
console.log('0~10 사이의 랜덤한 숫자:', num * 10)//9.901577096747438
console.log('0~50 사이의 랜덤한 숫자:', num * 50)// 49.50788548373719
console.log('')

console.log('# 랜덤한 숫자 범위 이동')
console.log('-5~5 사이의 랜덤한 숫자:', num * 10 - 5)//4.901577096747438
console.log('-25~25 사이의 랜덤한 숫자:', num * 50 -25)//24.50788548373719
console.log('')

console.log('# 랜덤한 정수 숫자')
console.log('-5~5 사이의 랜덤한 정수 숫자:', Math.floor(num * 10 - 5))//4
console.log('-25~25 사이의 랜덤한 정수 숫자:', Math.floor(num * 50 - 25))//24

마무리

알고리즘 뿐만 아니라 회사에서 숫자로 입력된걸 문자열로 바꾼다던지, 그 반대의 경우에 자주 사용하던 String()과 Number() 객체에 대해 다시 살펴보는 시간이었다.
점점 더 어려워지지만.. 이러한 개념들을 알고 있으면 알고리즘 푸는데 조금 더 도움이 될 것이다.

profile
프론트는 순항중 ¿¿

0개의 댓글