자바스크립트 - 자동으로 유형이 변환되는 경우(자동 유형 변환)

자바스크립트는 다른 언어와 다르게 유형을 적는 게 없다.

C언어나 혹은 java 언어는 숫자나 문자열 값 등등 변수 선언을 할 때

해당 변수의 유형에 맞게 유형을 적어줘야 하는데

 

가령 C언어로 숫자를 담을 변수를 선언하게 되면 앞에 int라는 자료형 키워드가 붙여야 하고

이게 4바이트 범위 내에 숫자를 넣을 수 있는데,

 

만약 int num = 'abc'; 이렇게 숫자형 변수에다가 문자열을 넣으면 에러가 발생이 된다.

이것처럼 C언어나 java 언어는 각 자료형에 맞게 문자열은 문자열,

 

숫자는 숫자 자료형 등등 맞춰서 선언하고

사용하는데, 자바스크립트는 예외다.

 

console.log(8 * null); // → 0
console.log("5" - 1); // → 4
console.log("66" + 1); // → 661
console.log("five" * 2); // → NaN
console.log(false == 0); // → true
console.log(null == undefined); // → true
console.log(null == 0); // → false

 

위 소스를 보면 우리가 예상하는 것과 달리 원치 않은 값이 나온다. 

 

연산자가 '잘못된' 유형의 값에 적용되면 자바스크립트는 사용자가 원하거나 기대하지 않은 규칙 집합을 사용하여 해당 값을 필요한 유형으로 조용히 변환한다.

console.log(8 * null); // → 0

첫 번째 콘솔 로그를 보면 8과 null 곱해져 결괏값이 0이 나왔다.....

이런 말도 안 되게... 저거는 다른 언어에서는 에러다..

하지만 자바스크립트에선 null 이 0으로 유형이 말없이 바뀌면서 결과 값이 0으로 나왔다.. 

 

 

console.log("5" - 1); // → 4

두 번째 콘솔 로그를 보자. 이것도 말이 안 되는 거다... 문자열 5의 값에서 숫자형 -1 하는데 어떻게 4가 된 걸까? 

이거 자체가 계산이 안 되는 거다.... 이것도 조용히 문자열 5가 숫자형으로 바뀌면서 계산이 된 거다..

 

 

console.log("66" + 1); // → 661

세 번째 콘솔 로그를 보자. 이해되는가? 문자열 66 이란 거에 + 1 했는데... 두 번째 유형처럼 계산이 되면 67 되어야 하지 않은가? 아니다 +는 숫자 더하기 전에 문자열 연결을 시도한 거로 숫자형 1이 문자열 1로 바뀐 거다... 그래서 문자열로 더해져서 661 이 된 거다...

 

 

console.log("five" * 2); // → NaN

네 번째 콘솔 로그를 보자. 문자열과 숫자가 곱해졌다.. 다른 언어에선 상상할 수조차 없는 거다.. 자바스크립트이니깐 에러는커녕 NaN이라는 값을 출력한다. 이것도 자바스크립트가 말없이 본인 스스로가 변환시켜 에러는 발생 안 시키고 NaN으로 대체한 거라 생각하면 된다.

 

 

console.log(false == 0); // → true

다섯 번째 콘솔 로그를 보자. bool 값인 false가 0이란 숫자와 같냐고 물어본 거다 근데 자바스크립트는 true라고 말한다. 이상하다 애초에 유형이 다른 값의 연산이 불가능인데... 이렇게 자바스크립트는 조용히 알아서 스스로 바꿔서 연산을 한다.. 

 

console.log(null == undefined); // → true
console.log(null == 0); // → false

여섯 번째 대부분의 경우 값 중 하나를 다른 값의 유형으로 변환하려고 한다. 그러나 연산자의 양쪽에 null 또는 undefined가 발생하면 양쪽이 null 또는 undefined인 경우에만 true를 생성한다.

 

일곱 번째 이번엔 null 이 0과 같냐라는 질문에는 또 아니라고 답한다.

 

그렇다 자바스크립트는 NaN의 경우를 제외하고 두 값이 같을 때는 true를 반환하고, 다른 유형일 땐 복잡하고 혼란스러운 규칙 집합을 사용하여 수행할 작업을 결정하고, 대부분의 경우 값 중 하나를 다른 값의 유형으로 변환 후 결괏값을 도출한다.

 

자바스크립트에서 이처럼 연산 코드를 작성할 때는 문자열, 숫자, 등등 확실하게 파악해서 실수를 범하지 않는 게 좋다. 이 또한 좋은 방법이긴 하지만 자바스크립트 연산자 중 '===', '!==' 이런 연산자를 이용하자.

 

console.log(false === 0); // → false
console.log(null === undefined); // → false

 

아까 코드에선 == 이것만 했었을 땐 true 값이 나왔는데 === 이렇게 하니 false라고 찍혔다 

또 null과 undefined가 같냐라는 질문에는 아까 전엔 true라고 찍혔는데 이번엔 false라고 찍혔다

 

그렇다 '===', '!==' 이런 연산자를 이용해서 비교하면 자동 유형 변환이 발생되지 않는다.

이 연산자는 유형과 값을 둘 다 동시에 비교하고 값이 정확한지 여부를 테스트해서

되도록이면 실수를 범하지 않으려면 3자 비교 연산자를 사용하는 게 좋다.

 

자 이렇게 자바스크립트는 느슨한 등호(==) 비교를 했을때 암묵적으로 유형을 바꿔가면서

비교를 하기때문에 값이 바뀐다. 

 

이에 관련한 자세한 내용의 길은 아래 링크를 달아두겠다.

좀더 깊은 지식을 원한다면 아래 링크글을 읽어보는 것도 좋다.

 

 

순번	링크페이지 아래 제목을 클릭하면 해당 링크페이지로 이동 됩니다.
1	JS - 형 변환에 대하여 - (1)
2	JS - 형 변환에 대하여 - (2)
3	JS - 형 변환에 대하여 - (3)
4	JS - 형 변환에 대하여 - (4)
5	JS - 형 변환에 대하여 - (5)
6	JS - 형 변환에 대하여 - (6)