[ONEBITE-REACT] JS 기본 - 연산자 (Operator)

의미

프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말한다.

예를 들어 덧셈 연산자(+), 곱셉 연산자(*), 뺄셈 연산자(-), 나눗셈 연산자(/) 등이 있다.

종류

대입 연산자 (=) (assignment operator)

let var1 = 1;

위와 같이 변수(var1)의 기본 값으로 1을 초기화 할 때 쓰는 = 기호를 대입 연산자라고 한다.

산술 연산자 (+, -, *, / , %) (artihmetic operator)

+ 덧셈 연산자, - 뺄셈 연산자, * 곱셈 연산자, / 나눗셈 연산자, % 나머지 연산자(모듈러 연산자)

사칙연산 규칙처럼 곱셈, 나눗셈, 나머지 계산은 덧셈 뺄셈보다 우선순위가 높다.

덧셈, 뺄셈을 먼저 하고 싶다면 사칙연산 하듯 괄호로 묶어주면 된다.

let num = (1+2)*10; // 30

복합 대입 연산자 (+= 등) (compound assignment operator)

기존 변수의 값을 변경할 때 사용한다.

+=, -=, *=, /=, %= 등 모든 산술 연산자를 사용할 수 있다.

// 기존의 변수에 새로운 값을 더하고 싶을 때 num이라는 변수를 여러번 입력해야 하는 번거로움이 있다.
let num = 10;
num = num + 10;

// 복합 대입 연산자 += 또는 -=를 사용하면 더 편리하다.
let num = 10;
num += 10; // 20

증감 연산자 (++, --) (in/decrement operator)

한 단계(1)만 늘리거나 줄이고 싶을 때 사용한다.

이 증감 연산자는 변수의 뒤에 사용하면 그 줄이 끝나고 나서야 계산이 된다.

따라서 해당 줄에서 바로 계산을 마치고 싶다면 변수의 앞에 사용해야 한다.

 

변수의 앞에서 증감연산자를 사용하는 것을 전위 연산이라고 부르고, (prefix operator)

뒤에 사용 하는 것을 후위 연산이라고 부른다. (postfix operator)

let num = 10;
console.log(num++); // 10으로 나옴. 이 밑에 줄에나 가서야 11이 되기 때문.

let num = 10;
num++;
console.log(num); // 11로 나옴. num++한 뒤에 아랫줄에서 콘솔을 찍었기 때문.

// 그러나 아래와 같이 하면 바로 그 줄에서 계산이 된다.
let num = 10;
console.log(++num); // 11

논리 연산자 (||, &&, !) (logical operator)

Boolean Type을 다룰 때 사용한다.

• or : 하나만 참이어도 참이 된다. 기호는 ||. (엔터키 위 원화 표시를 쉬프트 누른 채로 2번 입력)
• and : 양쪽이 다 참이어야 참이 된다. 기호는 &&
• not : 참이면 거짓, 거짓이면 참으로 반대로 계산한다. 기호는 !

let or = true || false;
let and = true && false;
let not = !true;

console.log(or, and, not); // true, false, false로 출력됨.

비교 연산자 (===, !==, ><) (comparison operator)

• 동등 비교 연산자 (===) : 좌항과 우항이 같은 값인지 계산 (strict equal)
• 비동등 비교 연산자 (!==) : 좌항과 우항이 같은 값이 아닌지 계산
• 대소 비교 연산자(<, >) : 좌항과 우항 중 어떤 것이 더 크거나 작은 값인지 계산

let comp1 = 1 === 1;
let comp2 = 1 !== 2;

console.log(comp1, comp2); // ture, ture 출력.

그런데 == 두 개만 사용해도 동등 비교 연산자로 사용할 수 있다. 자바스크립트가 아닌 다른 언어에서는 == 두 개만 사용 하는 경우도 많다. (equal)

하지만 자바스크립트에서도 == 두 개만 사용 할 순 있는데, 이 때는 써있는 숫자만 놓고 동등한지 비교를 하는데,

일반적으로 데이터 타입이 다르면 다른 값으로 보기 때문에 데이터 타입까지 비교가 가능한 === 세 개를 동등 비교 연산자로 많이 사용한다.

console.log(1 == "1"); // ture, 자료형은 number, string으로 다르지만, 값은 1로 같다.
console.log(1 === "1"); // false, 자료형이 number, string으로 다르다.

대소 비교 연산자는 <, > 꺽쇠로 표현이 가능하다.

그런데 같거나 크다/작다를 비교할 때는 꺽쇠 뒤에 등호(=)를 사용한다. 앞에 사용하면 오류가 발생한다.

console.log(2 < 1); // false
console.log(2 =< 1); // 오류
console.log(1 <= 2); // true

Null 병합 연산자 (??) (nullish coalescing operator)

여기서부터는 다른 언어에는 존재하지 않고 자바스크립트에만 존재하는 개념의 연산자들이다.

 

존재하는 값을 추려내는 연산자, 즉 null이나 undefined와 같이 정의되지 않은 값이 아닌 값을 찾아내는 연산자.

?? 기호로 표현하고, 만약 피연산자가 모두 null이나 undefined가 아니라면 가장 먼저 쓰인 값을 반환한다.

그리고 number type 뿐만 아니라 string type에서도 계산 가능하다.

let num1;
let num2 = 10;

let num3 = num1 ?? num2;
console.log(num3); // 10이 출력됨. num1은 값을 초기화 하지 않아 undefined 상태이기 때문에 undefined가 아닌 10을 값으로 불러옴.

// 마찬가지로 데이터 타입에서도 가능하다.

let str1;
let str2 = '안녕하세요';
console.log(str1 ?? str2); // '안녕하세요'가 출력됨.

console.log(num2 ?? str2); // 10이 출력됨. 피연산자가 모두 null이나 undefined가 아닌 경우 가장 앞의 값을 반환함.

Typeof 연산자 (typeof) (type operator)

자바스크립트에서 변수의 값은 언제든지 다른 형태로도 초기화가 가능하다. 처음에는 number type으로 값을 초기화 했더라도 언제든지 string 타입으로도 바꿀 수 있다. 이렇게 data type이 수시로 바뀌다 보니, 그 변수를 typeof 연산자로 어떤 data type인지 확인할 수도 있고, 이걸 따로 변수로 초기화해서 계속 확인할 수도 있다.

let num = 1;
num = "안녕하세요";

// 위처럼 최초에는 number type으로 값을 초기화해도 string 타입으로 변경이 얼마든지 가능하다.
// 따라서 아래처럼 콘솔에 typeof로 data type을 확인해볼 수도 있고 다른 변수로 typeof를 초기화해서 사용도 가능하다.

console.log(typeof num); // string 으로 출력됨.
let typeNum = typeof num;
console.log(typeNum); // string 으로 출력됨.

// 다양한 예시

console.log(typeof 5); // "number"
console.log(typeof 'Hello'); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object" (주의: null은 객체 타입으로 반환된다. 이는 자바스크립트의 오래된 버그로 인해 발생하는 것)
console.log(typeof [1, 2, 3]); // "object"
console.log(typeof { key: 'value' }); // "object"
console.log(typeof function() {}); // "function"

삼항 연산자 (조건식 ? 참일때 값 : 거짓일 때 ) (conditional operator 또는 ternary)

condition ? expr1 : expr2로 표현한다.

condition이라는 조건이 붙고 이 조건이 참이면 expr1을 반환, 거짓이면 expr2를 반환한다.

이렇게 조건이 붙기 때문에 conditional operator (조건 연산자)라고 하기도 하고 ternary operator(삼항 연산자)라고 부르기도 한다.

삼항 연산자라는 뜻은 보통 자바스크립트에서는 || or 논리 연산자처럼 좌항, 우항 이항을 두고 계산하지만, 위처럼 삼항을 두고 계산한다고 하여 삼항 연산자라고 부른다.

// 변수 res에 var1의 값이 짝수일 때 "짝수"를 반환하고, 홀수일 때 "홀수"를 반환해라.

let var1 = 10;
let res = var1 % 2 === 0 ? "짝수" : "홀수";

console.log(res); // "짝수"가 출력됨.