▶ JavaScript Tutorial

JavaScript Operators

JavaScript Operators: 초보자를 위한 완벽 가이드

*자바스크립트(JavaScript)**는 웹 개발에서 핵심적인 역할을 하는 프로그래밍 언어로, **연산자(Operators)**는 데이터를 처리하고 조작하는 데 필수적인 도구입니다. 연산자를 이해하고 효과적으로 사용하는 것은 효율적이고 가독성 높은 코드를 작성하는 데 매우 중요합니다. 이 가이드에서는 자바스크립트에서 사용되는 다양한 연산자의 종류와 그 활용 방법에 대해 자세히 알아보겠습니다.

1. 연산자란?

*연산자(Operators)**는 하나 이상의 피연산자(Operands)에 대해 특정 연산을 수행하는 기호나 단어입니다. 자바스크립트에서는 다양한 연산자가 제공되며, 이를 통해 산술 계산, 값의 할당, 비교, 논리 연산 등을 수행할 수 있습니다.

1.1. 연산자의 중요성

데이터 처리: 변수 간의 계산이나 데이터 변환을 수행합니다.
조건 판단: 특정 조건에 따라 코드의 실행 흐름을 제어합니다.
코드 간결성: 복잡한 로직을 간단하게 표현할 수 있습니다.

2. 연산자의 종류

자바스크립트에는 여러 종류의 연산자가 있으며, 각 연산자는 특정한 목적과 기능을 가지고 있습니다. 주요 연산자의 종류는 다음과 같습니다:

산술 연산자 (Arithmetic Operators)
할당 연산자 (Assignment Operators)
비교 연산자 (Comparison Operators)
논리 연산자 (Logical Operators)
비트 연산자 (Bitwise Operators)
문자열 연산자 (String Operators)
조건 연산자 (Conditional/Ternary Operator)
기타 연산자 (Other Operators)

2.1. 산술 연산자 (Arithmetic Operators)

산술 연산자는 수학적 계산을 수행하는 데 사용됩니다. 가장 기본적인 산술 연산자는 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/), 나머지(%), 그리고 거듭제곱(**)입니다.

2.1.1. 덧셈 (`+`)

두 숫자를 더하거나, 문자열을 연결할 때 사용됩니다.

let a = 10;
let b = 5;
let sum = a + b;
console.log(sum); // 출력: 15

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // 출력: John Doe

2.1.2. 뺄셈 (``)

두 숫자를 뺄 때 사용됩니다.

let a = 10;
let b = 5;
let difference = a - b;
console.log(difference); // 출력: 5

2.1.3. 곱셈 (``)

두 숫자를 곱할 때 사용됩니다.

let a = 10;
let b = 5;
let product = a * b;
console.log(product); // 출력: 50

2.1.4. 나눗셈 (`/`)

두 숫자를 나눌 때 사용됩니다.

let a = 10;
let b = 5;
let quotient = a / b;
console.log(quotient); // 출력: 2

2.1.5. 나머지 (`%`)

두 숫자를 나눈 후 나머지를 반환합니다.

let a = 10;
let b = 3;
let remainder = a % b;
console.log(remainder); // 출력: 1

2.1.6. 거듭제곱 (`*`)

기본값을 거듭제곱할 때 사용됩니다.

let a = 2;
let exponent = 3;
let result = a ** exponent;
console.log(result); // 출력: 8

2.2. 할당 연산자 (Assignment Operators)

할당 연산자는 변수에 값을 할당하거나, 기존 변수의 값을 수정할 때 사용됩니다. 기본 할당 연산자는 등호(=)이며, 다양한 복합 할당 연산자가 존재합니다.

2.2.1. 기본 할당 연산자 (`=`)

변수에 값을 할당합니다.

let a = 10;
const b = 20;

2.2.2. 복합 할당 연산자

기존 변수의 값에 산술 연산을 수행하면서 할당할 때 사용됩니다.

+=: 더한 후 할당
=: 뺀 후 할당
=: 곱한 후 할당
/=: 나눈 후 할당
%=: 나머지를 구한 후 할당

let a = 10;
a += 5; // a = a + 5
console.log(a); // 출력: 15

a *= 2; // a = a * 2
console.log(a); // 출력: 30

a -= 10; // a = a - 10
console.log(a); // 출력: 20

a /= 4; // a = a / 4
console.log(a); // 출력: 5

a %= 3; // a = a % 3
console.log(a); // 출력: 2

2.3. 비교 연산자 (Comparison Operators)

비교 연산자는 두 값을 비교하여 논리적 참(true) 또는 거짓(false)을 반환합니다. 주요 비교 연산자는 다음과 같습니다:

==: 동등 (값만 비교)
===: 일치 (값과 타입 모두 비교)
!=: 불동등 (값만 비교)
!==: 불일치 (값과 타입 모두 비교)
>: 초과
<: 미만
>=: 이상
<=: 이하

2.3.1. 동등 (`==`) vs. 일치 (`===`)

==: 타입을 변환하여 값을 비교합니다.
===: 타입을 변환하지 않고, 값과 타입을 모두 비교합니다.

console.log(5 == '5');  // 출력: true
console.log(5 === '5'); // 출력: false

2.3.2. 불동등 (`!=`) vs. 불일치 (`!==`)

!=: 타입을 변환하여 값을 비교합니다.
!==: 타입을 변환하지 않고, 값과 타입을 모두 비교합니다.

console.log(5 != '5');  // 출력: false
console.log(5 !== '5'); // 출력: true

2.3.3. 대소 비교

let a = 10;
let b = 20;

console.log(a > b);  // 출력: false
console.log(a < b);  // 출력: true
console.log(a >= 10); // 출력: true
console.log(b <= 20); // 출력: true

2.4. 논리 연산자 (Logical Operators)

논리 연산자는 하나 이상의 논리 값을 결합하여 새로운 논리 값을 생성합니다. 주요 논리 연산자는 다음과 같습니다:

&&: 논리 AND
||: 논리 OR
!: 논리 NOT

2.4.1. 논리 AND (`&&`)

모든 피연산자가 참일 때만 참을 반환합니다.

let a = true;
let b = false;
console.log(a && b); // 출력: false

a = true;
b = true;
console.log(a && b); // 출력: true

2.4.2. 논리 OR (`||`)

피연산자 중 하나라도 참이면 참을 반환합니다.

let a = true;
let b = false;
console.log(a || b); // 출력: true

a = false;
b = false;
console.log(a || b); // 출력: false

2.4.3. 논리 NOT (`!`)

논리 값을 반전시킵니다.

let a = true;
console.log(!a); // 출력: false

a = false;
console.log(!a); // 출력: true

2.5. 비트 연산자 (Bitwise Operators)

비트 연산자는 숫자의 이진수 표현에 대해 비트 단위의 연산을 수행합니다. 주요 비트 연산자는 다음과 같습니다:

&: 비트 AND
|: 비트 OR
^: 비트 XOR
~: 비트 NOT
<<: 왼쪽 시프트
>>: 오른쪽 시프트 (부호 있는)
>>>: 오른쪽 시프트 (부호 없는)

2.5.1. 비트 AND (`&`)

두 비트가 모두 1일 때만 1을 반환합니다.

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a & b); // 출력: 1 (0001)

2.5.2. 비트 OR (`|`)

두 비트 중 하나라도 1이면 1을 반환합니다.

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a | b); // 출력: 7 (0111)

2.5.3. 비트 XOR (`^`)

두 비트가 서로 다를 때만 1을 반환합니다.

let a = 5;  // 0101
let b = 3;  // 0011
console.log(a ^ b); // 출력: 6 (0110)

2.5.4. 비트 NOT (`~`)

모든 비트를 반전시킵니다.

let a = 5;  // 0101
console.log(~a); // 출력: -6 (1010)

2.5.5. 왼쪽 시프트 (`<<`)

비트를 왼쪽으로 시프트하여 2의 거듭제곱을 곱합니다.

let a = 5;  // 0101
console.log(a << 1); // 출력: 10 (1010)

2.5.6. 오른쪽 시프트 (`>>`)

비트를 오른쪽으로 시프트하여 2의 거듭제곱을 나눕니다. 부호를 유지합니다.

let a = 5;  // 0101
console.log(a >> 1); // 출력: 2 (0010)

2.5.7. 부호 없는 오른쪽 시프트 (`>>>`)

비트를 오른쪽으로 시프트하여 2의 거듭제곱을 나눕니다. 부호를 무시합니다.

let a = -5; // 11111111111111111111111111111011 (32비트)
console.log(a >>> 1); // 출력: 2147483645

2.6. 문자열 연산자 (String Operators)

문자열 연산자는 주로 문자열을 결합하거나 특정 문자열 연산을 수행하는 데 사용됩니다.

2.6.1. 문자열 결합 (`+`)

문자열을 결합할 때 사용됩니다.

let firstName = "John";
let lastName = "Doe";
let fullName = firstName + " " + lastName;
console.log(fullName); // 출력: John Doe

2.6.2. 문자열 반복 (``)

자바스크립트에서는 * 연산자가 문자열을 반복하는 기능을 기본 제공하지 않습니다. 대신, repeat() 메서드를 사용합니다.

let str = "Hello! ";
let repeatedStr = str.repeat(3);
console.log(repeatedStr); // 출력: Hello! Hello! Hello!

2.7. 조건 연산자 (Conditional/Ternary Operator)

조건 연산자는 간단한 조건문을 한 줄로 작성할 수 있게 해주는 연산자입니다. 구조는 조건 ? 참일 때 값 : 거짓일 때 값 입니다.

2.7.1. 기본 사용법

let age = 18;
let canVote = (age >= 18) ? "Yes" : "No";
console.log(canVote); // 출력: Yes

2.7.2. 중첩 조건 연산자

복잡한 조건문을 작성할 때 사용할 수 있지만, 가독성이 떨어질 수 있습니다.

let score = 85;
let grade = (score >= 90) ? "A" :
            (score >= 80) ? "B" :
            (score >= 70) ? "C" :
            "F";
console.log(grade); // 출력: B

2.8. 기타 연산자 (Other Operators)

2.8.1. typeof 연산자

변수의 타입을 확인할 때 사용됩니다.

let a = 10;
let b = "Hello";
let c = true;
let d;
let e = null;
let f = Symbol("id");
let g = 9007199254740991n;

console.log(typeof a); // 출력: "number"
console.log(typeof b); // 출력: "string"
console.log(typeof c); // 출력: "boolean"
console.log(typeof d); // 출력: "undefined"
console.log(typeof e); // 출력: "object" (자바스크립트의 버그)
console.log(typeof f); // 출력: "symbol"
console.log(typeof g); // 출력: "bigint"

2.8.2. delete 연산자

객체의 속성을 삭제할 때 사용됩니다.

let person = {
    name: "Alice",
    age: 25
};

delete person.age;
console.log(person); // 출력: { name: "Alice" }

2.8.3. instanceof 연산자

객체가 특정 생성자의 인스턴스인지 확인할 때 사용됩니다.

let arr = [1, 2, 3];
console.log(arr instanceof Array);    // 출력: true
console.log(arr instanceof Object);   // 출력: true
console.log(arr instanceof String);   // 출력: false

2.8.4. 스프레드 연산자 (`...`)

배열이나 객체를 펼쳐서 복사하거나 결합할 때 사용됩니다.

// 배열 복사
let fruits = ["Apple", "Banana"];
let moreFruits = [...fruits, "Cherry"];
console.log(moreFruits); // 출력: ["Apple", "Banana", "Cherry"]

// 객체 복사
let person = { name: "Alice", age: 25 };
let updatedPerson = { ...person, age: 26 };
console.log(updatedPerson); // 출력: { name: "Alice", age: 26 }

3. 연산자 우선순위 (Operator Precedence)

연산자 우선순위는 표현식 내에서 어떤 연산자가 먼저 실행될지를 결정합니다. 높은 우선순위를 가진 연산자가 먼저 실행됩니다. 우선순위가 같은 연산자는 결합 방향에 따라 실행 순서가 결정됩니다.

3.1. 주요 연산자 우선순위

괄호 ()
단항 연산자 (!, typeof, delete, 등)
산술 연산자 (, `/`, `%`, `+`, , *)
비교 연산자 (>, <, >=, <=, ==, ===, !=, !==)
논리 연산자 (&&, ||, !)
할당 연산자 (=, +=, =, 등)
조건 연산자 (? :)

3.2. 예시

let a = 10 + 5 * 2; // 곱셈이 덧셈보다 우선순위가 높아, 5*2 먼저 계산 후 10+10 = 20
console.log(a); // 출력: 20

let b = (10 + 5) * 2; // 괄호 안의 덧셈 먼저 계산 후 15*2 = 30
console.log(b); // 출력: 30

let c = true || false && false; // &&가 ||보다 우선순위가 높아, false && false = false, true || false = true
console.log(c); // 출력: true

4. 단축 평가 (Short-Circuit Evaluation)

논리 연산자는 단축 평가(short-circuit evaluation)를 수행합니다. 이는 논리 연산자의 결과가 확정되면 나머지 피연산자를 평가하지 않는 것을 의미합니다.

4.1. 논리 AND (`&&`)의 단축 평가

&& 연산자는 첫 번째 피연산자가 거짓이면 두 번째 피연산자를 평가하지 않습니다.

let a = false && true; // a는 false
console.log(a); // 출력: false

let b = false && (10 / 0); // 10 / 0은 평가되지 않음
console.log(b); // 출력: false

4.2. 논리 OR (`||`)의 단축 평가

|| 연산자는 첫 번째 피연산자가 참이면 두 번째 피연산자를 평가하지 않습니다.

let a = true || false; // a는 true
console.log(a); // 출력: true

let b = true || (10 / 0); // 10 / 0은 평가되지 않음
console.log(b); // 출력: true

4.3. 예시: 기본값 설정

단축 평가를 사용하여 변수가 undefined일 경우 기본값을 설정할 수 있습니다.

let username;
let displayName = username || "Guest";
console.log(displayName); // 출력: Guest

username = "Alice";
displayName = username || "Guest";
console.log(displayName); // 출력: Alice

5. 실습 예제 (Practical Examples)

연산자의 개념을 이해하기 위해 몇 가지 실습 예제를 살펴보겠습니다.

5.1. 산술 연산자 실습

let x = 15;
let y = 4;

console.log(x + y); // 출력: 19
console.log(x - y); // 출력: 11
console.log(x * y); // 출력: 60
console.log(x / y); // 출력: 3.75
console.log(x % y); // 출력: 3
console.log(x ** y); // 출력: 50625

5.2. 할당 연산자 실습

let a = 10;
a += 5; // a = a + 5
console.log(a); // 출력: 15

a *= 2; // a = a * 2
console.log(a); // 출력: 30

a -= 10; // a = a - 10
console.log(a); // 출력: 20

a /= 4; // a = a / 4
console.log(a); // 출력: 5

a %= 3; // a = a % 3
console.log(a); // 출력: 2

5.3. 비교 연산자 실습

let age = 25;
let isAdult = age >= 18;
console.log(isAdult); // 출력: true

let name = "Alice";
console.log(name === "Alice"); // 출력: true
console.log(name !== "Bob"); // 출력: true

5.4. 논리 연산자 실습

let isLoggedIn = true;
let hasPermission = false;

console.log(isLoggedIn && hasPermission); // 출력: false
console.log(isLoggedIn || hasPermission); // 출력: true
console.log(!isLoggedIn); // 출력: false

5.5. 비트 연산자 실습

let a = 5;  // 0101
let b = 3;  // 0011

console.log(a & b); // 출력: 1 (0001)
console.log(a | b); // 출력: 7 (0111)
console.log(a ^ b); // 출력: 6 (0110)
console.log(~a);    // 출력: -6 (1010)
console.log(a << 1); // 출력: 10 (1010)
console.log(a >> 1); // 출력: 2 (0010)
console.log(a >>> 1); // 출력: 2 (0010)

5.6. 조건 연산자 실습

let score = 85;
let grade = (score >= 90) ? "A" :
            (score >= 80) ? "B" :
            (score >= 70) ? "C" : "F";
console.log(grade); // 출력: B

5.7. 기타 연산자 실습

let person = {
    name: "Alice",
    age: 25
};

console.log(typeof person); // 출력: "object"

delete person.age;
console.log(person); // 출력: { name: "Alice" }

let arr = [1, 2, 3];
console.log(arr instanceof Array); // 출력: true
console.log(arr instanceof Object); // 출력: true

6. 일반적인 실수와 주의사항 (Common Pitfalls and Considerations)

6.1. 타입 변환에 주의

== 연산자는 타입을 변환하여 비교하기 때문에 의도치 않은 결과를 초래할 수 있습니다. 가능하면 ===를 사용하여 타입과 값을 모두 비교하는 것이 좋습니다.

console.log(5 == '5');  // 출력: true
console.log(5 === '5'); // 출력: false

6.2. 비트 연산자의 이해

비트 연산자는 주로 성능이 중요한 저수준 작업에서 사용됩니다. 일반적인 웹 개발에서는 잘 사용되지 않으므로, 필요할 때만 사용하고 그 의미를 명확히 이해해야 합니다.

6.3. 연산자 우선순위 활용

복잡한 표현식을 작성할 때는 괄호를 사용하여 연산자의 우선순위를 명확히 하는 것이 좋습니다. 이는 코드의 가독성을 높이고, 의도치 않은 동작을 방지합니다.

let result = 10 + 5 * 2; // 10 + (5 * 2) = 20
let clearResult = (10 + 5) * 2; // (10 + 5) * 2 = 30

7. 요약

산술 연산자: 수학적 계산을 수행합니다 (+, , , /, %, *).
할당 연산자: 변수에 값을 할당하거나 기존 값을 수정합니다 (=, +=, =, =, /=, %=).
비교 연산자: 두 값을 비교하여 논리적 참/거짓을 반환합니다 (==, ===, !=, !==, >, <, >=, <=).
논리 연산자: 논리적 결합을 수행하여 참/거짓을 반환합니다 (&&, ||, !).
비트 연산자: 이진수 수준에서 비트 단위의 연산을 수행합니다 (&, |, ^, ~, <<, >>, >>>).
문자열 연산자: 문자열을 결합하거나 조작합니다 (+, repeat()).
조건 연산자: 간단한 조건문을 한 줄로 작성합니다 (? :).
기타 연산자: 타입 확인, 속성 삭제, 인스턴스 확인 등 다양한 기능을 제공합니다 (typeof, delete, instanceof, ...).

연산자를 올바르게 사용하면 코드의 효율성과 가독성을 크게 향상시킬 수 있습니다. 각 연산자의 특성과 용도를 명확히 이해하고, 상황에 맞게 적절히 활용하여 효율적이고 안정적인 자바스크립트 코드를 작성해보세요!

코딩 스쿨 JavaScript