타입 변환
개발자가 의도적으로 값의 타입을 변환하는 것
명시적 타입 변환
타입 캐스트를 이용해서,강제적으로 타입을 변환시킨다.
(타입 캐스트: Number(),string() 등)
타입 캐스트를 이용한다고 해서, 기존 값을 변경 하는 것은 아니다.
타입 변환은 기존 원시 값을 사용해 다른 타입의 새로운 값을 생성하는 것
(- 변경이 가능한건 객체)
1. 암묵적 타입 변환
표현식을 평가하면서 개발자의 의도와 상관없이 자바스크립트 엔진이 테이터 타입을 강제 변환 시킨다.
-자바스크립트는 가능하면 에러가 발생하지 않도록 표현식을 평가한다
1-1) 문자열로 변환
+연산자 이용 ex) 15+'15' ='30'- 템플릿 리터럴 표현식
1-2) 숫자로 변환
산술연산자와 비교연산자는 숫자값을 계산하는 연산자들로 생겨난 것들이기 때문에, 피연산자를 숫자타입으로 암묵적 타입 변환을 한다.
- Nuumber() : 생성자 함수라 주사용 용도가 생성이기 때문에 변환에 사용을 많이 하진 않는다.
- ParseInt(20,10): 20을 10진수로 변환해준다. 가장 안전하고 오류가 적은 방법이다.
- +x : 마이너스도 가능/가장 간단한 방법
< + 의 설명 >
산술연산자 (+) 문자가 숫자보다 우선시 됨
암시적으로 js엔진이 자동으로 데이터 타입을 변환시켜줌
- number + number // number
- number + string // string
- string + string // string
- string + boolean // string
- number + boolean // number
falsy : 항상 거짓으로 판별되는 요소들
'', [], null, false는 0으로 변환
문제 풀이
let data = '5, 4, 10, 2, 5'.split(',');
let average = 0;
for (let i of data) {
average += parseInt(i)/data.length;
}
console.log(average)
- Number는 숫자로 온전히 바꿔주지 못하는 경우가 많다.
- 그래서 좀 더 안전한 parseInt를 사용한다.
let data = '5, 4, 10, 2, 5'.split(',');
let sum = 0;
for (let i of data) {
sum += parseInt(i);
}
console.log(average/data.length)
- 2번이 조금더 계산이 적어서 복잡도가 낮음( 아직 이단계에서 크게 차이 없음)
1-3) boolean 형변환
자바 스크립트 엔진은 불리언 타입이 아닌 값을 Truthy. Falsy 로 구분한다.
항상 거짓값을 갖는것들을 falsy라고 한다.
하지만 그렇다고 이들의 값자체가 false를 의미하는 것이 아니기때문에, false값을 표현하기 위해서 !!를 이용한다.
ex)
!null → !가 !false = true
!!null = !!false = !true = false
- !!true -> true
- !!NaN -> false
- !!'' -> false
- !!'0' -> false
- !!null -> false
- !!undefined ->false
2.명시적 타입 변환
표준 빌트인 생성자 함수를 이용 하거나, 빌트인 메서드를 사용하는 방법이 있다.
💡표준 빌트인 생성자 함수 : string, Number,Boolean, Function,array,Date
💡표준 빌트인 메서드: parseInt(), Object, isNaN()
빌트인 메서드_mdn
2-1) 문자로 변환
- string()
- ().tostring
- () +"" -> 제일 많이 사용 함
2-2) 숫자로 변환
- Number()
- parseInt()
- +()
- 산술연산자 이용 ex) '1' * 2 = 2
2-3 불리언으로 변환
- Boolean()
- !!() : 이 방법을 더 추천함!
단축평가
표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정 생략
&& : 앞이 false면 뒤에 평가를 진행하지 않음
||: 앞이 true이면 뒤에 평가를 진행하지 않음
1. 주 사용
* 변수가 null 또는 undefined가 아닌지 확인
var a =null;
var value = a && a.value;a가 null이면 더이상 뒤를 평가하지 않기때문에 에러를 발생할 수 있다.
* 함수 매개변수에 기본값을 설정할때
str = str||'';str이 문자 또는 ''이 있기때문에 문자 임을 확인할 수 있다.
2. 옵셔널 체이닝 연산자
연산자: ?.
좌항이 null 또는 undefined이면 undefined를 반환, 아니면 우항을 이어감
var a = null;
var value = a?.value;원래 &&하던 역할
하지만, &&로 하는 경우 앞이 falsy면 피연산자를 그대로 반환한다.
(이로 인해 참조하지 못하는 에러가 발생할 수 있다.)
옵셔널 체이닝은 falsy여도 null이나 undefined가 아니면 우항으로 이어감
3.null 병합 연산자
연산자:??
좌항이 null 또는 undefined이면 우항을 반환, 아니면 좌항을 반환.
var foo = null ?? 'default string';원래 || 의 역할
||는 좌항이 false면 우항을 반환하는데, 기본값이 0이나 빈배열인 경우에도 우항이 반환되는 오류가 발생할 수 있다.
null 병합 연산자는 null또는 undefined만 아니면 좌항을 반환하기 때문에, 기본값 에러를 줄일 수 있다.
위의 단축평가는 보통 기본값으로 많이 설정해놓고, 입력값의 오류를 줄인다고한다.
실제 사례를 보면서 공부하니까 그래도 좀 어떻게 사용해야 하는지는 알겠는 기분?
하나 하나 풀릴때마다 재밌다... 근데 안 풀릴때가 더 많은건 함정
