[Study] Deep Dive - 단축 평가

M_yeon·2023년 3월 24일
0

Deep Dive

목록 보기
3/6
post-thumbnail

타입 변환

  • 값의 타입은 다른 타입으로 개발자에 의해 의도적으로 변환할 수 있다.
  • 자바스크립트 엔진에 의해 암묵적으로 자동 변환될 수 있다.

    개발자에 의해 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(Explicit coercion) 또는 타입 캐스팅(Type casting)이라 한다.

원시값은 변경이 불가능한 값인데 , 타입 변환이란 기존 원시값을 사용해 다른 타입의 새로운 원시값을 생성하는 것이다.

let x = 10;
let str = x + '';
console.log(typeof x, x)// string 10

// x변수 원본이 변경되는것은 아니다.
console.log(typeof x, x)// number 10

암묵적으로 새롭게 생성된 str안에 x는 평가가 끝나고,
아무도 참조하지 않기 때문에 가비지 콜렉터에 의해 메모리에서 해제된다.


단축평가

단축 평가는 우리가 흔히 쓰는 삼항연산자, 옵셔널체이닝도 포함하며,
표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말합니다.

단축평가의 규칙

true || anything // true
false || anything // anything
true && anything // anything
false && anything // false
  • if문을 대체할 수 있습니다.
if(!done) message = "done";

// 단축평가
message = done || "미완료";
console.log(message) // 미완료
  • 삼항 조건 연산자는 if...else문을 대체할 수 있습니다.
var done = true;
var message = '';

//if...else문
if (done) message = '완료'
else	  message = '미완료'
console.log(message); //완료

message = done ? '완료' : '미완료';
console.log(message); //완료

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자 ?.는 좌항이 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어갑니다.

var elem = null;

// elem이 null또는 undefined이면 undefined 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어감
var value = elem?.value;
console.log(value); // undefined

옵셔널 체이닝 연산자?.는 변수가 null또는 undefined인지 확인할 때 유용합니다.
?.가 도입되기 전에는 &&를 사용해 확인했습니다.

var elem = null;

// elem이 Falsy 값이면 elem으로 평가, elem이 Truthy 값이면 elem.value로 평가
var value = elem&&elem.value;
console.log(value); // null

또한 함수의 파라미터 기본값을 지정할 수 있습니다.

function getStringLength(str) {
  // 파라미터의 값이 있다면 str return
  // 파라미터에 값이 없다면 ''; null 또는 undefined 에러 방지
	str = str || '';
  return str.length
}

옵셔널 체이닝 연산자 ?. 는 좌항이 falsy값이여도 null 또는 undefined가 아니라면 우항으로 이어간다.

|| 과 ?? 의 차이

falsy값 = false, undefined, null, 0, -0, NaN, ''

- || : falsy값이면 예상치 못한 동작이 발생할 수 있다. - ?? : falsy값이어도 null 또는 undefined가 아니라면 좌항의 값을 반환해준다.

0개의 댓글