[JavaScript] 자바스크립트의 연산자(Operator)

연산자란?

연산자(Operators)란 데이터를 원하는 형태로 변경 및 판단하기 위한 코드를 의미한다.

 

• 산술 연산자 : 사칙연산, 나머지 연산, 제곱, 루트 등
• 대입 연산자 : 변수에 값을 대입할 때 사용하는 이항 연산자(재귀적 연산)
• 증감 연산자 : 미리 정해진 일정 크기를 증가 혹은 감소시키는 연산자
• 비교 연산자 : 이상, 이하, 미만, 초과, 같음, 다름을 판단하여 참(true)과 거짓(false)을 반환
• 논리 연산자 : and, or, not and, not or, not 연산자로 판단하여 참(true)과 거짓(false)을 반환
• 비트 연산자 : 비트 단위로 논리 연산 수행(웹 분야에서는 활용도가 낮음)
• 그 외 연산자 : 특정 목적이나 형태를 갖는 연산자

 

 

 

 

산술 연산자

• 사칙연산을 다루는 가장 기본적인 연산자이다.
• 정수를 실수로 나눠도 정수로 변환된다.
• 데이터 타입에 대한 자유도가 높다.

let num1 = 1000;
let num2 = 5;

let result_add = num1 + num2;
console.log(`result add: ${result_add}`); // result add: 1005

let result_sub = num1 - num2;
console.log(`result sub: ${result_sub}`); // result sub: 995

let result_multi = num1 * num2;
console.log(`result multi: ${result_multi}`); // result multi: 5000

let result_div = num1 / num2;
console.log(`result div: ${result_div}`); // result div: 200

let num3 = 5.0;

let result_div2 = num1 / num3;
console.log(`result div2: ${result_div2}, typeof: ${typeof result_div2}`);
// result div2: 200, typeof: number

let num4 = 1000.5;

let result_div3 = num4 / num3;
console.log(`result div3: ${result_div3}, typeof: ${typeof result_div3}`);
// result div3: 200.1, typeof: number

console.log(`10 % 3 = ${10 % 3}`); // 10을 3으로 나눈 나머지

console.log(`10 ** 3 = ${10 ** 3}`); // 10의 3제곱

 

 

 

 

대입 연산자

• 변수에 값을 대입할 때 사용하는 이항 연산자이다.
• 피연산자들의 결합 방향은 오른쪽에서 왼쪽이다.
• 산술 연산자와 결합한 다양한 복합 대입 연산자가 존재한다.

x += 5 // x = x + 5와 같은 표현임

num1 = 100;
num2 = 5;

// num1 = num1 + num2;
console.log(`${num1} += ${num2} = ${num1 += num2}`); // num1 = 105

// num1 = num1 - num2;
console.log(`${num1} -= ${num2} = ${num1 -= num2}`); // num1 = 100

// num1 = num1 * num2;
console.log(`${num1} *= ${num2} = ${num1 *= num2}`); // num1 = 500

// num1 = num1 / num2;
console.log(`${num1} /= ${num2} = ${num1 /= num2}`); // num1 = 100

// num1 = num1 ** num2;
console.log(`${num1} **= ${num2} = ${num1 **= num2}`); // num1 = 10000000000

// 루트 연산은 Math 메서드 사용
console.log(`SqareRoot num1 = ${Math.sqrt(num1)}`); // num1 = 100000

// num1 = num1 % num2;
console.log(`${num1} %= ${num2} = ${num1 %= num2}`); // num1 = 0

(왜 지맘대로 주석처리가 되는거야..?)

 

 

 

 

증감 연산자

• 피연산자를 1씩 증가 혹은 감소시키는 단항 연산자이다.
• 변수 앞에 사용한 경우와 변수 뒤에 사용한 경우에 따라 변수의 값을 업데이트하는 순서가 바뀐다.

num1 = 100;
console.log("1: ", num1++); // 100

num1++; // 1을 더한다
console.log("2: ", num1); // 102

num1--; // 1을 뺀다
console.log("3: ", num1); // 101
console.log('증감연산자가 변수 뒤쪽에 붙어있으면 증감연산은 다음 호출때 적용되어 출력');

console.log("4: ", ++num1); // 102
console.log("5: ", num1); // 102
console.log("6: ", --num1); // 101

 

 

증감 연산자의 연산 순서

let x = 10;            
let y = x-- + 5 + --x;

// x = 8, y = 23

① 첫번째 감소 연산자는 피연산자보다 뒤쪽에 위치하므로, 덧셈 연산 먼저 수행

② 덧셈 연산 수행 이후 감소 연산 수행 (x의 값 : 9)

③ 두번째 감소 연산자는 피연산자보다 앞쪽에 위치하므로, 덧셈 연산보다 먼저 수행 (x의 값 : 8)

④ 감소 연산 수행 이후 덧셈 연산 수행

⑤ 마지막으로 변수 y에 결괏값의 대입 연산 수행 (y의 값 : 23)

 

 

 

 

비교 연산자

• 연산 결과는 무조건 boolean type(true of false)을 반환한다.
• 피연산자들의 결합 방향은 왼쪽에서 오른쪽이다.
• 피연산자가 둘 다 숫자면, 해당 숫자를 서로 비교한다.
• 피연산자가 둘 다 문자열이면, 첫번째 문자부터 알파벳 순서대로 비교한다.

num1 = 100;
num2 = 5;

console.log(num1 > num2); // true
console.log(num1 < num2); // false
console.log(num1 >= num2); // ture
console.log(num1 <= num2); // false
console.log(num1 == num2); // false

// 문자열 비교
num1 = 'abcdeg'; // 97 98 99 100 101 103
num2 = 'abcdefg'; // 97 98 99 100 101 102 103
// 문자의 같은 자리수의 유니코드값이 다를 때 까지 비교
console.log(num1 > num2); // true 문자의 같은 자리수의 유니코드값 비교

 

동등 연산자(==)와 일치 연산자(===)

• 동등 연산자(==)는 두 연산자의 값이 같으면 참(true)을 반환한다. 이 때, 두 피연산자의 타입이 다르면 비교를 위해 강제로 타입을 같게 변환한다.
• 일치 연산자(===)는 타입의 변환 없이 두 피연산자의 값, 타입이 모두 같아야만 참(true)을 반환한다.

num1 = 10;
num2 = 10;
console.log(num1 == num2); // true
num2 = '10';
console.log(num1 == num2); // true 값만 비교
console.log(num1 === num2); // flase 값과 타입 모두 비교

console.log(num1 != num2); // false
console.log(num1 !== num2); // true 값과 타입 모두 비교

 

 

 

 

논리 연산자

• 주어진 논리식을 판단하여, 참(true)과 거짓(false)를 반환한다.
• 우선 순위에 따라 코드의 효율성이 달라진다. (! > && > ||)

// and 연산자
console.log(true && true); // 좌측과 우측이 모두 true -> true
console.log(true && false); // 좌측과 우측 중 한 쪽이 false -> false
console.log(false && true); // false
console.log(false && false); // false
// 연산의 순서에 의한 효율성 증가 -> && 연산자는 좌측이 true면 우측연산 진행
// 좌측 false면 연산 중지 -> 다음 라인 코드 실행

// or 연산자
console.log(true || true); // or 연산자 : 좌측과 우측 중 한쪽이 true -> true
console.log(true || false); // true
console.log(false || true); // true
console.log(false || false); // false
// 연산의 순서에 의한 효율성 증가 -> || 연산자는 좌측이 false이면 우측연산 진행
// 좌측 true면 연산 중지 -> 다음 라인 코드 실행

// not 연산자
console.log(!true); // 현재의 값을 반대로 바꿔서 연산 -> false
console.log(!!true); // true
console.log(!(!true)); // true 괄호의 중요성

// 우선 순위에 따른 효율성 예시

// 연산의 실행 횟수 5번
console.log(!(n1 == n2) && (n2 == n3) || !(n1 == n3)); // true 추천 방식은 아님

// 연산의 실행 횟수 3번
console.log(!(n1 == n3) || (n2 == n3) && !(n1 == n2)); // true &&부터 실행

• 예시를 보면 같은 내용의 코드여도 순서에 따라 실행횟수 차이가 나는 걸 알 수 있다.

 

 

 

 

그 외 연산자

삼항 연산자

• 유일하게 피연산자를 3개나 가지는 조건 연산자이다.
• 짧은 if/else 문 대신 사용할 수 있지만, 가독성이 떨어진다는 단점이 있다.

// 표현식 ? 반환값1 : 반환값2
let x = 3, y = 5;
let result = (x > y) ? x : y   // x가 더 크면 x를, 그렇지 않으면 y를 반환함

console.log("둘 중에 더 큰 수는 " + result + "입니다.");

 

 

 

 

자바스크립트 연산자의 우선순위표

• 우선순위가 빠른 연산자가 먼저 실행횐다.
• 같은 우선순위면 결합 순서에 따라 실행 순서가 결정된다.

우선순위	연산자	설명	결합 방향
1	()	묶음(괄호)	-
2	.	멤버 접근	왼쪽에서 오른쪽으로
	new	인수 있는 객체 생성	-
3	()	함수 호출	왼쪽에서 오른쪽으로
	new	인수 없는 객체 생성	오른쪽에서 왼쪽으로
4	++	후위 증가 연산자	-
	--	후위 감소 연산자	-
5	!	논리 NOT 연산자	오른쪽에서 왼쪽으로
	~	비트 NOT 연산자	오른쪽에서 왼쪽으로
	+	양의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
	-	음의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
	++	전위 증가 연산자	오른쪽에서 왼쪽으로
	--	전위 감소 연산자	오른쪽에서 왼쪽으로
	typeof	타입 반환	오른쪽에서 왼쪽으로
	void	undefined 반환	오른쪽에서 왼쪽으로
	delete	프로퍼티의 제거	오른쪽에서 왼쪽으로
6	**	거듭제곱 연산자	오른쪽에서 왼쪽으로
	*	곱셈 연산자	왼쪽에서 오른쪽으로
	/	나눗셈 연산자	왼쪽에서 오른쪽으로
	%	나머지 연산자	왼쪽에서 오른쪽으로
7	+	덧셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
	-	뺄셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
8	<<	비트 왼쪽 시프트 연산자	왼쪽에서 오른쪽으로
	>>	부호 비트를 확장하면서 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
	>>>	부호 비트를 확장하지 않고 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
9	<	관계 연산자(보다 작은)	왼쪽에서 오른쪽으로
	<=	관계 연산자(보다 작거나 같은)	왼쪽에서 오른쪽으로
	>	관계 연산자(보다 큰)	왼쪽에서 오른쪽으로
	>=	관계 연산자(보다 크거나 같은)	왼쪽에서 오른쪽으로
	instanceof	인스턴스 여부 판단	왼쪽에서 오른쪽으로
10	==	동등 연산자	왼쪽에서 오른쪽으로
	===	일치 연산자	왼쪽에서 오른쪽으로
	!=	부등 연산자	왼쪽에서 오른쪽으로
	!==	불일치 연산자	왼쪽에서 오른쪽으로
11	&	비트 AND 연산자	왼쪽에서 오른쪽으로
12	^	비트 XOR 연산자	왼쪽에서 오른쪽으로
13	|	비트 OR 연산자	왼쪽에서 오른쪽으로
14	&&	논리 AND 연산자	왼쪽에서 오른쪽으로
15	||	논리 OR 연산자	왼쪽에서 오른쪽으로
16	? :	삼항 연산자	오른쪽에서 왼쪽으로
17	=	대입 연산자 (=, +=, -=, *=, /=, %=, <<=, >>=, >>>=, &=, ^=, |=)	오른쪽에서 왼쪽으로
18	...	전개	-
19	,	쉼표 연산자	왼쪽에서 오른쪽으로

 

 

 

 

※ 참고자료

http://www.tcpschool.com/javascript/intro

https://www.w3schools.com/js/default.asp