한번 알아보자...

저번 포스팅 "== vs ==="에서 자바스크립트는 자동으로 형을 변환할 수 있다는 것을 알았습니다.
한번 더 형 변환에 대해서 정의해 본다면

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 "형 변환(type conversion)"이라고 합니다.

이렇게 형 변환이 자연스러운 이유는 JS가 '동적인 언어'이기 때문입니다. 정적인 언어는 JAVA, C++등이 있습니다.

1. 명시적 변환(Implicit conversion)

'명시적' 즉 위의 그림과 다르게 뜻을 분명히 밝히고 형을 변환시키는 것을 말합니다.
대표적으로 명시적 형 변환 방법은 String(), Number(), Boolen()객체를 사용하는 것입니다.

🤩alert()은 자동으로 스트링으로 변환시킵니다.

let A = 123;
let B = '123';
let C = true;

let AtoStr = String(A)//'123'
let CtoStr = String(C)//'true'

let BtoNum = Number(B)//123//만약 숫자가 아닌 글이 들어가있다면 NaN을 리턴합니다.
let CtoNum = Number(C)//1

let AtoBol = Boolen(A)//true
let BtoBol = Boolen(B)//true
let Bol01 = Boolen(0)//false
let Bol02 = Boolen('')//false

let obj = String({name: 'kim'})//[object Object]

저번 포스팅 "== vs ==="과 비슷합니다. 명시적으로 어떤 형으로 변할지 예상이 쉽습니다.

객체를 스트링으로 변환하면 [object Object]가 리턴됩니다. 객체의 모양 그대로를 문자열로 만들고 싶은 경우에는 JSON객체의 stringify 메서드를 활용해야 합니다.

2. 암시적 변환(Explicit conversion)

저번 포스팅 "== vs ==="에서 봤던 == 연산자를 사용할때는 암시적 변환이 일어납니다. == 비교 연산자는 숫자로 형변환이 일어났지만 '산술 연산자'는 조금 다릅니다. 자바스크립트를 처음 배우시는 분들이 가장 어이없어하는 부분중 하나입니다.

2-1. 덧샘

"123" + 123//"123123"
"string" + 123//"string123"
"string" + true//"stringtrue"
true + true//1

덧샘 연산자는 피연산자가 한쪽이라도 '문자열'이면 문자열 연산이 된다. 나머지 반대편은 문자열로 형변환이 암시적으로 일어납니다. 만약 문자열이 없다면 숫자로 변환됩니다.

2-2. 뺄샘, 곱샘, 나누기

"123" - 123//0
123 - true//122
123 - undefined//NaN

"123" * "2"//246
"123" * true//123
"string" * 123//NaN

"123" / "2"//61.5
"123" / true//1
"string" * 123//NaN

뺄샘, 곱샘, 나누기 연산자는 숫자로 형 변환이 이루어집니다. 덧샘처럼 문자열이 포함되도 문자열도 안 바뀌고 변환됩니다. 그렇기 때문에 "string"과 undefined는 숫자로 형 변환이 안되기 때문에 NaN이 리턴됩니다.

이처럼 연산을 할때 두 연산자의 타입이 다를때 일어나는 형변환을 '암시적 변환'이라고 합니다. 위의 예시만 아니라 다른 비교, 산술 등 값이 계산될 때에는 언제든지 형변환이 일어납니다.

3. Nominal typeing

• 이름만의
• 명목(명의)상의
• 이름의

조금 햇갈리는 단어지지만 프로그래밍에서는 '이름을 짓는', '명사의'정도로 이해하겠습니다.

Nominal 방식은 특정 키워드를 통하여 타입을 지정해 사용하는 방식입니다.
C++이나 Java와 같은 언어가 명칭(Nominal) 즉 '타입'을 정해서 개발하는 방식입니다. 타입을 미리 정해서 개발하면 오류를 줄이고 유지보수가 수월하지만 JS에서는 타입을 지정하는 것이 불가능합니다! 하지만 마이크로소프트에서 개발한 TypeScript를 이용하면 가능합니다.

TypeScript

let a:string = "hi";
console.log(a)//"hi"

let b:number = "hi";
console.log(b)//error

console.log(a + b)//실행이 안됨

function add(a: number, b: number) {
  return a + b;
}
const sum: number = add(1, 2);
console.log(sum); // 3

자바와 비슷하게 변수에 '타입'을 지정할 수 있습니다. 지정한 타입에 대하여 값이 다른 타입으로
할당되면 미리 오류를 리턴하기때문에 뒤에 올 코드들이 작동을 멈춥니다. 그래서 강제적으로도 암시적 형변환을 할 수 없고 좀 더 견고한 프로그래밍을 할 수 있습니다.

😚타입스크립트를 쪼금 맛보기로 보여드렸습니다! 타입스크립트는 후에 다른 포스팅으로 정리를 해서 올리겠습니다. 왜냐하면 이 시리즈는 자바스크립트만을 위한 시리즈이기 때문입니다.
Structuring and Duck Typing부분도 타입스크립트를 공부한 후 추후에 올리겠습니다.