타입변환?
자바스크립트에서 변수는 타입을 가지고 있고 다른 타입으로 변환할 수 있다.
개발자의 의도대로 타입을 변경하는 명시적 타입변환과 자스엔진이 변경하는 암묵적 타입 변환이 있다.
✔️ 명시적 타입변환
var x=10
var str1=x.toString(); //명시적 타입변환이 때, 타입변환은 x 변수의 값을 변경시키는 것이 아니다. 타입 변환해 새로운 값을 만들어 한 번 쓰고 버린다.
1. 명시적 : 문자열 타입으로 변환
(1) String 생성자 함수를 new 없이 사용하기
String(1);
(2) 메서드 사용하기
(1).toString()
(3) 문자열 연결 사용하기
1+''
2. 명시적 : 숫자 타입으로 변환
(1) Number 생성자 함수를 new 없이 사용하기
Number('1');
(2) 메서드 사용하기
parseInt('1')
(3) + 단항 산술 연산자 사용하기
+'1'
(4) 산술연산자 사용하기
'-1'*1 //-1
3. 명시적 : boolean 타입으로 변환
(1) Boolean 생성자 함수를 new 없이 사용하기
Boolean('x')//true
Boolean('')//false
(2) !! 두번 쓰기
!!'';//false
!!'true'//true
✔️ 암묵적 타입변환
자스엔진이 암묵적으로 타입을 변환시키는 것인데 이게 참 헷갈리는 부분 잘 공부해두자.
var x=10
var str2=x+'';//
console.log(typeof str2);//string
'10'+2 //102
5*'10'//50
!0 //true
if(1){ }
//이게 무슨일이야자바스크립트는 너무 유연한 나머지 위와 같은 코드도 최대한 에러를 내지않고 암묵적으로 타입을 변환시켜준다. 타입의 암묵적 변환이 어떻게 일어나는지 더 자세히 살펴보자.
1. 암묵적 : 문자열 타입으로 변환
1+'2'// 12위 예제에서의 +는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작하기 때문에 숫자를 문자열 타입으로 변환시킨다.
특이한 문자열 타입 변환
0+''//0
-0+''//0
1+''//1
-1+''//-1
(Symbol())+''//typeError
//객체 타입들
({})+'' // "[object Object]"
Math+''//"[object Math]"
[]+'' //""
[10,20] + '' //"10,20"
Array+''//"function Array(){[native code]}"- 0만 -0이 문자열이 되면 마이너스 부호가 사라진다
- symbpl 타입은 타입에러가 발생한다.
- Array 는 function Array 로
2. 암묵적 : 숫자타입으로 변환
+ 는 문자열을 합치는 연산자로 쓰이지만 -, *, / 는 산술연산자이기 때문에 웬만하면 숫자로 변환시켜준다. 만약 변환할 수 없는 때가 오면 NaN(숫자타입)을 반환함.
>, < 과 같은 비교연산자도 마찬가지이다.
1-'1'//0
1*'10'//10
1/'one'//NaN
'1'>0//true+ 같은 단항연산자(숫자타입으로 타입변환해줌)같은 경우도 기억하기
- 'string', undefined, {}, [10,20], function(){} 전부 NaN으로 나옴.
- 빈 문자열이나 빈 배열, null, false는 0임.
- null은 의도적 비움, undefined 는 미할당이기 때문에 0, NaN으로 나오는 것
3. 암묵적 : boolean 타입으로 변환
if('') console.log(1);
if(true) console.log(2);
if(0) console.log(3);
if('str') console.log(4);
if(null) console.log(5);
//2 4위에서 봤듯 0, null은 false 값이다.
근데 문자열은 true 값이 나오네..
단축평가
&& 논리곱과 || 논리합
'CAT' && 'DOG' // -> 'DOG'
// && 는 논리곱으로 둘 모두 true 여야 한다. 앞만 true 라고 해서 true 가 아니란 것,,!
'CAT' || 'DOG' // -> 'CAT'
// 둘 중 하나만이어도 ㄱㅊ 'CAT'
false && 'DOG' // -> false
// 논리곱은 둘 중 1만 false 여도 false
false || 'DOG' // -> 'DOG'
//논리합은 하나만 true 여도 ㅇㅋ객체 변수가 null or undefined 인지 아닌지 확인하고 프로퍼티 참조할 때 - ?
var elem=null;
var value= elem.value; //TypeError
var elem=null;
//elem이 null or undefined 와 같은 값이면 elem으로 평가되고,
//elem이 true 면 elem.value 로 평가된다.
var value=elem && elem.value // null 에러가 안난다.. 왜지??? 단축평가는 무조건 값이 나와서?
📌 옵셔널 체이닝 연산자
?.는 좌항의 피연산자가 null 또는 undefined 면 Undefined 를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var elem=null;
var value=elem?.value; //좌항이 null 임.
console.log(value); //undefined옵셔널 체이닝은 변수가 Null 또는 undefined 가 아닌지 확인하고 프로퍼티를 참조할 때 유용함.
또 다른 예시
var str=""
var length=str?.length;
console.log(length)//0좌항이 null, undefined 가 아니라 우항을 그대로 참조함.
📌 null 병합 연산자
?? 는 좌항이 null or undefined 면 우항을 반환하고 그렇지 않으면 좌항을 반환한다. 변수에 기본값을 설정할 때 유용하다. 옵셔널과 반대네
var foo=null ?? 'default string';
console.log(foo);//"default string"
var foo='' ?? 'default string';
console.log(foo);//""💡 궁금한 점
- 빈 객체랑 배열은 왜 true 값이 나오지? 위에서는 빈 배열이 0 이었는데..
