[JavaScript] 연산자

2023.11.30.목

연산자

자바스크립트에서는 여러 가지 연산자를 사용하여 변수, 값 또는 표현식을 조작하고 계산할 수 있다

연산에 사용되는 기호인 연산자에 대하여 알아보자

 

산술 연산자

일반적인 수학적 연산자이다

• + (더하기)
• - (빼기)
• * (곱하기)
• / (나누기)
• % (나머지)

// 산술 연산자
let a = 10;
let b = 5;

console.log(a + b); // 15
console.log(a - b); // 5
console.log(a * b); // 50
console.log(a / b); // 2
console.log(a % b); // 0
console.log(a ** b); // 100000

할당 연산자

변수에 값을 할당한다

• = (대입)
• += (더하기 후 대입)
• -= (빼기 후 대입)
• *= (곱하기 후 대입)
• /= (나누기 후 대입)
• %= (나머지 후 대입)

// 할당 연산자
let number = 10;

number += 10;
number -= 10;
number *= 10;
number /= 10;
number %= 10;

비교 연산자

비교 연산에는 값의 비교와 값과 타입까지 비교하는 2가지 종류가 있다

연산자 수행결과를 T/F(진위형,boolean)으로 반환한다

• == (동등)
• === (일치)
• != (부등)
• !== (불일치)
• > (크다)
• < (작다)
• >= (크거나 같다)
• <= (작거나 같다)

// 비교 연산자
let num1 = 10;
let num2 = "10";
let num3 = 15;

console.log(num1 == num2);  // true (값이 같음)
console.log(num1 === num2); // false (값과 타입이 다름)
console.log(num1 != num3);
console.log(num1 !== num3);
console.log(num1 > num3);
console.log(num1 < num3);
console.log(num1 >= num3);
console.log(num1 <= num3);

논리 연산자

두 조건을 만족하는지 여부를 검사한다

• && (논리 AND)
• || (논리 OR)
• ! (논리 NOT)

// 논리 연산자
let isTrue = true;
let isFalse = false;

console.log(isTrue && isFalse); // false (AND 연산)
console.log(isTrue || isFalse); // true (OR 연산)
console.log(!isTrue);            // false (NOT 연산)

 

단축 평가

&& 연산일때는 두 값이 모두 true여야 true이므로 첫번째 값부터 false일 경우 두 번째 값을 읽지 않는다

|| 연산일 경우 하나라도 true면 true이므로 첫번째 값이 true면 두 번째 값을 읽지 않는다

두 번째 값의 true / false 여부에 상관없이 정해졌기 때문에 굳이 연산하는 수고를 하지 않는 것이다

이를 단축 평가라고 한다

증감 연산자

값을 증가 혹은 감소시키는 연산자이다

연산자의 위치에 따라 실행되는 순서가 다르다

• ++ (증가)
• -- (감소)

// 증감 연산자
let count = 5;

console.log(++count); // 6 (증가 후 출력)
console.log(count--); // 6 (현재 값 출력 후 감소)
console.log(count);   // 5 (이전 연산의 영향을 받음)

문자 연결 연산자

숫자가 아닌 타입에 + 혹은 - 사용시 산술연산이 아닌 문자 연결 연산이 된다

• + (문자열 연결)

// 문자 연결 연산자
let str1 = "Hello";
let str2 = "World";

console.log(str1 + " " + str2); // "Hello World"
console.log(str1 - str2); // NaN
console.log("10" - "5"); // 5

 

삼항 조건 연산자

앞의 조건이 참이면 첫번째 값이 거짓이면 두번째 값이 출력된다

• 조건 ? 참일 때의 값 : 거짓일 때의 값

// 삼항 조건 연산자 (ternary operator)
let age = 20;
let message = (age >= 18) ? "성인" : "미성년자";

console.log(message); // 만약 age가 18 이상이면 "성인", 그 외에는 "미성년자"

 

nullish 연산자

자바스크립트에서는 || 연산자를 사용하여 기본값을 설정할 때

왼쪽 피연산자가 falsy한 값일 때 오른쪽 피연산자를 사용한다

그러나 이 때 0이나 빈 문자열 등도 falsy한 값으로 취급되기 때문에 원하는 결과를 얻기가 어려울 수 있다

이에 대한 대안으로 도입된 것이 nullish 연산자입니다. nullish 연산자는 왼쪽 피연산자가 null 또는 undefined일 때만 오른쪽 피연산자를 반환한다

let x = null;
let y = "Hello, World!";

let result = x ?? y;

console.log(result); // 만약 x가 null 또는 undefined이면 y가 할당됨

nullish 연산자를 사용하면 명시적으로 null 또는 undefined를 체크하여 기본값을 설정할 수 있기 때문에

코드의 의도를 더 명확하게 표현할 수 있다