JavaScript 에센셜 | 위니북스

원시타입 메서드

1. 문자열 메서드

1.1 문자열 검색

indexOf()

문자열 내에서 특정 문자나 문자열의 첫 번째 위치를 반환합니다. 찾는 문자열이 없으면 -1을 반환합니다.

let str = 'Hello World!'; console.log(str.indexOf('o')); console.log(str.indexOf('a'));

두 번째 매개변수로 검색을 시작할 위치를 지정할 수도 있습니다.

let str = 'Hello World, Hello Weniv!'; console.log(str.indexOf('Hello', 4));

lastIndexOf()

문자열 내에서 특정 문자나 문자열의 마지막 위치를 반환합니다. 찾는 문자열이 없으면 -1을 반환합니다.

let str = 'Hello World!'; console.log(str.lastIndexOf('o')); console.log(str.lastIndexOf('a'));

두 번째 매개변수로 검색을 시작할 위치를 지정할 수도 있습니다.

let str = 'Hello World, Hello Weniv!'; console.log(str.lastIndexOf('Hello', 4));

includes()

문자열이 특정 문자열을 포함하는지를 확인합니다. 포함하면 true, 포함하지 않으면 false를 반환합니다.

let str = 'Hello World!'; console.log(str.includes('o')); console.log(str.includes('a'));

1.2 문자열 추출

charAt()

특정 인덱스의 문자를 반환합니다. 인덱스가 범위를 벗어나면 빈 문자열을 반환합니다.

let str = 'Hello World!'; console.log(str.charAt(1)); console.log(str.charAt(100));

substring()

문자열에서 시작 인덱스부터 종료 인덱스 전까지의 문자열을 반환합니다. 종료 인덱스를 생략하면 문자열 끝까지 반환합니다.

let str = 'Hello World!'; console.log(str.substring(1, 4)); console.log(str.substring(4));

slice()

substring과 비슷하지만 음수 인덱스를 사용할 수 있습니다. 음수 인덱스는 문자열 끝에서부터 시작하며 -1은 마지막 문자를 가리킵니다.

let str = 'Hello World!'; console.log(str.slice(1, 4)); console.log(str.slice(4)); console.log(str.slice(-5));

substring과 slice의 차이

시작 인덱스가 종료 인덱스보다 큰 경우, substring은 두 인덱스를 교환하여 처리합니다. slice는 빈 문자열을 반환합니다.

const str = 'Hello World! Hello Weniv!'; console.log(str.substring(12, 5)); // substring(5, 12)로 처리 console.log(str.slice(4, 1));
시작 인덱스가 음수인 경우, substring은 0으로 처리합니다.

const str = 'Hello World!'; console.log(str.substring(-5)); // substring(0) console.log(str.slice(-5));

substr()

substr은 시작 인덱스와 길이를 지정하여 문자열을 반환합니다. 음수 인덱스를 허용합니다.

let str = 'Hello World!'; console.log(str.substr(1, 4)); console.log(str.substr(4)); console.log(str.substr(-5));

Deprecated

MDN은 웹표준에서 제거된 함수를 Deprecated로 명시합니다. substr은 현재 웹 표준에서 제거된 것은 아니지만 명세에서 사라질 수 있기 때문에 substring이나 slice를 사용하는 것을 권장합니다.

String.prototype.substr() - JavaScript | MDN

1.3 문자열 변환

toUpperCase(), toLowerCase()

문자열을 대문자로 변환하거나 소문자로 변환합니다.

let str = 'Hello World!'; console.log(str.toUpperCase()); console.log(str.toLowerCase());

원시타입의 불변성
문자열을 변환하는 메서드는 원본 문자열을 변경하지 않고 새로운 문자열을 반환합니다. 이는 문자열이 원시타입이기 때문에 불변성을 가지기 때문입니다.

let str = 'Hello World!'; console.log(str.toUpperCase()); console.log(str);

trim(), trimStart(), trimEnd()

문자열의 앞뒤 공백을 제거합니다. trimStart는 앞쪽 공백을, trimEnd는 뒤쪽 공백을 제거합니다.

let str = ' Hello World! '; console.log(str.trim()); console.log(str.trimStart()); console.log(str.trimEnd());

padStart(), padEnd()

문자열의 자릿수를 맞추기 위해 앞뒤로 문자를 채웁니다. 첫 번째 매개변수는 총 길이, 두 번째 매개변수는 채울 문자열입니다.

let str = '42'; console.log(str.padStart(5, '0')); console.log(str.padEnd(5, '-'));

replace(), replaceAll()

문자열에서 패턴을 검색하여 다른 문자열로 대체합니다. replace는 첫 번째 패턴만 대체하고, replaceAll은 모든 패턴을 대체합니다.

let str = 'Hello World!'; console.log(str.replace('World', 'Weniv')); console.log(str.replaceAll('o', 'a'));

1.4 문자열 분할

split()

문자열을 지정한 구분자를 기준으로 분할하여 배열로 반환합니다. 빈 문자열을 구분자로 지정하면 문자열을 한 글자씩 분할합니다.

let fruits = 'apple, banana, orange'; console.log(fruits.split(', ')); console.log(fruits.split(''));

두 번째 매개변수로 배열의 길이를 제한할 수 있습니다.

let fruits = 'apple, banana, orange'; console.log(fruits.split(', ', 2));

repeat()

문자열을 지정한 횟수만큼 반복합니다.

let str = '*'; console.log(str.repeat(3));

2. 숫자 메서드

2.1 숫자 변환 메서드

parseInt(), parseFloat()

문자열을 숫자로 변환합니다. parseInt는 정수로, parseFloat는 실수로 변환합니다.

console.log(`parseInt('2025년') : ${parseInt('2025년')}`); console.log(`parseFloat('12.5px') : ${parseFloat('12.5')}`);

parseInt는 두 번째 매개변수로 진수를 지정할 수 있습니다.

console.log(`parseInt('11', 2) : ${parseInt('11', 2)}`);

isNaN()

NaN는 동등 연산자 또는 일치 연산자로 비교할 수 없습니다. isNaN은 값이 NaN인지 확인합니다. 값을 숫자로 변환하여 NaN인지 판별합니다.

console.log(`isNaN('hello') : ${isNaN('hello')}`); console.log(`isNaN(3) : ${isNaN(3)}`);

isFinite()

값이 유한한지 확인합니다. 값을 숫자로 변환하여 판별하며, Infinity, -Infinity, NaN은 유한하지 않습니다.

console.log(`isFinite(Infinity) : ${isFinite(Infinity)}`); console.log(`isFinite(-Infinity) : ${isFinite(-Infinity)}`); console.log(`isFinite('Hello') : ${isFinite('Hello')}`); console.log(`isFinite(3) : ${isFinite(3)}`);

2.2 Number 인스턴스 메서드

toFixed()

소수점 이하의 자릿수를 지정하여 문자열로 반환합니다. 인자를 지정하지 않으면 소수점 이하를 제거하고 문자열로 반환합니다. 인자가 소수점 자릿수보다 크면 0으로 채워 문자열을 반환합니다.

const PI = 3.141592; console.log(PI.toFixed()); console.log(PI.toFixed(2)); console.log(PI.toFixed(4)); console.log(PI.toFixed(9));

toString()

숫자를 문자열로 변환합니다. 진수를 지정할 수 있습니다.

let num = 5; console.log(num.toString()); console.log(num.toString(2));

3.toString()은 오류가 발생합니다
자바스크립트 엔진은 숫자 뒤의 점을 소수점으로 인식합니다. 따라서 3 뒤에 오는 점을 소수점으로 인식하여 오류가 발생합니다. 정수 값에 메서드를 사용하려면 소괄호로 숫자를 감싸주어야 합니다.

// console.log(3.toString()); // 오류 console.log((3).toString()); console.log(3.14.toString());

2.3 Number 객체 메서드

Number.isNaN()

숫자로 형 변환 없이 값이 NaN인지 확인합니다.

console.log(`Number.isNaN('hello') : ${Number.isNaN('hello')}`); console.log(`Number.isNaN(3) : ${Number.isNaN(3)}`);

Number.isFinite()

숫자로 형 변환 없이 값이 유한한지 확인합니다.

console.log(`Number.isFinite(Infinity) : ${Number.isFinite(Infinity)}`); console.log(`Number.isFinite(-Infinity) : ${Number.isFinite(-Infinity)}`); console.log(`Number.isFinite('Hello') : ${Number.isFinite('Hello')}`); console.log(`Number.isFinite(3) : ${Number.isFinite(3)}`);

3. 원시타입의 메서드

메서드는 일반적으로 객체 타입에서만 사용할 수 있는 기능입니다. 그러나 자바스크립트의 원시 타입 값에서도 메서드를 사용할 수 있습니다. 이는 자바스크립트 엔진이 원시 타입의 값을 일시적으로 객체로 변환 하여 메서드를 사용할 수 있게끔 처리하기 때문입니다.

const str = 'hello!'; console.log(str.toUpperCase());

위 코드는 실제로 아래와 같이 동작합니다. 일시적으로 문자열 객체를 만들고 이 객체에 있는 메서드를 호출한 뒤, 객체를 제거합니다. 이처럼 원시타입을 마치 객체 타입처럼 사용할 수 있게 하는 것을 '원시 래퍼 객체(Primitive Wrapper Object)' 라고 합니다.

let temp = new String('hello!');
console.log(temp.toUpperCase());
temp = null;

let temp = new String('hello!');
console.log(temp.toUpperCase());
temp = null;

이 과정을 통해 원시타입도 객체타비처럼 다양한 메서드를 사용할 수 있게 함으로써 일관적인 사용 경험을 제공합니다.