자바스크립트 String / Number /형 변환(형태 변환) / 형태 파악(typeof)에 대한 이해

 

 안녕하세요 오늘은 자바스크립트에서 String 과 Number 그리고 형 변환에 대해서 알아보도록 하겠습니다.

 

 

자바스크립트로 프로그래밍 언어를 처음 배우시는 경우엔 아무래도 낯설고, 조금 익숙치 않은 단어들이 이 String 과 Number 일겁니다. 사람의 말(?)과 가장 다른 부분 중 하나가 이 수의 형태이기 때문이죠. String 형은 문자형이고, Number 형은 

예를 들어, ' 200 ' 이라는 걸 두고 생각해봅시다. 어떻게 생각하시나요? 저 200이 우리 눈에는 숫자 처럼 보일겁니다. 하지만, 우리가 자바스크립트의 입장이 아닌, 사람의 입장에서 보기때문에 이 수가 200으로 보이는겁니다. 즉, 컴퓨터는 이 200 이라는 숫자를 문자처럼(String ) 생각할 수도 있고, 숫자처럼(Number ) 생각할 수도 있다는 것 입니다. 

그렇기에 우리가 200을 쓰더라도 ! 컴퓨터에게 '이건 숫자 200이야~ ' 혹은 '이건 문자 200이야 ~' 하고 가르쳐주어야 컴퓨터는 그제서야 인식을 한다는 것이죠. 바로 이 차이점입니다. 형 변환은 그럼 어떻게 이해하면 될까요? 생각하시는 그 답이 맞습니다. 바로 숫자 200으로 지정된 수에게 '이건 숫자 200인데 이제부터 문자 200이야 ~' 라고 알려주는거고, '이건 문자 200인데 이제부터 숫자 200이야~ '   라고 알려주는 것이 바로 형 변환이라고 합니다.

 

 

1. String 과 Number 형태에 대한 이해 

 위에서 말했다시피, String 형은 문자로 자바스크립트 언어로 해석이 되고, Number 는 숫자로 언어에서 이해가 됩니다. 이걸 풀어서 얘기하면, 두개 다 우리가 지정해주어야한다는 건데요 ! 이걸 예시로 한번 살펴보겠습니다.

이렇게 두개의 식이 제일 우리에게 이해하기 쉬울 것입니다.

실행코드 공유

// ? 1. String 과 Number 는 어떻게 이해하면 될까요?

console.log('9'+ '9');  //! string 끼리 더해서 결과 값이 '99'
console.log(9+ 9);//! number끼리 더해서 결과 값이 우리가 알다시피 '18'

console.log('10'+ '10'); //! '1010'
console.log(10+ 10); //! '20'

결과값

 

 첫번째 줄은 문자열 두개 값이 ' ' 안에 문자 9 값이 담겨있고, 두번째 줄은 숫자 9 값이 담겨있습니다. 두개를 더했을 때 결과값은 '9'와 '9'가 붙여져서 '99'(String) 값이 나오고, 두번째 줄은 우리가 익숙한 숫자 9가 2개 더해져서 18(Number) 값이 나오게 됩니다.

 밑에 세번째, 네번째 줄도 마찬가지로 그렇게 이해하면 됩니다. 특히, 세번째 줄에는 ' ' 작은 따옴표 뿐만 아니라, " " 큰 따옴표도 마찬가지로 문자열(String) 값으로 인식이 가능하다는 것을 인지해주셨으면 좋겠습니다.

 

다만, ' 와 "을 섞어서 '40" 이렇게 쓴다던지, "티끌코딩' 이렇게 혼합해서 사용하는 것은 오류를 발생시키니 주의하시기 바랍니다 !! 

 

2. String 과 Number 형 변환 (형태 변환)

 

  String 형은 Number형은 한번 정해지면 계속 써야할까요? 불가피하게 바꿔야 한다면 어떻게  문자로 자바스크립트 언어로 해석이 되고, Number 는 숫자로 언어에서 이해가 됩니다. 이걸 풀어서 얘기하면, 두개 다 우리가 지정해주어야한다는 건데요 ! 이걸 예시로 한번 살펴보겠습니다.

 

실행코드 공유

// ? 2. String 과 Number 는 형태를 바꿀 수는 없는걸까요?

console.log(Number('10') + Number('10')); // ! 20
console.log(String(10) + String(10)); // ! 1010

실행 값

결과 값

 방법은 생각보다 간단합니다. 우리가 원래 갖고있던 형태에서 변환을 하여 다른 형태 값을 괄호에 담아 씌워주시면 됩니다. 위의 예제에서도 원래 문자형이었던 숫자를 숫자형으로 변환 하면 숫자형 연산이 그대로 되고, 숫자형이었던 숫자를 문자형으로 변환하면 문자형 연산이 출력되는 것을 볼 수 있습니다. 이런 방식으로 자바 스크립트 형 변환을 하면 됩니다. 방법이 생각보다 간단해서 그나마 편하게 접할 수 있을겁니다.

 

3. 그렇다면 형태를 파악할 수는 없을까요 (typeof)

 

 우리가 사용하는 형태( )라는 것은 우리 눈에는 안 보이지만, 변수에 값을 지정해주어도 이미 정해져 있습니다. 그리고 그 변수의 값을 제대로 확인할 수 없는 식일 경우 그 변수 값을 어떻게 확인할 수 있을까요? 이것도 방법만 알면 간단합니다. 바로 typeof 가 그 역할을 해줄겁니다. 이것도 예시로 바로 확인해보시죠 ! 

 

실행코드 공유

// ? 3. 그렇다면 형태를 파악할 수는 없을까요 (typeof)

console.log(typeof('3')); // ! String
console.log(typeof(3));  // ! Number

 

실행 값

출력 값

 

이렇게 우리가 앞서 배웠던 것들의 형태 값을 파악해볼 수 있습니다. 물론 우리 눈으로도 확인이 가능하지만 말이죠 ! 만약, 위에서 말 했던 변수에 String 혹은 Number 값이 담겨있다면 어떻게 파악할까요? 이것도 마찬가지로 typeof 를 사용해서 파악이 가능합니다. 

실행코드 공유

// ? 3. 그렇다면 형태를 파악할 수는 없을까요 (typeof)
let a = '300';
let b = 300;

console.log(typeof(a)); // ! String
console.log(typeof(b));  // ! Number

console.log(typeof(Number(a))); // ! Number
console.log(typeof(String(b)));  // ! String

 

실행 값

결과 값

 이렇게 파악이 가능합니다. 즉, 변수에 값이 들어잇다고 해도 그 값의 형태(type)을 인식 못하는 것이 아니라 인식이 가능하고, 그것을 통해 형 변환도 가능하다는 점을 인지 하셨으면 좋겠습니다 :) 

 

저의 아주 작은 티끌 코딩 글이 블로그 방문자 님의 코딩에 조금이라도,

도움이 됐으면 좋겠습니다.  감사합니다 : )