소년코딩의 자바스크립트 강좌 15. 원시 래퍼 타입

원시 래퍼 또는 객체 래퍼라는 타입은 자바스크립트 원시 값을 편리하게 조작하기 위해 디자인된 참조 타입이다.

원시 값엔 프로퍼티나 메서드가 없으므로 .length, .toString()으로 접근하려면 원시 값을 원시 래퍼로 감싸줘야한다.

• Number(숫자)
• String(문자열)
• Boolean(불린값)

이들 타입은 대응하는 원시 값과 연관된 독특한 동작 방식을 가진다.

고맙게도 자바스크립트는 원시 값을 알아서 래핑하므로 원시 값을 읽을 때마다 이에 해당하는 래퍼 타입이 이면에서 생성되므로 각 타입별로 호출 가능한 표준메서드를 사용할 수 있다.

var a = 'oppa';
a.length;           // 4
a.toUpperCase();    // 'OPPA'

 

기본 타입의 원시 값들에 대해서 객체 형태로 메서드를 호출할 경우, 이들 원시 값은 메서드 처리 순간에 객체로 변환된 다음 각 타입별 표준 메서드를 호출하게된다. 그 후 메서드 호출이 끝나면 다시 원시값으로 복귀하게 된다.

1. String 타입의 인스턴스를 만든다.
2. 해당 인스턴스에서 메서드를 호출한다
3. 인스턴스를 파괴한다.

이러한 순서이며, 코드로 옮기면 다음과 같다.

var s1 = new String('oppa');
var s2 = s1.toUpperCase();
s1 = null;

 

원시 래퍼 타입과 참조 타입은 주요한 차이점은 생명 주기다.

new 연산자를 사용해 참조 타입의 인스턴스를 만들면 스코프를 벗어날 때 까지 메모리에 존재하지만 자동으로 생성된 원시 래퍼 타입은 코드의 해당 행을 벗어나는 즉시 파괴된다.

그러므로 런타임중에 프로퍼티나 메서드를 추가할 수 없다.

var s1 = 'oppa'
s1.age = 25;
console.log(s1.age);    // undefined

 

Number, String, Boolean 생성자를 사용해 명시적으로 원시 래퍼 객체를 생성할 수 있지만, 원시 값인지 래퍼 객체인지 혼란스러울수 있으므로 꼭 필요한 경우가 아니면 사용하지 않는 것이 좋다.

var age = new Number(25);
console.log(age)    // Number {[[PrimitiveValue]]: 25}
console.log(age.valueOf());    // 25

원시 래퍼 타입의 원시 값은 valueOf() 메서드로 추출한다.

---

1. Number 타입은 숫자형 값의 참조 타입이다.

var numberObject = new Number(10);

 

Number 타입은 object.prototype의 valueOf(), toString() 메서드를 오버라이드한다.

valueOf() 메서드는 객체가 나타내는 원시 숫자형 값을 반환하고, 다른 두 메서드는 문자열을 반환한다.

또한 toString() 메서드는 옵션으로 진법 매개변수를 받는다.

var num = 10;
 
console.log(num.toString());      // '10'
console.log(num.toString(2));     // '1010'  2진법
console.log(num.toString(8));     // '12'    8진법

 

또한 Number 타입에는 상속받은 메서드 외에도 숫자를 다양한 형식의 문자열로 반환하는 메서드가 있다.

• toFixed()
• toExponential()
• toPrecision()

 

1) toFixed()

지정한 만큼의 정확도로 소수점을 찍는 문자열을 반환하는 메서드다.

var num = 10;
num.toFixed(2);    // '10.00'

매개변수는 소수점 뒤 몇 자리를 표시할지를 나타낸다. 메서드를 호출한 객체의 소수점 뒤 자릿수가 매개변수로 지정한 자릿수 보다 크면 반올림한다.

 

2) toExponential()

숫자를 지수 표기법 문자욜로 반환하는 메서드다.

var num = 10;
num.toExponential(1);    // '1.0e+1'

 

3) toPrecision()

숫자에 따라 지수 표기법이나 소수점 표기법을 선택하여 변환하는 메서드다.

매개변수로 숫자 표현에 사용할 총 자릿수를 매개변수로 받는다.

var num = 99;
num.toPrecision(1);    // '1e+2'
num.toPrecision(2);    // '99'
num.toPrecision(3);    // '99.0'

자신을 호출한 객체의 숫자형 값에 따라 toFixed()나 toExponential()중 하나를 호출한다.

 

세 메서드 모두 매개변수로 지정한 자릿수에 맞게끔 적절히 반올림하거나 내림한다.

---

2. String 타입은 문자열 값의 참조 타입이다.

var stringObject = new String('Oppa Coding');

String 객체의 메서드는 모두 원시 문자열에서 사용 가능하다.

valueOf(), toLacaleString(), toString() 메서드는 모두 객체의 원시 문자열 값을 반환한다.

 

String의 인스턴스는 모두 length 프로퍼티가 있는데 이 프로퍼티에는 문자열 길이를 나타내는 숫자가 저장되어 있다.

var stringObject = new String('Oppa coding');
stringObject.length;    // 11

또한 자바스크립트의 String 타입에는 문자열을 조작하는 메서드가 많이 있다.

 

1) 글자 메서드

• chartAt()

• charCodeAt()

charAt() 메서드: 매개변수로 받은 인덱스에 위치한 문자를 한 글자로 이루어진 문자열로 반환한다.

charCodeAt() 메서드: 매개변수로 받은 인덱스에 위치한 문자의 문자 코드를 반환한다.

var stringObject = 'Oppa coding';

stringObject.chartAt(1);       // 'p'
stringObject.charCodeAt(1);    // '112' -> 소문자 p의 문자 코드

 

2) 문자열 조작 메서드

• concat()

• slice()

• substr()

• substring()

concat() 메서드: 문자열을 병합하여 그 결과를 반환한다.

var string = 'Oppa ';
var result = string.concat('coding', '~');

result;    // 'Oppa coding~'
string;    // 'Oppa '

 

slice(), substring() 메서드: 자신을 호출한 문자열의 일부를 반환하며, 매개변수는 한 깨 또는 두 개를 받는다.

• 번째 매개변수: 어디서부터 가져올 것인지를 나타낸다.

• 번째 매개변수(옵션): 어디까지 가져올 것인지를 나타낸다.(그 위치 직전까지 문자는 가져오고, 해당 위치의 문자는 가져오지 않는다.)

 

substr() 메서드: slice(), substring()와 같지만, 두 번째 매개변수가 문자 몇개를 가져올지 나타낸다.

(세 메서드 모두 두 번째 매개변수를 생략하면 문자열 전체 길이가 기본값으로 사용된다.)

var string = 'Oppa coding';
 
string.slice(3);          // 'a coding'
string.slice(3, 7);       // 'a co'
 
string.substring(3);      // 'a coding'
string.substring(3, 7);   // 'a co'
 
string.substr(3);         // 'a coding'
string.substr(3, 7);      // 'a codin

 

3) 문자열 위치 메서드

• indexOf()

• lastIndexOf()

indexOf() 메서드: 매개변수로 넘긴 문자열의 처음(인덱스 0)에서 검색을 시작하며 마지막까지 검색한다.

lastIndexOf() 메서드: 문자열 마지막에서부터 검색을 시작한다.

두 메서드 모두 매개변수로 넘긴 문자열을 검색해 그 위치를 반환하며, 찾지 못했을 경우 -1을 반환한다.

var string = 'Oppa Coding';

string.indexOf('p');      // 1
string.lastIndexOf('p');  // 2

 

4) trim

trim() 메서드: 문자열을 복사한 후 앞뒤 공백을 모두 제거한 결과를 반환한다.

var string = '        Oppa Coding      ';
var trimmedString = strimg.trim();    // 'Oppa Coding';

 

5. 대소문자 메서드

• toUpperCase

• toLowerCase

toUpperCase(): 문자열에 있는 모든 영문자를 대문자로 변환해 반환한다.

toLowerCase(): 문자열에 있는 모든 영문자를 소문자로 변환해 반환한다.

var string = 'Oppa coding';
 
console.log(string.toUpperCase());        // 'OPPA CODING'
console.log(string.toLowerCase());        // 'oppa coding'

---

 

by 소년코딩

추천은 글쓴이에게 큰 도움이 됩니다.

악플보다 무서운 무플, 댓글은 블로그 운영에 큰 힘이됩니다.