형 변환 및 연산자 정리

[2] 형(brother아님) 변환

자바스크립트에서는 다양한 자료형을 다룰 수 있습니다. 그리고 이 자료형들은 서로 형변환이 가능합니다. 이번에는 자바스크립트의 형 변환에 대해서 알아보겠습니다.

[2]-1 암시적 형 변환(implicit coercion)

암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생합니다.

[2]-1-1 문자열 변환

console.log(1 + "2");   // "12" [숫자 + 문자열 = 문자열]
console.log("1" + true);   // "1true" [문자열 + 불린 = 문자열]
console.log("1" + {});   // "1[object Object]" [문자열 + 중괄호 = 문자열]
console.log("1" + null);   // "1null" [문자열 + null = 문자열]
console.log("1" + undefined);   // "1undefined" [문자열 + undefined = 문자열]

[2]-1-2 숫자 변환

console.log(1 - "2");   // -1 [숫자 - 문자열 = 숫자]
console.log("2" * "3");   // 6 [문자열 * 문자열 = 숫자]
console.log(4 + +"5");   // 9 [숫자 + + 문자열 = 숫자]

빈 문자열("")이나 공백 문자열(" ")은 숫자 0으로 변환됩니다.

[2]-1-3 불리언 변환

console.log(Boolean(0));   // false 
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true

0, "", null, undefined, NaN 은 false로 변환됩니다
그 외의 값은 true로 변환됩니다.

[2]-2 명시적 형 변환(explicit coercion)

명시적 형 변환은 개발자가 직접 자료형을 반환하는 것을 말합니다.

[2]-2-1 문자열 변환

console.log(String(123)); // "123"
console.log(String(true)); // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"

String()사용하여 문자열로 변환.

[2]-2-2 숫자 변환

console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

[3] 연산자

자바스크립트에서는 다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있습니다.

[1]산술 연산자(arithmetic operators)

[1]-1 더하기 연산자(+)

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

[1]-2 빼기 연산자(-)

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN

[1]-3. 곱하기 연산자(*)

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

[1]-4 나누기 연산자(/)

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

[1]-5 나머지 연산자(%)

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN

[2] 할당 연산자

[2]-1 등호 연산자(=)

let x = 10;
console.log(x);   // 10
x = 5;
console.log(x);   // 5

[2]-2 더하기 등호 연산자(+=)

let x = 10;
console.log(x);   // 10
x += 5;
console.log(x);   // 15

[2]-3 빼기 등호 연산자(-=)

let x = 10;
console.log(x);   // 10
x -= 5;
console.log(x);   // 5

[2]-4 곱하기 등호 연산자(*=)

let x = 10;
console.log(x); // 10
x *= 5;
console.log(x) // 50

[2]-5 나누기 등호 연산자(/=)

let x = 10;
console.log(x);   // 10
x /= 5;
console.log(x);   // 2

[2]-6 나머지 등호 연산자(%=)

let x = 10;
console.log(x);   // 10
x %= 3;
console.log(x);   // 1

비교 연산자(comparison operators)

[3]-1 일치 연산자(===)

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false

===는 자료형까지 비교합니다.

[3]-2 불일치 연산자(!==)

console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true

!==는 자료형까지 비교합니다.

[3]-3 작다 연산자(<)

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

숫자와 문자열의 함께 사용한 경우 자동으로 숫자로 변합니다.

[3]-4 크다 연산자(>)

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

숫자와 문자열의 함께 사용한 경우 자동으로 숫자로 변합니다.

[3]-5 작거나 같다 연산자(<=)

console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true

숫자와 문자열의 함께 사용한 경우 자동으로 숫자로 변합니다.

[3]-6 크거나 같다 연산자(>=)

console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

숫자와 문자열의 함께 사용한 경우 자동으로 숫자로 변합니다.

[4] 논리 연산자(logical operators)

[4]-1 논리곱(&&) 연산자 (and)

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

[4]-2 논리합(||) 연산자 (or)

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

[4]-3 논리부정(!) 연산자

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

[5] 삼항 연산자(ternary operators)

[5]-1 삼항연산자(?:)

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result) // "크다"

조건식 ? true일 때의 값 : false일 때의 값

[6] 타입 연산자(type operators)

[6]-1 typeof 연산자

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

typeof null의 경우 "object"를 반환하는 버그가 있습니다.