[JavaScript] 연산자

정진우·2024년 4월 26일

JavaScript

목록 보기

5/20

연산자

자바스크립트의 연산자는 특정 작업을 수행하기 위해 사용하는 기호나 키워드입니다. 이는 값을 분석하거나, 값을 비교하거나, 논리적인 작업을 수행하거나, 산술적인 작업을 수행하는 데 사용됩니다.

산술 연산자
할당 연산자
비교 연산자
논리 연산자
삼항 연산자

연산자 우선순위

연산자 우선 순위는 자바스크립트에서 여러 연산자가 동시에 등장할 때 어떤 연산자가 먼저 수행되는지 결정하는 규칙입니다.
1. 괄호 : ()
2. 단항 연산자 : ++, --, -, +, !, ~, typeof, void, delete, await
3. 산술 연산자 : *, /, %, ++, --
4. 산술 연산자 : +, -
5. 비교 연산자 : <, <=, >, >=
6. 비교 연산자 : ==, !=, ===, !==
7. 논리 연산자 : &&
8. 논리 연산자 : ||

let result = 10 + 5 * 2; // result는 20입니다. 곱셈이 먼저 수행됩니다.
console.log("10 + 5 * 2 =", result);

result = (10 + 5) * 2; // result는 30입니다. 괄호가 우선됩니다.
console.log("(10 + 5) * 2 =", result);

result = (10 * 2) / 5; // result는 4입니다. 곱셈이 먼저 수행되고, 나눗셈은 그 다음에 수행됩니다.
console.log("10 * 2 / 5 =", result);

result = 10 * (2 / 5); // result는 4입니다. 괄호가 우선됩니다.
console.log("10 * (2 / 5) =", result);

result = (15 % 4) + 2; // result는 5입니다. 나머지 연산이 먼저 수행됩니다.
console.log("15 % 4 + 2 =", result);

result = 15 % (4 + 2); // result는 3입니다. 괄호가 우선됩니다.
console.log("15 % (4 + 2) =", result);

result = 10 > 5 && 5 < 3; // result는 false입니다. AND 연산자는 논리 연산자 중에서 우선순위가 가장 높습니다.
console.log("10 > 5 && 5 < 3 =", result);

result = 10 > 5 || 5 < 3; // result는 true입니다. 괄호가 우선됩니다.
console.log("(10 > 5) || (5 < 3) =", result);

산술 연산자

산술 연산자는 자바스크립트에서 숫자를 더하거나 빼고, 곱하거나 나누고, 나머지를 구하는 데 사용되는 연산자입니다.

덧셈(`+`)

let num1 = 10;
let num2 = 5;
let sum = num1 + num2; // sum은 15입니다.

뺄셈(`-`)

let num1 = 20;
let num2 = 3;
let difference = num1 - num2; // difference는 17입니다.

곱셈(`*`)

let width = 10;
let height = 5;
let area = width * height; // area는 50입니다.

나눗셈(`/`)

let dividend = 100;
let divisor = 10;
let quotient = dividend / divisor; // quotient는 10입니다.

나머지 연산(`%`)

let num = 17;
let remainder = num % 3; // remainder는 1입니다.

증가 연산(`++`)

let counter = 0;
counter++; // counter는 1이 됩니다.

감소 연산(`--`)

let value = 10;
value--; // value는 9가 됩니다.

할당 연산자

할당 연산자는 변수에 값을 할당하는 데 사용되는 연산자입니다.

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

가장 기본적인 형태의 할당 연산자로, 오른쪽 피연산자의 값을 왼쪽 피연산자인 변수에 할당합니다.

var num = 10; // 변수 num에 10을 할당합니다.
var message = "Hello, World!"; // 변수 message에 문자열 "Hello, World!"를 할당합니다.

산술 연산자와 결합된 할당 연산자

산술 연산과 함께 변수에 값을 할당하는 연산자입니다.
산술 연산자는 +=, -=, *=, /=, %= 등이 있습니다.

let x = 10;

// 덧셈 연산과 결합된 할당 연산자 (+=)
x += 5; // x = x + 5와 동일합니다. 따라서 x는 15가 됩니다.

// 뺄셈 연산과 결합된 할당 연산자 (-=)
x -= 3; // x = x - 3과 동일합니다. 따라서 x는 12가 됩니다.

// 곱셈 연산과 결합된 할당 연산자 (*=) 
x *= 2; // x = x * 2와 동일합니다. 따라서 x는 24가 됩니다.

// 나눗셈 연산과 결합된 할당 연산자 (/=)
x /= 4; // x = x / 4와 동일합니다. 따라서 x는 6이 됩니다.

// 나머지 연산과 결합된 할당 연산자 (%=)
x %= 5; // x = x % 5와 동일합니다. 따라서 x는 1이 됩니다.

console.log("결과:", x); // 출력: 1

비트 연산자와 결합된 할당 연산자

비트 연산과 함께 변수에 값을 할당하는 연산자입니다.
비트 연산자는 &=, |=, ^=, <<=, >>=, >>>= 등이 있습니다.

let x = 5; // 이진수로는 00000101입니다.
let y = 3; // 이진수로는 00000011입니다.

// 비트 AND 연산과 결합된 할당 연산자 (&=)
x &= y; // x = x & y와 동일합니다. 따라서 x는 00000001 (10진수로 1)이 됩니다.

// 비트 OR 연산과 결합된 할당 연산자 (|=)
x = 5; // 초기화
x |= y; // x = x | y와 동일합니다. 따라서 x는 00000111 (10진수로 7)이 됩니다.

// 비트 XOR 연산과 결합된 할당 연산자 (^=)
x = 5; // 초기화
x ^= y; // x = x ^ y와 동일합니다. 따라서 x는 00000110 (10진수로 6)이 됩니다.

// 왼쪽 시프트 연산과 결합된 할당 연산자 (<<=)
x = 5; // 초기화
x <<= 2; // x = x << 2와 동일합니다. 따라서 x는 00010100 (10진수로 20)이 됩니다.

// 오른쪽 시프트 연산과 결합된 할당 연산자 (>>=)
x = 5; // 초기화
x >>= 1; // x = x >> 1와 동일합니다. 따라서 x는 00000010 (10진수로 2)이 됩니다.

console.log("결과:", x); // 출력: 2

비교 연산자

비교 연산자는 두 값이 같은지, 다른지, 더 큰지, 더 작은지 등을 판단하는데 사용됩니다. 결과는 항상 불리언 값인 true 또는 false로 표시되며, 이를 통해 조건문에서 특정 조건이 충족되었는지 확인할 수 있습니다.

동등 비교 연산자 (`==`)

동등 비교 연산자입니다. 피연산자들이 같으면 true를 반환합니다.

console.log(5 == 5); // true
console.log(5 == "5"); // true, 데이터 형식이 다르지만 값이 같으므로 true
console.log(5 == 10); // false

비교 연산자 중 == (동등 연산자)와 !=(부등 연산자)는 JavaScript에서 특히 주의해 사용해야 합니다. 이 연산자는 두 값이 동등한지 확인할 때 '타입 강제 변환'을 수행하므로, 예상치 못한 결과를 초래할 수 있습니다. 이로 인해 코드가 혼란스러워지고 버그가 발생할 수 있습니다. 따라서, 가능하면 === (일치 연산자)와 !==(불일치 연산자)를 사용하는 것이 좋습니다. 이 연산자는 값과 함께 타입까지 비교하므로, 예측 가능한 결과를 얻을 수 있습니다.
// '==' 연산자 사용
console.log(5 == "5"); // true, 값은 같지만 데이터 형식이 다르므로 타입 강제 변환이 일어남
console.log(5 == 5); // true, 값과 타입이 모두 같으므로 true
console.log(5 == 10); // false, 값이 다르므로 false
console.log(0 == false); // true, 값은 다르지만 타입 강제 변환에 의해 숫자 0과 불리언 false가 같다고 판단

// '===' 연산자 사용
console.log(5 === "5"); // false, 값은 같지만 데이터 형식이 다르므로 false
console.log(5 === 5); // true, 값과 타입이 모두 같으므로 true
console.log(5 === 10); // false, 값이 다르므로 false
console.log(0 === false); // false, 값과 타입이 다르므로 false

부등 비교 연산자 (`!=`)

부등 비교 연산자입니다. 피연산자들이 다르면 true를 반환합니다.

console.log(5 != 10); // true
console.log(5 != "5"); // false, 데이터 형식이 다르지만 값이 같으므로 false

일치 비교 연산자 (`===`)

일치 비교 연산자입니다. 피연산자들이 같고 데이터 타입도 같으면 true를 반환합니다.

console.log(5 === 5); // true
console.log(5 === "5"); // false, 데이터 형식이 다르므로 false
console.log(5 === 10); // false

불일치 비교 연산자 (`!==`)

불일치 비교 연산자입니다. 피연산자들이 다르거나 데이터 타입이 다르면 true를 반환합니다.

console.log(5 !== 10); // true
console.log(5 !== "5"); // true, 데이터 형식이 다르므로 true

`>` 연산자

크다 연산자입니다. 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true를 반환합니다.

console.log(5 > 10); // false
console.log(10 > 5); // true

`<` 연산자

작다 연산자입니다. 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true를 반환합니다.

console.log(5 < 10); // true
console.log(10 < 5); // false

`>=` 연산자

크거나 같다 연산자입니다. 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true를 반환합니다.

console.log(5 >= 10); // false
console.log(10 >= 5); // true

`<=` 연산자

작거나 같다 연산자입니다. 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true를 반환합니다.

console.log(5 < 10); // true
console.log(10 < 5); // false

논리 연산자

논리 연산자는 두 개 이상의 조건을 연결하거나 부정하는 데 사용되는 연산자입니다. 이 연산자들은 주어진 조건을 평가하고, 조건문에서 여러 개의 조건을 결합하거나, 변수의 상태를 검사하여 true나 false를 반환하는데 사용됩니다. 주로 불리언 (참 또는 거짓) 값을 사용한 연산에 사용됩니다.

AND 연산자 (`&&`)

AND 연산자는 두 개의 조건이 모두 true일 때만 결과가 true가 됩니다.
두 개의 조건 중 하나라도 false라면 결과는 false가 됩니다.

var age = 20;
var isKorean = true;

console.log(age >= 18 && isKorean); // true 출력

let x = 5;
let y = 10;

// 두 조건이 모두 true일 때만 결과가 true가 됩니다.
console.log(x > 0 && y < 20); // true
console.log(x > 0 && y > 20); // false

OR 연산자 (`||`)

OR 연산자는 두 개의 조건 중 하나라도 true이면 결과가 true가 됩니다.
두 개의 조건이 모두 false인 경우에만 결과는 false가 됩니다.

var score = 80;
var hasBonus = true;

console.log(score >= 90 || hasBonus); // true 출력

let isRainy = true;
let isSunny = false;

// 두 조건 중 하나라도 true이면 결과가 true가 됩니다.
console.log(isRainy || isSunny); // true
console.log(!isRainy || isSunny); // false
console.log(isRainy || !isSunny); // true
console.log(!isRainy || !isSunny); // true

NOT 연산자 (`!`)

NOT 연산자는 주어진 조건을 반대로 뒤집습니다. 즉, true는 false로, false는 true로 변환됩니다.

let isRaining = true;

// 주어진 조건을 반대로 뒤집습니다.
console.log(!isRaining); // false
console.log(!!isRaining); // true

삼항 연산자

삼항 연산자는 JavaScript의 조건 연산자로서, 세 부분으로 구성되어 있습니다. 이는 조건 ? 참일 때 값 : 거짓일 때 값의 형식을 갖습니다. 이 연산자는 조건에 따라 값을 반환하는 역할을 합니다. 즉, 조건이 참이면 표현식1(참일 때 값)이 실행되고, 거짓이면 표현식2(거짓일 때 값)가 실행됩니다. 이렇게 삼항 연산자는 세 개의 피연산자를 가지고 조건에 따라 값을 결정하는 간결한 방법을 제공합니다.
삼항 연산자는 단순한 if-else 문을 보다 간결하게 표현할 수 있는 방법을 제공합니다.

const val = val ? "참일 경우 값" : "거짓일 경우 값";

// if else문 사용
var score = 85;
var grade;

if (score >= 90) {
  grade = "A";
} else if (score >= 80) {
  grade = "B";
} else {
  grade = "C";
}
console.log(grade); // "B" 출력

// 삼항 연산자 사용
var score = 85;
var grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";
console.log(grade); // "B" 출력

첫 번째 코드는 if else 문을 사용하여 여러 조건을 차례대로 확인합니다.
두 번째 코드는 삼항 연산자를 중첩하여 여러 조건을 간결하게 처리합니다.

// if else문 사용
function greet(name, isKorean) {
  var message;
  if (isKorean) {
    message = "안녕하세요, " + name + "님!";
  } else {
    message = "Hello, " + name + "!";
  }
  console.log(message);
}
greet("James", true); // "안녕하세요, James님!" 출력

// 삼항 연산자 사용
function greet(name, isKorean) {
  var message = isKorean
    ? "안녕하세요, " + name + "님!"
    : "Hello, " + name + "!";
  console.log(message);
}
greet("James", true); // "안녕하세요, James님!" 출력

첫 번째 코드는 if else 문을 사용하여 isKorean 변수에 따라 메시지를 다르게 설정합니다.
두 번째 코드는 삼항 연산자를 사용하여 isKorean 변수에 따라 간결하게 메시지를 설정합니다.

정진우

내가 바뀌지 않으면 아무것도 바뀌지 않는다 🔥🔥🔥

이전 포스트

[JavaScript] 조건문

다음 포스트

[JavaScript] DOM

0개의 댓글

[JavaScript] 연산자

JavaScript

연산자

연산자 우선순위

산술 연산자

덧셈(+)

뺄셈(-)

곱셈(*)

나눗셈(/)

나머지 연산(%)

증가 연산(++)

감소 연산(--)