이해가 되지 않아 김영보 쌤의 강의를 몇 번이고 돌려보게 만들었던..
Built-in Object
😡
차례 차례 한 개씩 설명하며 이해해보자!
이 글은 인프런에서의 'Javascript 비기너' 강의와 https://poiemaweb.com/ 에서의 빌트인 오브젝트 관련 내용을 참고하여 작성함.
자바스크립트의 객체는 아래와 같이 크게 3개의 객체로 분류할 수 있다.
자바스크립트 스펙에서 정의한 오브젝트로 빌트인 오브젝트가 포함되어 있다.
값 타입, 연산자, 오브젝트(object)를 사전에 자바스크립트에서 만들어 놓은 오브젝트이다.
따라서, 사전처리없이 즉시 사용할 수 있다!
Number 오브젝트는 원시 타입 number를 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체의 프로퍼티가 숫자를 값으로 가지고 있다면 Number 객체의 별도 생성없이 Number 객체의 프로퍼티와 메소드를 사용할 수 있다. 숫자 처리를 위한 함수와 프로퍼티가 포함되어 있는 오브젝트이다.
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
정적(static) 프로퍼티로 Number 객체를 생성할 필요없이
Number.propertyName
의 형태로 사용한다.
자바스크립트에서 사용 가능한 가장 큰 숫자(1.7976931348623157e+308)를 반환한다. MAX_VALUE보다 큰 숫자는 Infinity
이다.
자바스크립트에서 사용 가능한 가장 작은 숫자(5e-324)를 반환한다. MIN_VALUE는 0에 가장 가까운 양수 값이다. MIN_VALUE보다 작은 숫자는 0
으로 변환된다.
숫자가 아님(Not-a-Number)을 나타내는 숫자값이다. Number.NaN 프로퍼티는 window.NaN 프로퍼티와 같다.
console.log(Number('xyz')); // NaN
console.log(1 * 'string'); // NaN
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
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'
따라서 정수 리터럴과 함께 메소드를 사용할 경우, 이같은 방법으로 사용하면 좋다!
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'
var numObj = new Number(10);
console.log(typeof numObj); // object
var num = numObj.valueOf();
console.log(num); // 10
console.log(typeof num); // number
String 오브젝트는 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메소드를 제공하는 레퍼(wrapper) 객체이다. 변수 또는 객체 프로퍼티가 문자열을 값으로 가지고 있다면 String 객체의 별도 생성없이 String 객체의 프로퍼티와 메소드를 사용할 수 있다.
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'}
const str1 = 'Hello';
console.log(str1.length); // 5
const str2 = '안녕하세요!';
console.log(str2.length); // 6
String 오브젝트의 모든 메소드는 언제나 새로운 문자열을 반환한다. 문자열은 변경 불가능(immutable)한 원시 값이기 때문이다.
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));
}
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'가 포함되어 있는 경우에 처리할 내용
}
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');
이 코드에서는 줄바꿈으로 구분해주는 것!
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'
대상 문자열의 모든 문자를 소문자로 변경한다.
대상 문자열의 모든 문자를 대문자로 변경한다.
대상 문자열 양쪽 끝에 있는 공백 문자를 제거한 문자열을 반환한다.
const str = ' foo ';
console.log(str.trim()); // 'foo'
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
잘 모르고 사용했었는데... 명확하게 정리가 잘 되어있어서 눈에 잘 들어오네요!! 감사합니다👍