타입 변환과 단축 평가

타입 변환이란?

변수의 데이터 타입을 다른 타입으로 변경하는 것을 의미한다.

 

타입 변환은 두 가지 형태로 나눌 수 있다.

• 명시적 타입 변환 또는 타입 캐스팅 
  • 개발자가 의도적으로 값의 타입을 변환하는 것
• 암묵적 타입 변환 또는 타입 강제 변환
  • 개발자의 의도와는 상관없이 JavaScript 엔진에 의해 자동으로 타입을 변환하는 것

 

명시적 타입 변환

명시적 타입 변환은 개발자가 의도적으로 변수의 타입을 변환하는 것

 

문자열 변환

let num = 123;

// 방법 1
let str1 = String(num);  // "123"

// 방법 2
let str2 = num.toString();  // "123"

 

String() 함수와 toString() 메서드의 차이점

 

String() 함수

• undefined와 null을 포함하여 모든 타입을 문자열로 변환할 수 있다.

toString() 메서드

• undefined나 null 값에 대해서는 toString() 메서드를 사용할 수 없다.

// String() 함수 사용
console.log(String(123));      // "123"
console.log(String(true));     // "true"
console.log(String(null));     // "null"
console.log(String(undefined)); // "undefined"

// toString() 메서드 사용
console.log((123).toString()); // "123"
console.log(true.toString());  // "true"
console.log(null.toString());  // TypeError: Cannot read property 'toString' of null
console.log(undefined.toString());  // TypeError: Cannot read property 'toString' of undefined

 

숫자 변환

let str = "123";

// 방법 1
let num1 = Number(str);  // 123

// 방법 2 (정수만)
// parseInt 두번째 인자는 option
// 진수를 나타내는 2부터 36까지의 정수 - default 10 진수
let num2 = parseInt(str);  // 123
num2 = parseInt(str, 2); // 1

// 방법 3 (정수, 실수)
let num3 = parseFloat(str);  // 123

 

불리언 타입 변환

// 방법 1
console.log(Boolean('x'));  // true
console.log(Boolean(''));  // false
console.log(Boolean('false'));  // true
console.log(Boolean(0));  // false
console.log(Boolean(1));  // true
// 빈 배열이나 빈 객체는 true로 인식 - 실수 많이함
console.log(Boolean({}));  // true
console.log(Boolean([])));  // true

// 방법2
console.log(!!'x');  // true
console.log(!!'');  // false
console.log(!!'false');  // true
console.log(!!0);  // false
console.log(!!1);  // true
console.log(!!{});  // true
console.log(!![]);  // true

 

암묵적 타입 변환

암묵적 타입 변환은 개발자의 의도와는 상관없이 JavaScript 엔진에 의해 자동으로 타입을 변환하는 것

 

문자열 변환

let num = 123;
let str = num + "";  // "123"

 

숫자 변환

let str = "456";
let num1 = str * 1;  // 456
let num2 = str / 1;  // 456
let num3 = str - 1;  // 455

// + 를 제외한 산술 연산자는 숫자 타입으로 변환

 

불리언 타입 변환

if ('')     console.log('1');
if (true)   console.log('2');
if (0)      console.log('3');
if ('str')  console.log('4');
if (null)   console.log('5');
if ({})     console.log('6');
if ([])     console.log('7');

// 2 4 6 7

 

자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

즉, 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 Truthy 값은 true로, Falsy 값은 false로 암묵적 타입 변환된다.

 

단축 평가

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

논리 연산자 "&&(AND) 또는 ||(OR)"를 사용할 때 특정 조건이 만족되면 더 이상 나머지 조건을 평가하지 않는 것을 의미한다.

OR 연산자 ('||')

OR 연산자는 첫 번째 피연산자가 Truthy이면 그 값을 반환하고, 그렇지 않으면 두 번째 피연산자를 반환한다.

let a = false || "hello";
console.log(a); // "hello" (첫 번째 피연산자가 Falsy이므로 두 번째 피연산자가 반환됨)

let b = "world" || "hello";
console.log(b); // "world" (첫 번째 피연산자가 Truthy이므로 그 값이 반환됨)

// 활용
function greet(name) {
  name = name || "Guest";
  console.log("Hello, " + name);
}

greet("Alice"); // "Hello, Alice"
greet();        // "Hello, Guest" (name이 undefined이므로 기본값 사용)

 

AND 연산자 ('&&')

AND 연산자는 첫 번째 피연산자가 Falsy이면 그 값을 반환하고, 그렇지 않으면 두 번째 피연산자를 반환한다.

let a = true && "hello";
console.log(a); // "hello" (첫 번째 피연산자가 Truthy이므로 두 번째 피연산자가 반환됨)

let b = false && "world";
console.log(b); // false (첫 번째 피연산자가 Falsy이므로 그 값이 반환됨)

// 활용 1
let user = { name: "Alice", age: 25 };

user && console.log(user.name); // "Alice" (user가 Truthy이므로 이름 출력)

let nullUser = null;

nullUser && console.log(nullUser.name); // 실행되지 않음 (nullUser가 Falsy이므로 평가 중단)

// 활용 2
let execute = true;

execute && someFunction(); // execute가 true일 때만 someFunction() 호출

function someFunction() {
  console.log("Function executed!");
}

 

주의 사항

단축 평가를 사용할 때는 예상치 못한 부작용을 방지하기 위해 조건문에서 Truthy와 Falsy 값을 명확히 이해하고 사용하는 것이 중요하다.
예를 들어, 값이 0이나 빈 문자열("")인 경우에도 Falsy로 평가될 수 있으므로, 상황에 따라서는 이러한 값들을 별도로 처리해야 할 수 있다.

let count = 0;

let result = count || 10;
console.log(result); // 10 (count가 0이므로 Falsy로 평가됨)

 

옵셔널 체이닝 연산자

옵셔널 체이닝 연산자(?.)는 ES11(ECMAScript2020)에서 도입된 문법으로, 객체의 속성에 접근할 때 좌항의 피연산자가 null 또는 undefined인 경우 오류를 발생시키지 않고 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
이를 통해 코드가 더 간결하고 안전하게 작성될 수 있다. 특히 깊이 중첩된 객체 구조를 다룰 때 유용하다. (ts에서 매우 유용)

 

객체 속성 접근

let user = {
  name: "Alice",
  address: {
    city: "Wonderland",
  }
};

let city = user?.address?.city;
console.log(city); // "Wonderland"

let street = user?.address?.street;
console.log(street); // undefined (address 객체에는 street 속성이 없음)

 

배열 요소 접근

let users = [
  { name: "Alice" },
  { name: "Bob" }
];

console.log(users?.[0]?.name); // "Alice"
console.log(users?.[2]?.name); // undefined (세 번째 요소가 없음)

 

null 병합 연산자

null 병합 연산자(??)는 ES11(ECMAScript2020)에서 도입된 문법으로, 좌측 피연산자가 null 또는 undefined일 때만 우측 피연산자를 반환한다.
이를 통해 기본값을 설정하거나 null 또는 undefined 값을 처리할 때 더 명확하고 간결한 코드를 작성할 수 있다.

let user = {
  name: "Alice",
  age: 0
};

let name = user.name ?? "Guest";
console.log(name); // "Alice" (name 속성이 존재하므로 "Alice" 반환)

let age = user.age ?? 18;
console.log(age); // 0 (age 속성이 0이므로 0 반환)

let city = user.city ?? "Unknown";
console.log(city); // "Unknown" (city 속성이 없으므로 "Unknown" 반환)

 

null 병합 연산자 vs. 논리 OR 연산자

논리 OR 연산자(||)와 null 병합 연산자(??)의 주요 차이점은 논리 OR 연산자는 Falsy 값 (0, NaN, "", false, null, undefined)을 모두 고려하는 반면, null 병합 연산자는 null과 undefined만 고려한다.

let value = 0;

let resultOr = value || 10;
console.log(resultOr); // 10 (0은 Falsy 값이므로 10 반환)

let resultNullish = value ?? 10;
console.log(resultNullish); // 0 (0은 null 또는 undefined가 아니므로 0 반환)