JavaScript 문법 정리 - 형 변환 / 연산자

형 변환

형 변환이란 형태를 변환한다는 의미이다.

그리고 자바스크립트에는 암시적 형변환과 명시적 형변환이 가능하다.

1. 암시적 형 변환

암시적 형 변환은 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생한다.

1-1. 문자열 반환

let result1 = 1 + "2";

console.log(result1); // 12

console.log(typeof result1); // string

// 즉, + 연산으로 숫자와 문자가 만나면 문자열로 변환된다는 것을 알 수 있다.

let result2 = "1" + true;

console.log(result2); // 1true

console.log(typeof result2); // string

// 즉 문자열과 다른 타입이 합쳐지면 문자열이 우선 시 된다.

// {}, null, undefined + "1" => 문자열

위 예시에서는 문자열과 다른 자료형이 연산자로 결합되어 있고 이런 경우 자바스크립트는 다른 자료형을 문자열로 변환 후 연산을 수행한다.

1-2. 숫자 변환

let result3 = 1 - "2";

console.log(result3); // -1

console.log(typeof result3); // number

let result4 = "2" * "3";

console.log(result4); // 6

console.log(typeof result4); // number

// 더하기 연산자가 아닌 다른 연산사(-,*,/)에서는 숫자가 우선 시 된다.

위 예시에서는 연산자를 사용할 때 문자열을 숫자로 변환한다. 이때, 빈 문자열이나 공백 문자열은 0으로 변환된다.

2. 명시적 형 변환

명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 의미한다.

2-1. 불리언 변환

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

위 예시에서 보듯이 Boolean() 함수를 사용하여 불리언 값으로 변환하는데 이때 0, 빈문자열, null, undefined, NaN은 false로 변환되며, 그외에는 true로 변환된다.

2-2. 문자열 변환

let result5 = String(123);

console.log(typeof result5); // string

let result6 = String(false);

console.log(typeof result6); // string

let result7 = String(true);

console.log(typeof result7); // string

let result8 = String(null);

console.log(typeof result8); // string

let result9 = String(undefined);

console.log(typeof result9); // string

2-3. 숫자 변환

let result10 = Number("123");

console.log(result10); // 123

console.log(typeof result10); // number

연산자

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

1. 산술 연산자(arithmetic operators)

1-1. 더하기 연산자(+)

아래 코드에서 보듯이 더하기 연산자를 사용해서 숫자나 문자열을 더할 수 있다. 이때, 더하기 연산자는 숫자와 문자열을 함께 사용할 경우 자동으로 문자열로 변환한다.

// 1. 더하기 연산자

console.log(1 + 1); // 2

console.log(1 + "1"); // 11 (string)

1-2. 빼기 연산자(-)

아래 코드에서 보듯이 빼기 연산자를 사용하여 숫자를 뺄 수 있다. 이때, 빼기 연산자는 숫자와 문자열을 함께 사용할 경우 자동으로 숫자로 변환한다.

// 2. 빼기 연산자

console.log(1 - "2"); // -1

console.log(1 - 2); // -1

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

곱하기 연산자를 활용해서 숫자를 곱할 수 있다. 이때, 곱하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환한다.

// 3. 곱하기 연산자(*)

console.log(2 * 3); // 6

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

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. 할당 연산자(assignment operators)

2-1. 등호 연산자(=)

등호 연산자를 사용하여 변수에 값을 할당할 수 있다.

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

더하기 등호 연산자를 사용해서 변수에 값을 더할 수 있다.

let x = 10;

console.log(x); // 10

// 6-2. 더하기 등호 연산자(+=)

x += 5; // 선언된 x라는 변수의 값에 5를 더하라는 것과 같은 의미.

console.log(x); // 15

x += 5;

console.log(x); // 20

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

// 6-3. 빼기 등호 연산자(-=)

x -= 5;

// x = x - 5 와 같은 의미

console.log(x); // 15

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

// 6-4. 곱하기 등호 연산자(*=)

let a = 10;

a *= 2;

console.log(a); // 20

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

변수에서 값을 나눈 나머지를 구할 수 있다.

3. 비교 연산자(comparison operators)

비교 연산자는 Boolean 타입의 값을 반환한다.

3-1. 일치 연산자(===)

두 값이 같은지 비교할 수 있는 연산자이며, 타입까지 일치해야 true를 반환한다.

// 1. 일치 연산자 (===)

// 타입까지 일치해야 true를 반환하는 연산자

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

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

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

// 타입까지 일치해야 false를 반환하는 연산자

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

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. 논리곱 연산자(&&)

논리곱 연산자는 두 값이 모두 true일 경우에만 true를 반환한다.

// 1. 논리곱 연산자(&&) : 두 값이 모두 true일 때만 true를 반환한다.

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

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

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

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

4-2. 논리합 연산자(||)

논리합 연산자는 두 값 중 하나라도 true일 경우 true를 반환한다.

// 2. 논리합 연산자(||) : 두 값 중 하나라도 true인 경우 true 반환

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

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

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

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

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

논리부정 연산자는 값을 반대로 바꾼다.

// 3. 논리 부정 연산자(!) : 값을 반대로 바꿈

console.log(!true); // false

console.log(!false); // true

5. 삼항 연산자(ternary operators)

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

// 4. 삼항 연산자(중요!) : 조건에 따라 값을 선택한다.

let x1 = 10;

let result = x1 > 5 ? "크다" : "작다";

console.log(result);

// 예시) y가 10보다 작은 경우 작다를 console.log에 출력하고 10보다 크면 크다를 출력!

const y = 10;

console.log(y < 10 ? "작다" : "크다");

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 연산자를 사용하여 값의 자료형을 확인할 수 있다.

이때 해당 값이 객체나 함수의 경우에 "object", "function"을 반환하는데 typeof null 의 경우 "object"를 반환하는 버그가 있다.

Hi._.won