*🔐Study Keyword :

Number와 String의 🗝️대표적인 메서드 3개의 🔑사용 방법에 대해서 공부해보장

• 밑의 코드를 보고 이상함을 느꼈다면 당신은 천재..!🤴

<script>
const str = "문자열";   // 문자열 생성
const len = str.length; // 문자열 프로퍼티인 length 사용
console.log(len)//3
</script>

• 💁‍♂️ : str 변수는 어떻게 문자열의 길이를 값으로 반환해주는 length 프로퍼티를 사용할 수 있는거쥬..❓ 문자열 리터럴 str은 객체도 아니잖아유...❓

- 래퍼 객체(wrapper object)

• 🧏‍♀️ : 프로그램이 문자열 str의 프로퍼티를 참조하려고 할 때 자바스크리브 엔진이 new String(str)을 호출한 것처럼 문자열 리터럴을 객체로 자동 변환한다구❕
  그렇기 때문에 str은 객체로 취급되어 프로퍼티 length에 접근할 수 있다는거라구~

• 래퍼 객체(wrapper object)란 이렇게 숫자, 문자열, 불리언 등의
  원시 타입의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체를 의미합니다.

<script>
const str = "문자열"; // 문자열 리터럴 생성
const strObj = new String(str); // 문자열 객체 생성
//원시 타입의 프로퍼티에 접근하려할 때 임시로 생성되는 객체를 래퍼 또는 임시 객체라한다.
str.length;                   
// 리터럴 값은 내부적으로 래퍼 객체를 생성한 후에 length 프로퍼티를 참조할 수 있다.
console.log(str.length)// 3
str == strObj;//true, 동등 연산자는 리터럴 값과 해당 래퍼 객체를 동일하게 본다.
str === strObj;//false, 허나 일치 연산자는 리터럴 값과 해당 래퍼 객체를 구별할 수 있다.
typeof str;                   // string 타입
typeof strObj;                // object 타입
</script>

• 이러한 임시 객체(wrapper)는 Number(), String(), Boolean(), Symbol() 생성자를 통해 만들어지고 임시객체를 통해 호출됩니다.

<script>
//원시 타입의 값에 대한 속성을 참조하면 순간 객체로 변환되어 객체인 것처럼 동작한다.
const strType = 'hello'; 
strType.toUpperCase(); // 'HELLO'
strType.length; // 5
const numType = 1.2345;
numType.toFixed(2); // '1.23'
const booleanType = true;
booleanType.toString(); // 'true'
</script>

🚫래퍼 객체 주의사항🚫)

• 원시값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체를 생성하여 생성된 객체로 프로퍼티에 접근하거나 메서드를 호출하고 다시 원시값으로 되돌린다.
• 임시적으로 변환된 임시객체는 String과 Number 객체의 메소드를 상속받아 프로퍼티를 참조할 수 있지만 프로퍼티의 참조가 해제되면 식별자가 원시값을 되돌리고 새로 생성된 임시 객체는 가비지 컬렉션의 대상으로서 메모리에서 자동으로 회수된다.

<script>
const str = "hi";
//원시 타입인 문자열이 래퍼 객체인 String 객체로 변환된다.
console.log(str.length) //2
//래퍼 객체로 프로퍼티에 접근하거나 메소드 호출한 후 다시 원시값으로 되돌린다.
console.log(typeof str)//string
const num = 1;
//원시 타입인 숫자가 래퍼 객체인 Number 객체로 변환된다.
console.log(num.toFixed()) //2
//위와 동일하게 원시값으로 돌아간다.
console.log(typeof num)//1.5
</script>

-->값을 할당하는 것은 오직 임시 객체에서 수행되고 지속되지 않는다.
문자열, 숫자, 불리언의 프로퍼티에 접근하려고 할 때 생성되는 임시 객체 인 래퍼(wrapper) 객체는 다른 객체와 달리 문자열과 숫자, 불리언 값의 프로퍼티가 읽기 전용라는 점에서 차이가 있으니 명심하자!

- Number 메소드

따라서 래퍼객체 기능으로 인해 number 타입은 객체가 아니지만, 마치 객체처럼 메소드를 사용할 수 있게 되는 것이다.

• WHAT IS❓

• Number 메소드는 Number 객체에 정의되어 있는 숫자와 관련된 작업을 할 때 사용하는 메소드입니다.
• 모든 Number 인스턴스는 Number.prototype으로부터 메소드와 프로퍼티를 상속받아Number.prototype 메소드 역시 사용가능하다

‣ Number.parseFloat()

Number.parseFloat() 메소드는 문자열을 파싱(parsing)하여, 문자열에 포함된 숫자 부분을 실수 형태로 반환합니다.
문자열에 여러 개의 숫자가 존재하면, 그중에서 첫 번째 숫자만을 실수 형태로 반환합니다.

Number.parseFloat("1");         // 1
Number.parseFloat("1.2");      // 1.2 - 실수 형태로 반환!
Number.parseFloat("123문자열");   // 123
Number.parseFloat("1234 56 78");   // 1234
Number.parseFloat("문자열 910")); // NaN

‣ Number.isNaN() 메소드

Number.isNaN() 메소드는 전달된 값이 NaN인지 아닌지를 검사하는 메소드로 오직 숫자인 값에서만 동작하며, 그 값이 NaN인 경우에만 true를 반환합니다.

// Number.isNaN() 메서드는 NaN인지를 검사하여 결과를 반환해준다.
Number.isNaN(NaN);       // true
Number.isNaN(0 / 0);     // true
Number.isNaN("NaN");     // false
Number.isNaN(undefined); // false

‣ toString() 메소드

이 메소드는 Number 인스턴스의 값을 문자열로 반환합니다. 전달받은 값에 해당하는 진법으로 우선 값을 변환한 후, 그 값을 문자열로 반환합니다.

const num = 255;       // Number 인스턴스를 생성함.
num.toString();      // 255
(255).toString();    // 255
(3.14).toString();   // 3.14
num.toString(2);     // 11111111 - 2진법으로 바꾼 값

- String 메소드

• WHAT IS❓

• String 메소드는 String 객체에 정의된 문자열과 관련된 작업을 할 때 사용하는 메소드입니다.
• String 인스턴스에 String.prototype(따로 포스팅할 예정!)으로부터 메소드와 프로퍼티를 상속받은 String.prototype 메소드를 활용해 문자열 작업을 할 수 있는 것들이 더 다양해 대표적인 3가지를 소개해보겠다.

‣ indexOf() 메소드

문자열에서의 위치를 찾는 메소드로 String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환합니다.

const str = "abcDEFabc";
str.indexOf('abc');     // 0  -> 인덱스는 0부터 시작하기 때문
str.indexOf('abcd');    /* -1 -> 전달 받은 문자나 문자열 찾지 못할 땐 -1 반환하고문자열을 비교할 때 문자의 대소문자를 구분한다.*/
str.indexOf('abc', 3);  // 6  -> 두번째 인수로 문자열을 찾기 시작할 String 인스턴스 위치를 전달해 인덱스 3 위치인 D부터 'abc'를 찾기 시작한다.

‣ - slice() 메소드

문자열 추출해주는 메소드로 String 인스턴스에서 전달받은 시작 인덱스부터 종료 인덱스 바로 앞까지의 문자열만을 추출하여 만든 새로운 문자열을 반환합니다.

const str = "abcDEFabc";
str.slice(2, 6);     // cDEF     -> 인덱스 2부터 인덱스 5까지의 문자열을 추출함.
str.slice(-4, -2);   // Fa       -> 음수로 전달된 인덱스는 문자열의 뒤에서부터 시작해 -4부터 -3까지의 인덱스 문자열 추출한다.
str.slice(2);        // cDEFabc -> 인수로 종료 인덱스가 전달되지 않으면 문자열의 마지막까지 추출한다.

‣ indexOf() 메소드

문자열에서의 위치를 찾는 메소드로 String 인스턴스에서 특정 문자나 문자열이 처음으로 등장하는 위치나 마지막으로 등장하는 위치를 반환합니다.

const str = "abcDEFabc";
str.indexOf('abc');     // 0  -> 인덱스는 0부터 시작하기 때문
str.indexOf('abcd');    /* -1 -> 전달 받은 문자나 문자열 찾지 못할 땐 -1 반환하고문자열을 비교할 때 문자의 대소문자를 구분한다.*/
str.indexOf('abc', 3);  // 6  -> 두번째 인수로 문자열을 찾기 시작할 String 인스턴스 위치를 전달해 인덱스 3 위치인 D부터 'abc'를 찾기 시작한다.

‣ concat() 메소드

문자열 결합 메소드는 String 인스턴스에 전달받은 문자열을 결합한 새로운 문자열을 반환합니다.

const str = "abc";
str; //abc
str.concat('efg');     // abcefg 
str; // abc - String 인스턴스의 값은 immutable 속성을 가져 여전히 처음과 같다..*/

🚫String 메소드 결과값 주의사항🚫)

String 메소드의 결과값은 오직 새로운 문자열을 생성하여 반환한다.
String 인스턴스 값은 변경할 수 없는 특성을 지녔때문이지..!

*💡conclusion

• 래퍼객체? 우리가 string, number 타입이 메서드를 가지면서 객체인 것 처럼 사용할 수 있는 이유는 string과 number가 래퍼객체, 즉 원시타입을인 숫자형과 문자형 불린형에 한해 임시적 객체화가 가능하기 때문이다.
• 래퍼객체의 종류에는 Number, String, Boolean 이 있다.
• 각 래퍼객체의 메소드는 각각의 객체에 정의되어있는 데이터 타입을 작업할 때 메소드와 각 객체의 prototype으로부터 상속받은 메소드와 프로퍼티 역시 사용할 수 있다

#📑Study Source

1. TCP school - https://tcpschool.com/javascript/js_standard_numberMethod