[Javascript] 연산자

---

#1. 연산자

1. 연산자의 개념

• 변수를 활용하여 각종 연산을 수행하는데 사용되는 특수 기호
• 모든 연산자는 연산결과를 반환한다.
  • 연산자 : 연산을 수행하는 기호 (+, -, *, / 등등)
  • 피연산자 : 연산자의 연산 수행 대상
• 연산자의 우선 순위
  • 하나의 식에 연산자가 둘 이상 있을 때, 어떤 연산을 먼저 수행할지 자동 결정 한다
  • 산술 > 비교 > 논리 > 대입 (대입은 제일 마지막에 수행된다)
  • 단항 연산자와 대입 연산자를 제외한 모든 연산자의 진행 방향은 왼쪽에서 오른쪽이다.

 

2. 산술 연산자(사칙연산자)

• 일반 수학과 동일한 연산 방법이고, 우선 순위이다.
• +(덧셈), -(뺄셈), *(곱셈), /(나눗셈), %(모듈러)
• % 는 나눈값의 나머지 값을 구하는 연산이다.

const a = 10;
const b = 4;
console.log(a + b);  // 14
console.log(a - b);  // 6
console.log(a * b);  // 40
console.log(a / b);  // 2.5
console.log(a % b);  // 2

• 연산 결과를 다른 변수에 할당할 수 있다.

const x = 5;
const y = 3;
const z = x + y - 2;
console.log(z);  // 6

• +(덧셈)은 문자열과 문자열을 합칠 수 도 있고, 문자열과 다른 타입을 합쳐 문자열로 값을 반환한다.

const example1 = "Hi,";
const example2 = "bye";
console.log(example1 + example2)  // Hi,bye

console.log("자바스크립트" + 123);  // 자바스크립트123
console.log("자바스크립트" + true);  // 자바스크립트true
console.log("자바스크립트" + null);  // 자바스크립트null

 

3. 대입 연산자

• ' = ' 를 사용해서 오른쪽 피연산자를 왼쪽 피연산자에 저장 후 저장된 값을 반환
• 연산 결과를 새로운 변수에 대입할 수 있다.

let example1 = 123;
let example2 = 456;
let result = example1 + example2;
console.log(result);  // 579

• 이미 생성된 변수의 값을 다른 값으로 변경할 수 있다.

let example3 = 100;
let example4 = 200;

example3 = 10;
example4 = 20;

console.log(example3);  // 10
console.log(example4);  // 20

• 연산 결과를 변수 스스로에게 덮어 씌울 수 있다. (변수 x에 대한 연산 결과를 다시 x에 덮어 씌울 수 있다.)

let x = 100;
x = x + 1;
console.log(x);  // 101

 

4. 단항 연산자

• 어떤 변수에 대한 연산결과를 다시 그 변수에 덮어 씌우는 연산을 축약한 형태
• +=, -=, *=, /=, %=

let x = 10

x += 1;
console.log(x);  // 11

x -= 1;
console.log(x);  // 10

x *= 2;
console.log(x);  // 20

x /= 2;
console.log(x);  // 10

x %= 3;
console.log(x);  // 1

 

5. 증감 연산자

• 증가연산자 (++) : 피연산자의 값을 1 증가 시킨다.
• 감소연산자 (--) : 피연산자의 값을 1 감소 시킨다.
• 단항 연산자의 덧셈과 뺄셈을 축약한 형태
• 스스로 1증가 혹은 1감소로 해석 할 수 있다.
• 증감 연산자의 위치에 따라 값이 달라진다. (++, -- 연산자가 독립적으로 사용되는 경우 위치에 상관없이 결과는 동일하다)

let example = 1;
console.log(example);  // 1

++example;
console.log(example);  // 2

example++;
console.log(example);  // 3

--example;
console.log(example);  // 2

example--;
console.log(example);  // 1

1) 전위 증감 연산자

• 증감 연산자가 앞에 위치한 경우
• 값에 대해 증가,감소를 먼저 수행한 후 전체 수식을 연산한다.

let prev = 1;
let result = 100 + ++prev;

console.log(result);  // 102
console.log(prev);  // 2

 

2) 후위 증감 연산자

• 증감 연산자가 뒤에 위치한 경우
• 전체 수식을 먼저 연산 후 값에 대해 증가,감소를 수행한다.

let next = 1;
let result = 100 + next++;

console.log(result);  // 101
console.log(next)  // 2

 

6. 비교 연산자

• 데이터가 같은지, 다른지 또는 두 값간의 크기를 비교할 때 사용하며, 항상 논리값(true / false)이 결과 값이다.
• >= (이상), > (초과), <= (이하), < (미만) 으로 표현한다.

let x = 100;
let y = 50;

let compare1 = x >= y;
let compare2 = x > y;
let compare3 = x <= y;
let compare4 = x < y;

console.log(compare1);  // true
console.log(compare2);  // true
console.log(compare3);  // false
console.log(compare4);  // false

• == / === (같다), != / !== (다르다) 로 표현한다.
  • ==, != : 값의 내용만 비교하기 때문에 문자열 "1"과 숫자형 1 을 같다고 판단한다.
  • ===, !== : 값의 데이터 타입까지 비교하기 때문에 문자열 "1"과 숫자형 1 을 다르다고 판단한다.
  • 자바스크립트에서는 정수, 실수 구분하지 않기 때문에 1 === 1.0 을 같다고 판단한다.

let a1 = "1";
let a2 = 1

console.log(a1 == a2);  // true
console.log(a1 === a2);  // false

console.log(a1 != a2);  // false
console.log(a1 !== a2);  // true

 

7. 논리 연산자

• 두개의 논리 값 (true / false) 을 비교하는 연산자 이다.
• 두개의 논리 값 간에 AND(&&), OR(||) 연산을 수행한다.
• OR(||) 보다 AND(&&)를 우선한다.
• 0은 false로 식별되고, 그 외 모든 수는 true로 식별된다.
• 빈문자열("")은 false로 식별되고, 한글자라도 있으면(" ", 공백 포함) true로 식별된다.
• NaN(Not a Number), false, null, undefined 도 false로 식별된다. (정리하면 0, 빈문자열(""), NaN, false, null, undefined 는 false , 그외는 모두 true를 반환한다)

 

1) AND (&&)

• 연산에 사용되는 모든 값이 true 인 경우에만 true, 그 외의 경우는 모두 false 이다.

console.log(true && true);  // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false);  // false

console.log(true && true && true);  // true
console.log(true && true && false);  // false

 

2) OR (||)

• 연산에 사용되는 값 중에서 하나라도 true 면 결과가 true, 모든 값이 false 인 경우에만 false 이다

console.log(true || true);  // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false);  // false

console.log(true || true || true);  // true
console.log(true || true || false);  // true
console.log(false || false || true);  // true

 

3) NOT ( ! )

• 느낌표를 사용하여 논리형 값에 반대되는 값을 반환한다.

let i = 1;
console.log(!i)  // false (number 1은 true)

let j = 0;
console.log(!j)  // true (number 0은 false)

let k = "";
console.log(!k)  // true (빈문자열은 false)

 

8. 삼항 연산자

• 조건식의 결과 값에 따라 연산을 처리하는 방식으로 결과 값이 참일 경우 식1, 거짓일 경우 식2 수행한다
• 삼항 연산자 안에 삼항 연산자를 중첩하여 쓰는 것도 가능하다

const number = 30;
const result = number >= 40 ? "값1" : "값2";
console.log(result);  // 값2

const result2 = number >= 40 ? "값1" : number <= 40 ? "값3" : "값4";
console.log(result2)  // 값3