[JavaScript] 자바스크립트 연산자(Operators) 이해하기 - 2

 

 

[JavaScript] 자바스크립트 연산자(Operators) 이해하기 - 1에서는 자바스크립트의 연산자들 중 피연산자의 개수에 따라 단항, 이항, 삼항 연산자에 대한 내용들을 정리했었다.

오늘은 그 외에 다른 연산자들에 대한 내용들을 정리해보자.

 

할당 연산자

할당 연산자는 오른쪽의 피연산자 값을 왼쪽 피연산자 값에 할당한다.

즉, 피연산자 두 개가 필요한 이항 연산자이다.

변수에 값을 담을 때 사용했던 등호(=)가 바로 할당 연산자다.

// 변수 선언
let myNumber; 

// 숫자 7을 변수 myNumber에 `할당`
myNumber = 7;

복합 할당 연산자라고 해서 +=, -=, *-, /= 등 다른 연산자들과 복합해서 약식으로 표기하는 방식이 있는데 특별히 의미가 변하진 않고 작성할 코드의 길이를 줄여주는 역할만 한다.

이름	복합 할당 연산자	뜻
덧셈 할당	x += y	x = x + y
뺄셈 할당	x -= y	x = x - y
곱셈 할당	x *= y	x = x * y
나눗셈 할당	x /= y	x = x / y
나머지 연산 할당	x %= y	x = x % y
지수 연산 할당	x **= y	x = x ** y

 

비교 연산자

피연산자들을 비교하고 비교에 따라 논리 값을 반환한다.

비교 연산자들도 역시 비교할 대상 2개가 피연산자로 필요한 이항 연산자이다.

흔히 우리가 수학 시간에 배운 값을 비교하는 기호들이 비교 연산자로 사용된다.

이름	기호	설명
동등	==	피연산자들이 같으면 참을 반환
부등	!=	피연산자들이 다르면 참을 반환
일치	===	피연산자들이 같고 피연산자들의 같은 형태인 경우 참을 반환
불일치	!==	피연산자들이 다르거나 형태가 다른 경우 참을 반환
~보다 큼	>	좌항의 피연산자 보다 우항의 피연산자가 크면 참을 반환
~보다 크거나 같음	>=	좌변의 피연산자 보다 우항의 피연산자가 크거나 같으면 참을 반환
~보다 작음	<	좌항의 피연산자 보다 우항의 피연산자가 작으면 참을 반환
~보다 작거나 같음	<=	좌항의 피연산자 보다 우항의 피연산자가 작거나 같으면 참을 반환

사실 기호만 봐도 직관적으로 알 수 있지만, 위 표에서 아래 4개의 비교 연산자는 설명에서도 나와 있듯 왼쪽이 기준이다.

또한 비교연산자의 피연산자들은 숫자, 문자, 불린, 객체 값을 비교할 수 있는데,

만약 두 피연산자가 다른 자료형일 경우, JavaScript는 일반적으로 비교를 위해서 피연산자를 적절한 형태로 자료형을 강제로 변환한다.

이 부분이 특히 까다로운데 자료형을 변환하는 내용은 다른 페이지에 따로 정리해볼까 한다.

아무튼, 그렇기 때문에 같은 피연산자들을 비교하더라도 동등과 일치 연산자, 부등과 불일치 연산 간의 결과가 미묘하게 달라서 사용할 때 주의를 할 필요가 있는데, 대부분의 스타일 가이드에서는 값이 서로 같은지를 비교할 때 자료형까지 비교하는 일치(===)와 불일치(!==) 연산을 상대적으로 더 선호한다.

 

 

산술 연산자

산술연산자는 숫자 값을 피연산자로 갖고, 하나의 숫자 값을 반환한다.

기본적인 산술 연산자는 덧셈(+), 뺄셈 (-), 곱셈 (*), 나눗셈 (/)이 있다.

이밖에도 나머지(%), 거듭제곱(**) 연산 정도가 있는데,

일반적인 산술연산자는 피연산자 2개 사이에서 이항 연산자로도 활용되고,

특별히 ++(증가), --(감소) 연산자는 피연산자 앞이나 뒤에 붙으면서 단항 연산자로도 활용된다.

let x = 0;
console.log(x); // 0
console.log(++x); // 1   0에서 1이 더 해진 값이 출력된다.
console.log(x); // 1     현재 x는 1이다.
console.log(x++); // 1   증가하기 전에 값을 먼저 반환하기 때문에 1이 출력되고 1이 증가한다.
console.log(x); // 2     다시 x를 출력해보면 현재 x는 2다.
console.log(--x); // 1   2에서 1이 감소한 값이 출력된다.
console.log(x); // 1     현재 x는 다시 1이다.
console.log(x--); // 1   감소하기 전에 값을 먼저 반환하기 때문에 1이 출력되고 1이 감소된다.
console.log(x); // 0     결국 다시 x는 0인 것이다.

증. 감연 산자는 피연산자의 위치에 따라 반환되는 값이 다르기 때문에 오히려 처음에는 어렵게 느껴질 수도 있다. 

 

 

논리 연산자

논리 연산자는 보통 불린 값과 사용되는데, 양쪽 피연산자에 따라 논리적인 불린 값을 반환하는 연산자로

&&(논리AND), ||(논리 OR), !(논리 NOT) 3가지가 있다. 각각의 의미는

&&(이항 연산자): 양쪽 값이 모두 true일 경우 true를 반환

||(이항 연산자): 양쪽 값이 모두 false일 경우 false를 반환

!(단항 연산자): 피연산자의 반대 값을 반환

let x = 3
let y = 4
console.log((x < y) && (x * 2 == y)); // false
console.log((x > y) || (x * y <= 20)); // true
console.log(!(x < y)); // false

그러나 피연산자가 불린 형 값이 아닐 경우에는 다른 형태의 값을 반환할 수도 있다.

&&: 좌항을 참으로 판단할 수 있는 경우 우항을 반환, 그렇지 않을 경우 좌항을 반환한다.

||: 좌항을 참으로 판단할 수 있는 경우 좌항을 반환, 그렇지 않을 경우 우항을 반환한다.

!: 피연산자를 참으로 판단할 수 있는 경우 false를 반환, 그렇지 않을 경우 true를 반환.

// 논리AND
console.log("강아지" && "고양이"); // 고양이
console.log("고양이" && false);  // false
console.log(false && "고양이");  // false
console.log(null && "고양이");  // null
console.log(undefined && "고양이");  // undefined

// 논리OR
console.log("강아지" && "고양이"); // 강아지
console.log("고양이" || false);  // 고양이
console.log(false || "고양이");  // 고양이
console.log(null || "고양이");  // 고양이
console.log(undefined || "고양이");  // 고양이

// 논리NOT
console.log(!"강아지"); // false
console.log(!null); // true
console.log(!undefined); // true

 

문자열 연산자

마지막으로 문자열 연산자는 산술 연산자에서도 본 + (덧셈기호)이다.

일반적으로 문자열 연산자는 두 개의 문자열 값을 피연산자 받고(이항 연산자) 

두 문자열이 합쳐진 새로운 문자열을 반환한다. 

두 문자열 값을 연결한다고 해서 연결 연산자라고도 부른다.

추가적으로 문자열 값이 할당된 변수를 이용하면 복합 할당 연산자 +=로도 문자열을 연결할 수 있다.

// 연결 연산자
console.log("Big" + "Top"); // BigTop

// 복합 할당 연산자
let x = "Big";
console.log(x += "Top"); // BigTop