[모던 자바스크립트 딥다이브]_타입 변환과 단축 평가 어디까지 보고 오셨어요?

타입변환

• 암묵적 타입변환

암묵적 타입변환에 대해 배워보겠습니다.

다른 말로는 타입 강제 변환이라고도 합니다.

우리의 의도와는 달리 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 시키는 것을 말합니다.

1+'2' //'12'

`1 + 2 = ${1+2}` // '1 + 2 = 3'

위의 코드 처럼 숫자리터럴을 강제로 문자리터럴로 바꿀 수도 있습니다.

2-'1' // 1

11 > '9' // true

이전의 코드와는 다르게 문자를 숫자로 바꿀 수도 있습니다.

if ('') console.log(1); //
if (0) console.log(2); //
if ('yes') console.log(3); // 3
if (null) console.log(4); //

이렇게 조건문 속의 값을 평가하고 boolean값으로 변환합니다.

• 명시적 타입변환

//숫자를 문자로 타입변환
String(1) // '1'

const x = 100
x.toString() // '100'


//문자를 숫자로 타입변환
Number('26') // 26

parseInt('50') // 50

//불리언 타입으로 변환
Boolean('x'); //true

Boolean(''); //false

Boolean([]); // true

 

타입을 의도적으로 변환시키기 위해 메소드를 사용할 수도 있습니다.

---

단축평가

• 논리합 과 논리곱

2023.08.05 - [💪JavaScript/script.js] - [모던 자바스크립트 딥다이브]_연산자 어디까지 보고 오셨어요?

[모던 자바스크립트 딥다이브]_연산자 어디까지 보고 오셨어요?

이전에 배웠던 논리연산자에 대한 내용입니다!
복습도 좋겠죠.

• 옵셔널 체이닝 연산자

옵셔널 체이닝 연산자는 ES11에서 도입된 연산자 입니다.

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

var ele = null;

var value = ele?.value;
console.log(value); // undefined

• null 병합 연산자

nulllish coalescing은 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환합니다.

그렇지 않으면 좌항의 피연산자를 반환합니다.

?? 물음표 기호 두개를 사용해서 표현합니다.

변수에 기본값을 설정할 때 유용합니다.

// 좌항이 null 또는 undefined면 우항을 반환합니다.
var goo = null ?? 'string';
consol.log(goo); // 'string'

//좌항이 null또는 undefined가 아닌 falsy 값이어도 좌항을 반환합니다.
var foo = '' ?? 'string';
console.log(foo); // ''

사실 두 연산자를 합쳐서 활용할 수 있습니다.

// 예제 객체
const person = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    country: 'USA'
  }
};

// 첫 번째 예제: 존재하지 않는 속성에 접근할 때 옵셔널 체이닝과 널리쉬 병합 연산자 함께 사용하기
const personCity = person?.address?.city ?? 'Unknown';
console.log(personCity); // 출력 결과: 'New York' (person 객체와 address 객체, city 속성 모두 존재)

const personHobby = person?.hobbies?.[0] ?? 'No hobbies';
console.log(personHobby); // 출력 결과: 'No hobbies' (person 객체에 hobbies 속성이 없거나 빈 배열일 경우)

// 두 번째 예제: 객체가 null 또는 undefined일 때 기본 객체로 대체하기
const person2 = null;

const defaultPerson = {
  name: 'Guest',
  age: 18,
  address: {
    city: 'Unknown',
    country: 'Unknown'
  }
};

const resultPerson = person2 ?? defaultPerson;
console.log(resultPerson);
// 출력 결과: { name: 'Guest', age: 18, address: { city: 'Unknown', country: 'Unknown' } }
// person2가 null이기 때문에 defaultPerson이 할당됨