자바스크립트는 상황에 따라 데이터가 인식한 문자 또는 숫자의 데이터형을 변경해야 할 경우 데이터 형변환을 시켜줘야 합니다.
이러한 데이터 형변환의 종류로는 명시적 변환, 암시적 변환이 있습니다.
명시적 형변환은 개발자가 직접 어떤 형으로 바꿀지 명시해주는 것입니다.
예를들면 문자열 "123" 이라는 문자를 숫자로 바꾸고 싶을때 Number("123") 으로 쓰는것 처럼 말이죠 .
명시적 형변환은 개발자가 직접 바꾸고 싶은 타입으로 바꾸기 때문에 우리의 의도대로 데이터의 타입을 결정할 수 있습니다.
하지만 자바스크립트에서는 이렇게 개발자가 직접 타입을 바꾸는 것이 아닌 자동으로 데이터의 형태를 바꿀수도 있습니다.
이를 암묵적 형변환 이라고 합니다.
내가 깜빡하고 데이터를 변환하지 않은 것을 자동으로 인식해서 변환해준다? 정말 이처럼 고마울 수 없을 것입니다.
하지만 !! 만약 내가 의도한 바가 아닌데 자동으로 바뀌어서 결과가 엉망으로 된다면 ... 정말 이처럼 미울수가 없겠죠 ?
그래서 저는 자바스크립트의 암묵적 형변환에대해 궁금증이 생겨버렸습니다 ... !
그래서 오늘은 자바스크립트에서 암묵적 형변환이 일어나는 것 중 문자열과 숫자연산에 대해 알아보겠습니다!!
문자열과 덧셈연산을 하는 예시 코드를 작성해보겠습니다.
console.log('만춘' + 123); // 만춘123
console.log('만춘' + true); // 만춘true
console.log('만춘' + false); // 만춘false
console.log('만춘' + null); // 만춘null
console.log('만춘' + undefined); // 만춘undefined
(+) 덧셈연산은 문자열과 number타입, boolean타입 ,null 타입 ,undefined 모두 문자열로 바뀌어 계산됩니다. 즉 피연산자 중 하나라도 문자열이면 문자열로 자동 형변환되어 연산을 수행합니다.
숫자와 덧셈연산을 하는 예시 코드를 작성해보겠습니다.
console.log(123 + '123'); //123123
console.log(123 + true); // 124
console.log(123 + false); // 123
console.log(123 + null); // 123
console.log(123 + undefined); // NaN
문자열과의 덧셈을 제외하고는 모두 숫자로 자동 형변환되어 연산을 수행하는 것을 알 수 있습니다 !
문자열과 숫자의 덧셈연산은 익히 많이 알려지기도 했고 실수도 많이 범하기 때문에 다들 알고 계실거라고 생각합니다. 저또한 이는 알고있는 부분이었습니다. 그런데 공부를 하다 문자열 - 숫자 가 나왔고 덧셈연산은 피연산자 중 하나라도 문자열이면 문자열로 형변환 되니 뺄셈연산 또한 그러지 않을까 ? 하는 생각이 들었습니다. 그런데 .. 어떻게 쓰지 .. ? 하는 생각이 스치더군요
(만약 '123' - 1 이면 '123-1' 로 써야하나.. 제가 생각해도 어리석은 생각이었던 거 같습니다. ㅎㅎ )
결론을 말씀드리자면 !
뺄셈 연산자엔 문자열 연결기능이 없어 자료형을 변환할 필요가 없습니다 !
따라서 값을 숫자로 변환하여 연산합니다.
즉 뺄셈으로 오는 피연산자의 값은 모두 숫자로 변환되어 연산한다는 것입니다.
뺄셈연산의 예시 코드를 작성해보겠습니다.
console.log(123 - '123'); //0
console.log('10'-1); //9
console.log(123 - true); // 122
console.log(123 - false); // 123
console.log(123 - null); // 123
console.log(123 - undefined); // NaN
123 - '123' 을 하니 0 이 '10' -1 '을 하니 9가 콘솔에 출력된 것을 알 수 있습니다.
오늘은 이렇게 자바스크립트를 공부하면서 헷갈릴만한 암묵적 형변환에 대해 알아보았습니다.
하루하루 새로운 사실을 알아가고 잘못된 정보를 올바른 정보로 바로잡아가는 과정이 정말 흥미롭고 재밌는 거 같습니다.
오늘도 열공 ! 즐공!
'HTML-CSS-JavaScript > JavaScript' 카테고리의 다른 글
[javascript] 동기-비동기 용어 설명 (0) | 2023.03.17 |
---|---|
[javascript] DOM에 대하여 (0) | 2023.03.08 |
[javascript] Scope에 대해 (2) | 2023.03.02 |
[javascript] 원시 자료형과 참조 자료형 , 얕은 복사와 깊은 복사 (0) | 2023.03.02 |
[javascript] 배열 join() 사용하기 (0) | 2023.02.28 |