5. Type Conversion & Shortening Evaluation

let x = 10;

// 명시적 타입변환
// 숫자를 문자열로 타입 캐스팅한다.

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

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1); // "1"
String(true); // "true"


2. Object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // "1"
(true).toString() // "true"


3. 문자열 연결 연산자를 이용하는 방법
1 + ''; // "1"
true + '' // "true"

String() 함수 (new 없이)
String() 함수를 호출하면 문자열로 변환된 값을 반환합니다. 이 함수는 원시 문자열 값을 반환하는데,
이는 메모리나 성능면에서 더 효율적이다. 예를 들어,

let str  = String(123); // "123"
let objStr = new String(123); // 객체로서의 "123"

console.log(typeof str); // "string"
console.log(typeof objStr); // "object"

<정리>
String()을 new 없이 호출하는 이유는
✓ 원시 타입인 문자열을 간단하게 반환하기 위해서이며,
✓ 더 가볍고 성능 면에서 효율적이기 때문이다.

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0'); // 0
Number(true); // 1


2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
parseInt('0'); // 0


3. + 단항 산술 연산자를 이용하는 방법
+'0' // 0
+true // 1


4. * 산술 연산자를 이용하는 방법
'0' * 1 // 0
true * 1 // 1

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x') // true (문자열 → 불리언타입)
Boolean(0) // false (숫자 → 불리언타입)
Boolean(Infinity) // true (숫자 → 불리언타입)
Boolean(null) // false (null 타입 → 불리언타입)
Boolean(undefined) // false (undefined 타입 → 불리언타입)
Boolean([]) // true (객체 타입 → 불리언타입)
Boolean({}) // true (객체 타입 → 불리언타입)


2. ! 부정 논리 연산자를 두 번 사용하는 방법
!!'x' // true (문자열 → 불리언타입)
!!0; // false (숫자 → 불리언타입)
!!null; // false (null 타입 → 불리언타입)
!!undefined; // false (undefined 타입 → 불리언타입)
!!{}; // true
!![]; // ture

let x = 10;

// 암묵적 타입변환
// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자열을 생성한다.

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

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

// 숫자타입
0 + '' // "0"

// 불리언 타입
true + '' // "true"

// null 타입
null + '' // "null"

// undefined 타입
undefined + '' // "undefined"

// 심벌 타입
(Symbol()) + '' // TypeError: Cannot convert a Symbol value to a string

// 객체 타입
({}) + '' // "[object Object]"
Math + '' // "[object Math]"
[] + '' // ""
[10, 20] + '' // "10, 20"
(function(){}) + '' // "function(){}"
Array + '' // "function Array() { [native code] }"

// 문자열 타입
+"1" + // 1
  // 불리언 타입
  true + // 1
  // null 타입
  null + // 0
  // undefined 타입
  undefined + // NaN
  // 심벌 타입
  Symbol() + // TypeError: Cannot convert a Symbol value to a number
  // 객체 타입
  {} + // NaN
  [] + // 0
  [10, 20] + // NaN
  function () {}; // NaN

1. 산술 연산자로서의 +
두 숫자를 더할 때 사용됩니다. 즉, 숫자형 피연산자가 있을 경우 +는 산술 덧셈을 수행합니다.
ex) let result = 5 + 10; // 15


2. 문자열 결합 연산자로서의 +
만약 하나 이상의 피연산자가 문자열일 경우, +는 숫자를 문자열로 변환하고 두 값을 결합합니다.
즉, 문자열을 이어붙이는 역할을 합니다.
ex) let result = "Hello" + " " + "World"; // "Hello World"


3. 또한 숫자와 문자열이 혼합된 경우, 숫자가 자동으로 문자열로 변환되어 결합됩니다.
ex) let result = "The result is: " + 5; // "The result is: 5"

🤯 주의할 점: 숫자와 문자열이 섞인 표현식에서는 예상치 못한 결과가 나올 수 있습니다.
ex) let result = 5 + "10"; // "510" (숫자 5가 문자열 "10"과 결합됨)

<정리>
정리하자면, +는 자바스크립트에서 산술 연산자로 사용되지만,
피연산자 중 하나가 문자열일 경우 자동으로 문자열 결합 연산자로 동작하게 됩니다.

<falsy로 평가되는 값>
false, undefined, null, 0, -0, NaN, ''(빈문자열)

// 전달받은 인수가 Falsy 값이면 true, Truthy 값이면 false를 반환한다.
function is Falsy (v) {
return !v;
}

// 전달받은 인수가 Truthy 값이면 true, Falsy 값이면 false를 반환한다.
function isTruthy(v) {
return !!v;
}

// 모두 true를 반환한다.
is Falsy (false);
is Falsy (undefined);
is Falsy(null);
is Falsy(0);
is Falsy (NaN);
is Falsy(' ');

// 모두 true를 반환한다.
isTruthy(true);
isTruthy('0'); // 빈 문자열이 아닌 문자열은 Truthy 값이다.
isTruthy({});
isTruthy([]);

let elem = null;

let value = elem.value // TypeError: cannot read property 'value' of null

단축평가를 사용함으로써 에러를 예방할 수 있다
let value = elem && elem.value // null

function getStringLength(str) {
  str = str || "";
  return str.length;
}

getStringLength(); // 0
getStringLength("hi"); // 2

function getStringLength(str = "") {
  return str.length;
}

getstringLength(); // 0
getStringLength("hi"); // 2

let user = { name: "John", address: { city: "New York" } };

console.log(user?.name); // "John"
console.log(user?.address?.city); // "New York"
console.log(user?.age); // undefined (age 속성이 없으므로 에러 없이 undefined 반환)
console.log(user?.address?.street); // undefined (address는 있지만 street 속성이 없으므로 undefined 반환)

let value = null;
let defaultValue = value ?? "Default Value";

console.log(defaultValue); // "Default Value" (value가 null이므로 기본값 반환)

let value2 = 0;
let defaultValue2 = value2 ?? "Default Value";

console.log(defaultValue2); // 0 (value2는 null이나 undefined가 아니므로 그대로 반환)