[JS] Operator 정리

insuzy·2021년 8월 18일

1. 문자열 합치기(String concatenation)

console.log('banana' + '🍌'); //banana🍌
console.log('1' + 2); //12
console.log(`string literals: 1 + 2 = ${1 + 2}`); // string literals: 1 + 2 = 3

+로 문자열을 합칠 수 있다.
문자열+숫자 = 문자열
백틱(`, backtick)에 대해선 따로 정리해두었다.
https://velog.io/@subsubol/JS-%ED%85%9C%ED%94%8C%EB%A6%BF-%EB%AC%B8%EC%9E%90%EC%97%B4Template-strings

2. 숫자 연산자(Numeric operators)

console.log(1 + 1); // add
console.log(1 - 1); // substract
console.log(5 / 2); // divide
console.log(1 * 1); // multiply
console.log(5 % 2); // remainder 
console.log(2 ** 3); // exponentiation

+는 더하기(add)
-는 빼기(substract)
/는 나누기(divide)
*는 곱하기(multiply)
%는 나머지(remainder)
**는 제곱(exponentiation)

3. 증감 연산자(Increment and decrement operators)

let count = 2;
const preIncrement = ++count;
console.log(`preIncrement: ${preIncrement}, count: ${count}`); 
//preIncrement: 3, count: 3

const postIncrement = count++;
console.log(`postIncrement: ${postIncrement}, count: ${count}`);
//preIncrement: 3, count: 4

const preDecrement = --count;
console.log(`preDecrement: ${preDecrement}, count: ${count}`);
//preIncrement: 3, count: 3

const postDecrement = count--;
console.log(`postDecrement: ${postDecrement}, count: ${couㅇnt}`);
//preIncrement: 3, count: 2

변수++ 는 값을 출력하고 더한다.
++변수 는 +1 더하고, 값을 출력한다.
변수-- 는 값을 출력하고 뺀다.
--변수 는 -1 빼고, 값을 출력한다.

4. 할당 연산자(Assignment operator)

let x = 1;
let y = 2;
console.log(x += y) //3
console.log(x -= y) //1
console.log(x *= y) //2
console.log(x /= y) //1

x += y는 x = x + y
x -= y는 x = x - y
x *= y는 x = x * y
x /= y는 x = x / y

5. 비교 연산자(Comparison operator)

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

피연산자 사이의 상대적인 크기를 판단해 true와 false를 반환함.

>는 왼쪽 값이 오른쪽 값보다 크면 true
>=는 왼쪽 값이 오른쪽 값과 같거나 크면 true
<는 오른쪽 값이 왼쪽 값보다 크면 true
<=는 오른쪽 값이 왼쪽 값과 같거나 크면 true

6. 논리 연산자(Logical operators)

1) OR(||)

const value1 = true;
const value2 = 4 < 2;
function check() {
	for (let i = 0; i < 10; i++) {
		// wasting time
		console.log('😱');
	}
	return true;
}

console.log(`or: ${value1} || ${value2} || ${check()}`); //true

하나라도 true이면 true
가장 앞이 true이면 연산을 멈춘다.
함수가 호출되거나 많은 연산을 하는 코드라면, 무거우므로 가장 뒤에 놓는 것이 효율적

2) AND(&&)

const value1 = true;
const value2 = 4 < 2;
function check() {
	for (let i = 0; i < 10; i++) {
		// wasting time
		console.log('😱');
	}
	return true;
}

console.log(`and: ${value1} && ${value2} && ${check()}`); //false

모두 true이면 true
하나라도 false이면 연산을 멈춘다.
함수가 호출되거나 많은 연산을 하는 코드라면, 무거우므로 가장 뒤에 놓는 것이 효율적
null 연산에도 간편하게 사용할 수 있음

nullableObject && nullableObject.something
//nullableObject이 null이면 false가 되기에,
//true일 경우에만 nullableObject.something가 실행된다.

//위와 동일한 코드이며, 풀어쓴 코드.
if (nullableObject != null) {
	nullableObject.something;
}

//+추가
a = 1;
function test(){
  console.log('hi');
}

a && test() //hi

if (a != null) {
 	test(); //hi
}

3) NOT(!)

const value = true;
console.log(!value); // false

논리식의 결과가 true이면 false을, false이면 true 반환

7. 동등 연산자(Equality)

const stringFive = '5';
const numberFive = 5;

console.log(stringFive == numberFive); //true
console.log(stringFive != numberFive); //false
console.log(stringFive === numberFive); //false
console.log(stringFive !== numberFive); //true

== 는 값이 같으면 true
!= 는 값이 다르면 true
=== 는 값과 타입이 같으면 true
!== 는 값과 타입이 다르면 true

0bject 에서는?

const key1 = { name: "subin" };
const key2 = { name: "subin" };
const key3 = key1;
console.log(kanguk1 == kanguk2); //false
console.log(kanguk1 === kanguk2); //false
console.log(kanguk1 === kanguk3); //true

값이 같아도 다른 reference을 가르키기에 다르다.
같은 곳을 참조하면 true

8. 조건 연산자(Conditional operators)

const name = 'subin';
if(name === 'ellie') {
    console.log("welcome ellie");
} else if(name === 'coder') {
    console.log("You are amazing coder");
} else {
    console.log("unknown"); //출력
}

if : 조건이 true이면 block의 실행
else if : if가 아닌경우 조건이 true일 경우 실행
else: if, else if 모두 아닐 때 실행

9. 삼항 연산자(Conditional (ternary) operator)

const name = 'subin';
console.log(name === 'subin' ? 'yes' : 'no'); //yes

간단한 if / else 문을 삼항 연산자를 이용하여 간단히 표현
문법 표현식 ? 반환값1 : 반환값2
중첩을 많이 할 경우 가독성이 떨어짐.

10. Switch 연산자(Switch operators)

const browser = 'IE';
switch (browser) {
  case 'IE':
    console.log('bad');
    break;
  case 'Chrome':
  case 'Firefox':
    console.log('good');
    break;
 default : 
    console.log('...thinking 🧐');
}