(3) Modern JavaScript 입문 3

3. 연산자

* 연산자에 대해서 알아보자.

* 연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자이다.

* 예를 들어서, 우리가 변수와 상수를 배울 때 다음과 같은 코드를 작성했다.

let value = 1; // 변수 선언
value = 2; // 대입 연산자

* 여기서 두 번째 줄에서 사용된 = 문자가 바로 연산자(operand)이다. 연산자의 종류는 굉장히 많지만, 그 중에서 = 은 대입연산자에 해당한다. 첫 번째 줄은 새로운 변수를 선언하는 것으로서, 대입 연산자에 해당하지 않는다.

---

(1) 산술 연산자

* 산술 연산자는 사칙연산과 같은 작업을 하는 연산자를 의미한다.

+ : 덧셈
- : 뺄셈
* : 곱셈
/ : 나눗셈

* 위 4가지가 가장 기본적인 산술 연산자이다. 이 외에도 몇가지가 더 있는데, 먼저 위 연산자들을 활용해 보자.

let a = 1 + 2;
console.log(a);

* 위 코드는 a 값을 선언할 때 1 + 2 의 결과물을 담는다. 따라서 콘솔에선 3 이라는 숫자가 나타난다.

let a = 1 + 2 - (3 * 4) / 4;
console.log(a);

* 이렇게 우리가 계산기를 두드릴 때 처럼 할 수도 있다.

* 그리고, 이런 것도 할 수 있다. 이 또한 산술 연산자의 일부이다.

let a = 1;
a++; // 후위 증가 연산자
++a; // 전위 증가 연산자
console.log(a);

* 결과는 3이 나타난다. ++ 는 특정 변수에 바로 1을 더해준다. 그런데, ++가 변수 이름 앞에 오는 것과 뒤에 오는 것에는 차이가 있다.

let a = 1;
console.log(a++); // 1
console.log(++a); // 3

console.log(a++); 를 할 때에는 1을 더하기 직전 값을 보여주고,

console.log(++a); 를 할 때에는 1을 더한 다음의 값을 보여준다는 차이가 있다.

* 덧셈 외에도 뺄셈도 똑같이 할 수 있다.

let a = 1;
a--;
console.log(a);

* 결과는 0이 나타나게 된다.

---

(2) 대입 연산자

* 대입 연산자는 특정 값에 연산을 한 값을 바로 설정할 때 사용 할 수 있는 연산자이다. 예를 들어서 다음과 같은 코드가 있다면?

let a = 1;
a = a + 3;

* 위 코드를 대입 연산자를 사용한다면 다음과 같이 작성할 수 있다.

let a = 1;
a += 3;

* 덧셈 말고 다른 연산도 가능하다.

let a = 1;
a += 3;
a -= 3;
a *= 3;
a /= 3;
console.log(a);

결과는 1이 나타나게 된다.

---

(3) 논리 연산자

* 논리 연산자는, 불리언 타입 (true or false) 을 위한 연산자이다. 논리 연산자는 다음 장에서 우리가 if 문을 배울 때 매우 유용하다.

* 총 3가지가 있다.

! : NOT
&& : AND
|| : OR

* OR의 경우엔 엔터키 위의 \ 문자를 Shift 키를 누른 상태로 작성하면 된다.

NOT

* NOT 연산자는 true 는 false 로, false 는 true 로 바꿔준다.

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

a의 값은 false 이다.

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

b의 값은 true 가 된다.

AND

* AND 연산자는 양쪽의 값이 둘 다 true 일 때만 결과물이 true 이다.

const a = true && true;
console.log(a); // true

* 다음과 같은 상황엔 모두 false 이다.

let f = false && false; // false
f = false && true; // false
f = true && false; // false

OR

* OR 연산자는 양쪽의 값 중 하나라도 true 라면 결과물이 true 이다. 그리고, 두 값이 둘 다 false 일 때에만 false 이다.

* 다음 상황에 t값은 true 이다.

let t = true || false; // true
t = false || true; // true
t = true || true; // true

* 반면 이러한 상황에서는 false이다.

let f = false || false;

연산 순서

* 사칙연산을 할 때 곱셈 나눗셈이 먼저고, 그 다음이 덧셈 뺄셈인 것처럼, 논리 연산자도 순서가 있다. 순서는 NOT -> AND -> OR 이다. 예를 들어 다음과 같은 코드가 있다고 가정해 보자.

const value = !( (true && false) || (true && false) || !false );

* 괄호로 감싸져 있을 때에는 가장 마지막에 처리를 하기 때문에 맨 앞 NOT은 나중에 처리한다.

* 우선 NOT을 처리한다.

!( (true && false) || (true && false) || true );

* 그 다음엔 AND를 처리한다.

!( false || false || true );

* OR 연산자를 좌측에서 우측 방향으로 처리를 하게 되면서 다음과 같이 처리된다.

!true;

* 결국 결과값은 false 가 된다.

---

(4) 비교 연산자

* 비교 연산자는 두 값을 비교할 때 사용할 수 있다.

두 값이 일치하는 지 확인

const a = 1;
const b = 1;
const equals = a === b;
console.log(equals);

* === 는 두 값이 일치하는 지 확인하면서 동시에 데이터의 형태(String인지 Number 형인지 구분)도 확인해 준다. 

* 두 값이 일치하는지는 == 으로도 비교할 수 있다. 

const a = 1;
const b = 1;
const equals = a == b;
console.log(equals);

* 위 코드는 똑같은 결과 true를 반환하기는 하지만, = 문자가 3개 있을 때와 2개 있을 때의 차이점은 2개 있을 때에는 타입 검사까지는 하지 않는다는 점이다.

* 예를 들어서 == 을 사용하면 숫자 1 과 문자 '1' 이 동일한 값으로 간주된다.

const a = 1;
const b = '1';
const equals = a == b;
console.log(equals);

* 그리고, 0과 false도 같은 값으로 간주된다.

const a = 0;
const b = false;
const equals = a == b;
console.log(equals);

* 그리고 undefined 과 null 도 같은 값으로 간주된다.

const a = null;
const b = undefined;
const equals = a == b;
console.log(equals);

* 앞으로 우리는 두 값이 일치하는지 비교할 때에는 == 대신에 === 을 사용할 것을 권장한다. == 을 사용하다 보면 실수를 할 확률이 높아진다.

두 값이 일치하지 않는지 확인

* 두 값이 일치하지 않는지 확인 할 때에는 !== 을 사용하면 된다.

const value = 'a' !== 'b';

* != 을 사용하게 되면 타입 검사를 하지 않는다.

console.log(1 != '1');
console.log(1 !== '1');

* 따라서, 두 값이 일치하지 않는지 확인할 때에도 !== 을 사용할 것을 권장한다.

크고 작음

* 두 값 중에서 무엇이 더 크고 작은지 비교하기 위해서는 다음 연산자를 사용할 수 있다.

const a = 10;
const b = 15;
const c = 15;

console.log(a < b); // true
console.log(b > a); // true
console.log(b >= c); // true
console.log(a <= c); // true
console.log(b < c); // false;

* 위 코드에서 // false 이런 식으로 코드의 뒷부분에 텍스트가 적혀 있는데, 이를 주석이라 부른다. 코드에 메모를 다는 것이다.

* 여러 줄로 주석을 작성할 때에는 다음과 같이 할 수 있다.

/*
	여러 줄로 주석 작성하기
    참 쉽죠?
*/

---

(5) 문자열 붙이기

* 두 문자열을 붙일 때에는 + 로 할 수 있다.

const a = '안녕';
const b = '하세요';
console.log(a + b); // 안녕하세요