TIL 14_JavaScript 'Built-in Object(1)'

dudgus5766·2021년 7월 13일

JavaScript

목록 보기

6/14

이해가 되지 않아 김영보 쌤의 강의를 몇 번이고 돌려보게 만들었던..Built-in Object😡
차례 차례 한 개씩 설명하며 이해해보자!
이 글은 인프런에서의 'Javascript 비기너' 강의와 https://poiemaweb.com/ 에서의 빌트인 오브젝트 관련 내용을 참고하여 작성함.

Built-in Object

자바스크립트의 객체는 아래와 같이 크게 3개의 객체로 분류할 수 있다.

네이티브 오브젝트

자바스크립트 스펙에서 정의한 오브젝트로 빌트인 오브젝트가 포함되어 있다.

빌트인 오브젝트

값 타입, 연산자, 오브젝트(object)를 사전에 자바스크립트에서 만들어 놓은 오브젝트이다.

따라서, 사전처리없이 즉시 사용할 수 있다!

1. Number 오브젝트

Number 오브젝트는 원시 타입 number를 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체의 프로퍼티가 숫자를 값으로 가지고 있다면 Number 객체의 별도 생성없이 Number 객체의 프로퍼티와 메소드를 사용할 수 있다. 숫자 처리를 위한 함수와 프로퍼티가 포함되어 있는 오브젝트이다.

Number 생성자(Constructor)

Number 객체는 Number() 생성자 함수를 통해 생성할 수 있다.

new Number(value);

만일 파라미터 값이 숫자로 반환될 수 없다면 NaN을 반환한다.

var x = new Number(123);
var y = new Number('123');
var z = new Number('ABC');

console.log(x); // 123
console.log(y); // 123 - String타입이지만 값이 숫자이므로 숫자로 변환
console.log(z); // NaN

Number() 생성자 함수를 new 연산자를 붙이지 않아 생성자로 사용하지 않으면 Number 객체를 반환하지 않고 원시 타입 숫자를 반환한다. 이때 형 변환이 발생할 수 있다.

var x = 123;
var y = new Number(123); // 인스턴스 생성

console.log(x == y);  // true
console.log(x === y); // false

console.log(typeof x); // number
console.log(typeof y); // object

Number 프로퍼티(Property)

정적(static) 프로퍼티로 Number 객체를 생성할 필요없이
Number.propertyName의 형태로 사용한다.

Number.MAX_VALUE

자바스크립트에서 사용 가능한 가장 큰 숫자(1.7976931348623157e+308)를 반환한다. MAX_VALUE보다 큰 숫자는 Infinity이다.
Number.MIN_VALUE

자바스크립트에서 사용 가능한 가장 작은 숫자(5e-324)를 반환한다. MIN_VALUE는 0에 가장 가까운 양수 값이다. MIN_VALUE보다 작은 숫자는 0으로 변환된다.
Number.NaN

숫자가 아님(Not-a-Number)을 나타내는 숫자값이다. Number.NaN 프로퍼티는 window.NaN 프로퍼티와 같다.

console.log(Number('xyz')); // NaN
console.log(1 * 'string');  // NaN

Number 메소드(Method)

Number.prototype.isNaN()
Number.isNaN()는 전역 함수 isNaN()와 차이가 있다. 전역 함수 isNaN()는 인수를 숫자로 변환하여 검사를 수행하지만 Number.isNaN()는 인수를 변환하지 않는다. 따라서 숫자가 아닌 인수가 주어졌을 때 반환값은 언제나 false가 된다.

Number.isNaN(NaN)       // true
Number.isNaN(undefined) // false. undefined → NaN. isNaN(undefined) → true.
Number.isNaN({})        // false. {} → NaN.        isNaN({}) → true.
Number.isNaN('blabla')  // false. 'blabla' → NaN.  isNaN('blabla') → true.
Number.isNaN(true)      // false
Number.isNaN(null)      // false
Number.isNaN(37)        // false
Number.isNaN('37');     // false

Number.prototype.toString()
변환 대상을 String타입으로 변환한다.

let value = 20;
console.log(20 === value.toString());
// false. toString 메소드로 변환하면 String타입이 됨

console.log(value.toString(16));
// 14. 메소드 뒤에 16을 쓰면 16진수로 반환함.

💡 toString 메소드를 쓰며 주의해야할 점!
77.toString(); // SyntaxError: Invalid or unexpected token
이 코드와 같이 숫자 뒤의 .은 의미가 모호하다. 소수 구분 기호일 수도 있고 오브젝트 프로퍼티에 접근하기 위한 마침표일 수도 있다. 따라서 77.toString()은 숫자로 해석할 수 없으므로 에러(SyntaxError: Invalid or unexpected token)가 발생한다.
(77).toString(); // '77'
77 .toString(); // '77'
따라서 정수 리터럴과 함께 메소드를 사용할 경우, 이같은 방법으로 사용하면 좋다!

Number.prototype.toFixed()
매개변수로 지정된 소숫점자리를 반올림하여 문자열로 반환한다.

var numObj = 12345.6789;

// 소숫점 이하 반올림
console.log(numObj.toFixed());   // '12346'
// 소숫점 이하 1자리수 유효, 나머지 반올림
console.log(numObj.toFixed(1));  // '12345.7'
// 소숫점 이하 2자리수 유효, 나머지 반올림
console.log(numObj.toFixed(2));  // '12345.68'
// 소숫점 이하 3자리수 유효, 나머지 반올림
console.log(numObj.toFixed(3));  // '12345.679'
// 소숫점 이하 6자리수 유효, 나머지 반올림
console.log(numObj.toFixed(6));  // '12345.678900'

Number.prototype.valueOf()
Number 오브젝트의 원시 타입 값(primitive value)을 반환한다.

var numObj = new Number(10);
console.log(typeof numObj); // object

var num = numObj.valueOf();
console.log(num);           // 10
console.log(typeof num);    // number

2. String 오브젝트

String 오브젝트는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있다.

String 생성자(Constructor)

String 객체는 String 생성자 함수를 통해 생성할 수 있다. 이때 전달된 인자는 모두 문자열로 변환된다.

let strObj = new String('Lee');
console.log(strObj); // String {0: 'L', 1: 'e', 2: 'e', length: 3, [[PrimitiveValue]]: 'Lee'}

strObj = new String(1);
console.log(strObj); // String {0: '1', length: 1, [[PrimitiveValue]]: '1'}

strObj = new String(undefined);
console.log(strObj); // String {0: 'u', 1: 'n', 2: 'd', 3: 'e', 4: 'f', 5: 'i', 6: 'n', 7: 'e', 8: 'd', length: 9, [[PrimitiveValue]]: 'undefined'}

String 프로퍼티(Property)

String.length
문자열 내의 문자 갯수를 반환한다. String 오브젝트는 length 프로퍼티를 소유하고 있다.

const str1 = 'Hello';
console.log(str1.length); // 5

const str2 = '안녕하세요!';
console.log(str2.length); // 6

String 메소드(Method)

String 오브젝트의 모든 메소드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(immutable)한 원시 값이기 때문이다.

String.prototype.charAt()
인수로 전달한 index를 사용하여 index에 해당하는 위치의 문자를 반환한다. index는 0 ~ (문자열 길이 - 1) 사이의 정수이다. 지정한 index가 문자열의 범위(0 ~ (문자열 길이 - 1))를 벗어난 경우 빈문자열을 반환한다.

const str = 'Hello';

console.log(str.charAt(0)); // H
console.log(str.charAt(1)); // e
console.log(str.charAt(2)); // l
console.log(str.charAt(3)); // l
console.log(str.charAt(4)); // o
// 지정한 index가 범위(0 ~ str.length-1)를 벗어난 경우 빈문자열을 반환한다.
console.log(str.charAt(5)); // ''

// 문자열 순회. 문자열은 length 프로퍼티를 갖는다.
for (let i = 0; i < str.length; i++) {
  console.log(str.charAt(i));
}

String.prototype.indexOf()
인수로 전달한 문자 또는 문자열을 대상 문자열에서 검색하여 처음 발견된 곳의 index를 반환한다. 발견하지 못한 경우 -1을 반환한다.

const str = 'Hello World';

console.log(str.indexOf('l'));  // 2 -> 문자열은 0부터 시작이기 때문에 2가 출력됨
console.log(str.indexOf('or')); // 7
console.log(str.indexOf('or' , 8)); // -1

if (str.indexOf('Hello') !== -1) {
  // 만약 문자열 str에 'hello'가 포함되어 있는 경우에 처리할 내용
}

// ES6: String.prototype.includes
if (str.includes('Hello')) {
  // 문자열 str에 'hello'가 포함되어 있는 경우에 처리할 내용
}

String.prototype.split()
첫번째 인수로 전달한 문자열 또는 정규표현식을 대상 문자열에서 검색하여 문자열을 구분한 후 분리된 각 문자열로 이루어진 배열을 반환한다. 원본 문자열은 변경되지 않는다.

onst str = 'How are you doing?';

// 공백으로 구분(단어로 구분)하여 배열로 반환한다
console.log(str.split(' ')); // [ 'How', 'are', 'you', 'doing?' ]

// 정규 표현식
console.log(str.split(/\s/)); // [ 'How', 'are', 'you', 'doing?' ]

// 인수가 없는 경우, 대상 문자열 전체를 단일 요소로 하는 배열을 반환한다.
console.log(str.split()); // [ 'How are you doing?' ]

// 각 문자를 모두 분리한다
console.log(str.split('')); // [ 'H','o','w',' ','a','r','e',' ','y','o','u',' ','d','o','i','n','g','?' ]

// 공백으로 구분하여 배열로 반환한다. 단 요소수는 3개까지만 허용한다
console.log(str.split(' ', 3)); // [ 'How', 'are', 'you' ]

// 'o'으로 구분하여 배열로 반환한다.
console.log(str.split('o')); // [ 'H', 'w are y', 'u d', 'ing?' ]

💡 백준 문제풀이 node.js로의 변환(fs모듈 사용)에서 두 번째 문단 코드를 보면
let input = fs.readFileSync('/dev/stdin').toString().split(' ');
toString()을 통해 문자열로 변환한 다음, split(' ')을 통해 한칸 띄어쓰기 구분 후 input[0], input[1] ... 배열을 만들어 주는 것이었다.(맞나..?) 또한
let input = fs.readFileSync('/dev/stdin').toString().split('\n');
이 코드에서는 줄바꿈으로 구분해주는 것!

String.prototype.substring(start index,end index)
첫 번째 인수로 전달한 start 인덱스에 해당하는 문자부터 두번째 인자에 전달된 end 인덱스에 해당하는 문자의 바로 이전 문자까지를 모두 반환한다. 이때 첫번째 인수 < 두번째 인수의 관계가 성립된다.

const str = 'Hello World'; // str.length == 11

console.log(str.substring(1, 4)); // ell

// 첫번째 인수 > 두번째 인수 : 두 인수는 교환된다.
console.log(str.substring(4, 1)); // ell

// 두번째 인수가 생략된 경우 : 해당 문자열의 끝까지 반환한다.
console.log(str.substring(4)); // o World

// 인수 < 0 또는 NaN인 경우 : 0으로 취급된다.
console.log(str.substring(-2)); // Hello World

// 인수 > 문자열의 길이(str.length) : 인수는 문자열의 길이(str.length)으로 취급된다.
console.log(str.substring(1, 12)); // ello World
console.log(str.substring(11)); // ''
console.log(str.substring(20)); // ''
console.log(str.substring(0, str.indexOf(' '))); // 'Hello'
console.log(str.substring(str.indexOf(' ') + 1, str.length)); // 'World'

💡 substring과 slice의 차이는?
둘 다 자른 문자열을 주는 것은 동일하나 slice는 음수를 인덱스에 넣을 수 있다.
const str = 'hello world';
// 인수 < 0 또는 NaN인 경우 : 0으로 취급된다.
console.log(str.substring(-5)); // 'hello world'
// 뒤에서 5자리를 잘라내어 반환한다.
console.log(str.slice(-5)); // 'world'

String.prototype.toLowerCase()

대상 문자열의 모든 문자를 소문자로 변경한다.
String.prototype.toUpperCase()

대상 문자열의 모든 문자를 대문자로 변경한다.
String.prototype.trim()

대상 문자열 양쪽 끝에 있는 공백 문자를 제거한 문자열을 반환한다.

const str = '   foo  ';

console.log(str.trim()); // 'foo'

String.prototype.repeat() ES6
인수로 전달한 숫자만큼 반복해 연결한 새로운 문자열을 반환한다. count가 0이면 빈 문자열을 반환하고 음수이면 RangeError를 발생시킨다.

console.log('abc'.repeat(0));   // ''
console.log('abc'.repeat(1));   // 'abc'
console.log('abc'.repeat(2));   // 'abcabc'
console.log('abc'.repeat(2.5)); // 'abcabc' (2.5 → 2)
console.log('abc'.repeat(-1));  // RangeError: Invalid count value

String.prototype.includes() ES6
인수로 전달한 문자열이 포함되어 있는지를 검사하고 결과를 불리언 값으로 반환한다.

dudgus5766

RN App Developer

이전 포스트

TIL 13_JavaScript 'Object'

다음 포스트

TIL 14_JavaScript 'Built-in Object(2)'

2개의 댓글

JU CHEOLJIN

2021년 7월 14일

잘 모르고 사용했었는데... 명확하게 정리가 잘 되어있어서 눈에 잘 들어오네요!! 감사합니다👍

1개의 답글

TIL 14_JavaScript 'Built-in Object(1)'

JavaScript

Built-in Object

네이티브 오브젝트

빌트인 오브젝트

1. Number 오브젝트

Number 생성자(Constructor)

Number 프로퍼티(Property)

Number.MAX_VALUE

Number.MIN_VALUE

Number.NaN

Number 메소드(Method)

Number.prototype.isNaN()

Number.prototype.toString()

Number.prototype.toFixed()

Number.prototype.valueOf()

2. String 오브젝트

String 생성자(Constructor)

String 프로퍼티(Property)

String.length

String 메소드(Method)

String.prototype.charAt()

String.prototype.indexOf()

String.prototype.split()

String.prototype.substring(start index,end index)

String.prototype.toLowerCase()

String.prototype.toUpperCase()

String.prototype.trim()

String.prototype.repeat() ES6

String.prototype.includes() ES6

TIL 13_JavaScript 'Object'

TIL 14_JavaScript 'Built-in Object(2)'

2개의 댓글