JS 근본 공부 - 연산자

1. 사칙연산

- 다른 프로그래밍 언어의 사칙연산과 동일하게 +(덧셈), -(뺄셈), /(나누기), %(나머지), *(곱셈)가 존재한다. 

- 제곱 연산자는 ** 이다.  

- 문자열 합병의 경우 +를 사용한다.

---

2. Increment & decrement operator (증감연산)

 

a) pre-increment/decrement

- 변수명 앞에 ++ 또는 -- 기호를 붙여주면 +1 또는 -1이 된 값이 적용된다. 

let counter = 2;
const preIncrement = ++counter;
// 위의 코드는 preIncrement = counter + 1; 과 동일하다.
// 이 경우, preIncrement는 3이 되고 counter도 3이 된다. 

let counter = 2;
const preDecrement = --counter;
// 위의 코드는 preIncrement = counter -1; 과 동일하다.
// 이 경우, preIncrement는 1이 되고 counter도 1이 된다. 

 

b) post-increment/decrement

- 변수명 뒤에  ++ 또는 -- 기호를 붙여주면 연산 이후에 해당 변수의 값이 +1 또는 -1 된 값이 적용된다.

let counter = 2;
const postIncrement = counter++;
// 위의 코드는 postIncrement = counter; 을 먼저 수행 한 후에
// counter = counter + 1; 을 수행하는 것과 동일하다. 
// 이 경우, postIncrement는 2가 되고 counter는 3이 된다. 

let counter = 2;
const postDecrement = counter--;
// 위의 코드는 postDecrement = counter; 을 먼저 수행 한 후에
// counter = counter - 1; 을 수행하는 것과 동일하다. 
// 이 경우, postDecrement는 2가 되고 counter는 1이 된다.

---

3. assignment operators (할당 연산자)

- 할당 연산자는 반복해서 적는 부분을 생략한 것이다. 

let x = 3;
let y = 6;

x += y; // x = x + y;와 동일하다. 
x -= y; // x = x - y;와 동일하다. 
// 나눗셈과 곱셈도 동일한 메카니즘으로 동작한다.

---

4. comparison operators (비교연산자)

- 수학에서 사용하는 부등호와 동일하다. <, >, <=, >=

---

5. logical operators (논리 연산자)

• || (or)
• && (and)
• ! (not) 

이와 같이 표현한다. 

 

[꿀 Tip] 

or 연산자 같은 경우, 조건이 여러개인 경우에 앞부분에서 하나씩 조건을 체크하면서 true인 조건을 만나면 바로 논리연산을 종료한다. 그러므로 or를 사용하여 조건을 나열할 때는 가벼운 조건을 앞에 무거운 조건을 뒤에 사용하는 것을 권장한다. 

 

---

6. Equality (동등 연산자)

 

a) loose equality with type conversion(== 또는 !=)

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

// loose equality를 사용하는 경우 
console.log(stringFive == numberFive); // true
console.log(stringFive != numberFive); // false

- loose equality의 경우, 데이터 타입이 다르더라도 내용 자체가 같다면 동일하다고 판단한다. 

- 위의 코드처럼, 문자열 5와 숫자 5는 다른 데이터 타입을 가지고 있지만, 형변환을 통해 내용 자체를 비교하기 때문에 동일하다고 판단한다.

 

 

b) strict equality without type conversion(=== 또는 !==)

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

// strict equality를 사용하는 경우 
console.log(stringFive == numberFive); // false
console.log(stringFive != numberFive); // true

- strict equality의 경우, 데이터 타입이 다르면 내용이 같더라도 다르다고 판단한다. 

- 위의 코드처럼, 문자열 5와 숫자 5는 다른 데이터 타입을 갖고 있기때문에 내용이 같더라도 다르다고 판단한다. 

- 그러므로 strict equality를 주로 사용하는 것을 권장한다. 

 

 

c) 왜 strict equality를 권장 하는가? 

- strict equality를 권장하는 이유는 object를 비교할 때 극명한 차이를 보여주기 때문이다. 아래의 코드를 참고하자.

const objectOne = { name: 'objectOne' };
const objectTwo = { name: 'objectTwo' };
const objectThree = objectOne;

// objectOne과 objectTwo는 내용은 일하지만 다른 object(객체)로써, 서로 다른 reference를 갖고있다.
// 반면에, objectThree는 objectOne을 그대로 할당했기 때문에 objectOne의 reference를 갖고있다. 
// 이를 이용해서 동등연산자를 사용해보자. 

console.log(objectOne == objectTwo); // false 반환 - 서로 다른 reference를 갖고 있기 때문
console.log(objectOne === objectTwo); // false 반환 - 서로 다른 reference를 갖고 있기 때문
console.log(objectOne === objectThree); // true 반환 - 동일한 reference를 갖고 있기 때문

 

 

 

[연습하기]

- 아래의 동등 연산자의 비교값이 어떤 결과를 출력할지 생각해보자. 코드를 보고 먼저 생각한 뒤에 아래의 해설을 참고하자.

console.log(0 == false);

console.log(0 === false);

console.log(' ' == false);

console.log(' ' === false);

console.log(null == undefined);

console.log(null === undefined);

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

[해설]

• console.log(0 == false);  → true
  - 0과 false는 내용적으로 동일하다. 
• console.log(0 === false); → false 
  - 0은 number타입, false는 boolean타입이므로 다르다. 
• console.log(' ' == false);  → true 
  - empty문자열은 false와 내용적으로 동일하다. 
• console.log(' ' === false);  → false 
  - empty문자열은 string타입, false는 boolean타입이므로 다르다.
• console.log(null == undefined); → true 
  - null과 undefined는 내용적으로 동일하다. 
• console.log(null === undefined); → false
  - null과 undefined는 다른 타입이므로 다르다. 
  

 

 

 

[정보출처]

www.youtube.com/watch?v=YBjufjBaxHo&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=4