[js]-DeepDive 타입 변환과 단축 평가

Kng_db·2023년 1월 31일
0

타입 변환이란?

js의 모든 값은 타입이 있다

  • 개발자가 의도적으로 타입을 변환하는 것 = 명시적 타입 변환, 타입 캐스팅
    ex) .toString(), String(), Number(), Boolean(), !!0, 10 * '10' // 100...
  • 개발자의 의도와 상관없이 js엔진에 의해 변환 = 암묵적 타입 변환, 타입 강제 변환
    ex) true + 1 // 2, 10 + '10' // '1010', !0 // true

🔆 더하기(➕) 연산자는 수학적 덧셈, 문자열 합치기(결합 연산자) 두가지 역할을 수행한다.

❗❗ 타입 변환은 기존 원시값을 변경하는 것이 아닌 기존 원시 값을 사용해 새로운 다른 타입의 원시 값을 생성하는것
( ➡ 암묵적 타입 변환은 한 번 사용하고 버린다 )


💦연습코드
입력받은 자연수의 거듭제곱 구하기

function pow(x, n){
	if(Number.isInteger(n) === true){	// Number.isInteger(n) 는 값이 정수인지 여부를 boolean값으로 받음
	return x**n;
	} else {
		alert("자연수를 입력해주세요")
	}
}

pow(+prompt("x입력",""), +prompt("n입력",""))	// prompt앞에 '+'를 붙임으로 숫자형으로 변환(단항산술연산자)
												// Number(prompt()) 해준 것과 같음!

🔆 명시적 타입 변환이 좋거나 암묵적 타입 변환이 좋다던지 하는 것은 없다.
명시적 타입 변환은 오류를 줄일 수 있지만,
암묵적 타입 변환은 가독성 측면에서 뛰어날 수 있다.

암묵적 타입 변환

js의 템플릿 리터럴(ES6도입)도 암묵적 타입 변환이다.(문자열 변환)

불리언 타입으로 변환

  • Falsy 값( 거짓으로 평가되는 값 )
    `false, undefined, null, 0, -0, NaN, ''(빈문자열)
  • Truthy 값( 참으로 평가되는 값 )
    Falsy값 외의 모든 값

♻ (나머지는 위의 내용과 중복 생략)

명시적 타입 변환

♻ (위의 내용과 중복 생략)

단축 평가

논리 연산자를 사용한 단축 평가

논리합(||), 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

에러를 발생시키는 것을 막아준다.

  • 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때 ( ex. let elem = null; // elem의 value 값을 찍으려고 할 때 elem.value )
  • 함수 매개변수에 기본값을 설정할 때 ( 매개변수가 제대로 들어가지 않았을 때 )

♻ (7장 내용과 중복 생략)

옵셔널 체이닝 연산자(ES11도입)

옵서녈 체이닝 연산자(?.)는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

ex)
let x = null;

let value = x && x.value; // x가 Falsy 값이니 x 출력
let value = x?.value; 

❗❗ 논리연산자(&&)는 false로 평가되는 Falsy값을 만나면 반환하지만, 옵셔널 체이닝(?.)은 좌항이 false로 평가되는 Falsy값을 만나더라도 null, undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

null 병합 연산자(ES11도입)

null 병합 연산자(??)는 좌항의 피연산자가 null 또는 undefined인 경우, 우항의 피연산자를 반환하고 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하다.

ex)
let foo = null ?? 'defalut string';
console.log(foo); // "defalut string" 출력

let foo = '' || 'defalut string';
console.log(foo); // "defalut string" 출력
let foo = '' ?? 'defalut string';
console.log(foo); // "" 출력

❗❗논리연산자(||)는 ture로 평가되는 Trusy값을 만나면 반환하지만, null 병합 연산자(??)는 null, undefined가 아니면 피연산자를 그대로 반환한다.


🔰 논리곱(&&)옵셔널 체이닝(?.)으로,
논리합(||)null 병합 연산자(??)로 대체해서 사용할 수 있으나, 비교하는 평가 값이 조금 다르니 참고해서 사용하자.

profile
코딩 즐기는 사람

0개의 댓글