Basic javascript 1-2

javascript의 형 변환에 대해서 알아보자!

형변환에는 다음과 같이 두가지가 있습니다.

1. 암시적 변환(Explicit)
2. 명시적 변환(Implicit)

자바스크립트는 타입이 매우 유연한 언어라서 자바스크립트 엔진이 필요에 따라 암시적변환을 혹은 개발자의 의도에 따라 명시적 변환을 실행하는데!
암시적 형 변환(Implicit type conversion)
암시적 변환이란 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는 것입니다.
산술 연산자, 동등비교
1.산술 연산자
'+' 연산자는 숫자보다 문자열이 우선시 되기 때문에, 숫자형이 문자형을 만나면 문자형으로 변환하여 연산 됩니다!

number + string  // string //숫자와 문자가 만나 문자로 연산!
string + string  // string //문자 + 문자 = 문자
number + number  // number //숫자 + 숫자 = 숫자
 
// 더하기 외 ( *, /, -, % ) 다른 연산자는 숫자형이 문자형 보다 우선시 됨!
string * number  // number //문자 * 숫자 = 숫자
string * string  // number //문자 * 문자 = 숫자
number * number  // number //숫자 * 숫자 = 숫자

아~ 산술연산자는 문자열 우선이고, 다른 연산자들은 숫자가 우선이구나!
잠깐?🤷‍♂️string은 왜 number 값으로 받아오지?
그 이유는 바로 자바스크립트 암시적 형변환으로 자바스크립트 자체에서
왜 문자랑 문자를 곱해? 문자랑 문자를 왜 나눠? 말도 안되기 때문에 자바스크립트 자체에서
너 이거 잘못 입력한거 같은데? 하면서 문자를 number로 인식하는거다!
동치 비교
아래 예제는 엄격하지 않은 동치(==)비교이며, 아래의 결과값은 좌우항 변환할 경우 모두 '0==0이기 때문에' 'true'이다.

true == 1;    // true는 1로 변환
false == 0;   // false는 0으로 변환
'1' == true;  // '1'은 true로 변환
'1' == 1;     // '1'은 1로 변환
null == undefined // true 0 == 0
“0” == 0 // true 0 == 0
0 == false // true 0 == 0
“0” == false // true 0 == 0

두 값을 비교할때 데이터타입을 변환하지 않는 엄격한 동치(===)비교와 혼동되지 않도록 한다.
잠깐?😒 엄격하지 않은 동치는 뭐고,,, 엄격한 동치는 뭐야 .. ?

그래서 알아본 결과
Equal Operator ==
서로 타입이 다르면 같은 타입으로 변환을 해서 비교를 한다.
Strict Equal Operator ===
서로 타입이 달라도 타입 변환 없이 엄격하게 비교를 한다고 한다
👀예를 들어볼까요 ?!

==연산자
10 == 10 // true
10 == '10' // true
true == 1 // true
true == '1' // true
true == 'true' // false
null == undefined // true

===연산자

10 === 10 // true
10 === '10' // false
true === 1 // false
true === 'true' // false
null === undefined // false
NaN === NaN // false

아.. == 연산자는 type이 달라도 type을 변환 후 값을 출력 해주고,
=== 연산자 특징은 type 다르면 false 를 반환 하는구나.
추가로 ===연산자 특징에
NaN 값은 자기 자신을 포함하여 어떠한 값과도 일치하지 않는구나..
즉 연산자에 NaN 값이 존재하는 경우 항상 false 구나!

명시적변환
명시적변환이란 개발자가 의도를 가지고 데이터타입을 변환시키는 것이다.
타입을 변경하는 기본적인 방법은 Object(), Number(), String(), Boolean() 와 같은 함수를 이용하는데 new 연산자가 없다면 사용한 함수는 타입을 변환하는 함수로써 사용된다.

var trans = 100; //Number
Object(trans); //100
console.log(typeof trans); //Number
String(trans); //”100"
console.log(typeof trans); //String
Boolean(trans); //true
console.log(typeof trans); //Bolean

하나의 Type 을 Number Type 으로 변형 시키는 방법이 있다!
Number()

Number()는 정수형과 실수형의 숫자로 변환한다.

Number(“12345”); //12345
Number(“2”*2); //4

ParseInt()

parseInt()는 정수형의 숫자로 변환한다.
🤷‍♂️IF
문자열이 '숫자0'으로 시작하면 8진수로 인식한다.
아 내가.. 이 사실만 알고 있었으면
const num = 01234;
console.log(num);
answer= 668 이라는것을 봤을때 이게 왜? 이러지 않았을텐데 진짜 중요한 정보다!
그리고 '0x,0X'로 시작한다면 해당 문자열을 16진수 숫자로 인식한다.
또한 앞 부분 빈 공백을 두고 나오는 문자는 모두 무시되어서 NaN값을 반환한다고 한다.

parseFloat()
parseFloat()는 부동 소수점의 숫자로 변환한다. parseInt()와는 달리 parseFloat()는 항상 10진수를 사용하며 parseFloat() 또한 앞부분 빈 공백을 두고 나오는 문자는 모두 무시되어 NaN을 반환한다.

parseFloat(“!123”); //NaN 무시되어서 해당 값 출력
parseFloat(“123.123456”); //123.123456
parseInt(“123.123456”); //123
parseFloat(“ 123.123456”); //123.123456
parseFloat(“ a123.123456”); //NaN 무시되어서 해당 값 출력

이번엔 String Type으로 바꾸는 방법을 공부해보자!

String()

String(123) // '123'
String(-12.3) // '-12.3'
String(null) // 'null'
String(undefined) // 'undefined'
String(true) // 'true'
String(false) // 'false'

무조건 ''값으로 출력이 된다!

toString()
toString()는 인자로 기수를 선택할 수 있다. 인자를 전달하지 않으면 10진수로 변환한다.

var trans = 100;
trans.toString(); //”100"
trans.toString(2); //”1100100"
trans.toString(8); //”144"
var boolT = true;
var boolF = false;
boolT.toString(); //”true”
boolF.toString(); //”false”

오.. toString()에다가 ()에다가 진수값을 주면 해당 진수 값으로 값이 표현 되는구나!
전달하지 않으면 10진수로 변환한다 메모😉

toFixed()
toFixed()의 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어오면 0으로 길이를 맞춘 문자열을 반환한다.

var trans = 123.456789;
var roundOff = 99.987654;
trans.toFixed(); //”123"
trans.toFixed(0); //”123"
trans.toFixed(2); //”123.46"
trans.toFixed(8); //”123.45678900"
roundOff.toFixed(2); //”99.99"
roundOff.toFixed(0); //”100"

소수점만큼 가서 반올림을 하는구나 .. 123.456789; 소수점이 6자리 밖에 없어서 8자리는 0으로 대체하는구나 이해 완료!

드디어 마지막 변환인 Boolean이다!
true와 false로 나눠지는
Boolean()

Boolean('') // false
Boolean(0) // false
Boolean(-0) // false
Boolean(NaN) // false
Boolean(null) // false
Boolean(undefined) // false
Boolean(false) // false

0 = false
NaN = false
null = false
undefined = false
false = false
오호 ... 반대로 true인 경우도 봐야겠다!

Boolean({}) // true
Boolean([]) // true
Boolean(Symbol()) // true
!!Symbol() // true
Boolean(function() {}) // true

목록에 없는 값은 true개체, 함수, Array, Date, 사용자 정의 유형 등을 포함하여 로 변환된다고 한다.
true 보다는 false 의 값을 기억하고 있으면 이해하기 더 쉽겠다😉😉

<출처 자료>
https://developer92.tistory.com/11
https://medium.com/gdana/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%98%95%EB%B3%80%ED%99%98%EC%9D%80-%EB%91%90%EA%B0%80%EC%A7%80%EB%8B%A4-b46875be4a88
https://www.devkuma.com/docs/javascript/%ED%98%95-%EB%B3%80%ED%99%98-type-conversion/
https://www.freecodecamp.org/news/js-type-coercion-explained-27ba3d9a2839/
출처: https://developer-talk.tistory.com/184 [평범한 직장인의 공부 정리:티스토리]
https://velog.io/@yunsungyang-omc/JS-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EC%9D%98-%ED%98%95%EB%B3%80%ED%99%98Type-Casting