JavaScript 연산자

1. 리터럴(Literal)

 

코드에서 값을 나타내는 표기법

ex) 123, '123', true, [], {} 등

 

`템플릿 리터럴(Template Literal)`

 

2. 문(Statement)

최소 실행 단위를 뜻한다.

ex) 실행문, 반복문, 선언문, 조건문 등

 

3. 표현식(Expressions)

값으로 평가 될 수 있는 문

1; // 숫자 리터럴 표현식
1+1 ; // 연산자 표현식
call(); // 함수 호출 표현식
let b; // 선언문(값이 없이 선언만 되었기 때문에 그냥 문) 표현식 x
b = 2; // 할당문, 할당 표현식의 문

 

4. 산술 연산자(Arithmetic Operators)

+ // 더하기
- // 빼기
* // 곱하기
/ // 나누기
% // 나머지 값
** // 지수(거듭제곱)

 

연산자 주의점 !

let text = '두개의' + '문자를';
console.log(text); // 두개의문자를
text = '1' + 1; // 숫자와 문자열을 더하면 문자열로 변환됨
console.log(text); // 11

 

위 코드처럼 숫자와 문자열을 더하게 되면 숫자로 인식하지만 1 + 1 = 2 출력이 아니라 11 라는 값으로 출력을 하게 된다.

 

5. 단항 연산자(Unary Operators)

+ (양)
- (음)
! (부정)

 

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

 

let boolean = true;
console.log(boolean); // true
console.log(!boolean); // false
console.log(!!boolean); // true

 

숫자가 아닌 타입들을 숫자로 변환하면 어떤 값이 나오는지 확인 할 수 있다.

console.log(+false); // 0
console.log(+null); // 0
console.log(+''); // 0
console.log(+true); // 1
console.log(+'text'); // NaN
console.log(+undefined); // NaN

 

console.log(!!1); // ! 부정연산자
// !! 값을 boolean 타입으로 변환함

 

! 를 쓰게 된다면 부정하는 연산자가 된다. 예를 들면

console.log(!true); 를 하게된다면 값은 false로 출력이 된다.

!! 를 쓰게 된다면 값을 boolean 타입으로 변환하게 된다. 그 이유는 !를 쓰게 된다면 부정에서 
부정에서 부정을 하여 긍정으로 바뀌면서 true / false를 강제 변환하게 된다.

 

6. 할당 연산자(Assignment Operators)

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

 

이를 축약할 수 있다.

a += 2; // a = a + 2; 축약버전
console.log(a); // 2

a -= 2; // a = a - 2;
console.log(a); // 0

a *= 2; // a = a * 2;
console.log(a); // 4

a /= 2; // a = a / 2;
a %= 2; // a = a % 2;
a **= 2; // a = a ** 2;

 

 

7.  증가 & 감소 연산자 (Increment & Decrement Operators)

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

 

여기서 

a++ 의 경우는 필요한 연산을 먼저하고, 그 뒤에 값을 증가 시킨다

++a의 경우는 값을 먼저 증가 시킨 후 필요한 연산을 하게 된다.

 

7-1.  후위 증가(post-increment)

출력을 먼저 한 후 연산을 한다.

예를 들면 

a = 0;
let b = a++;
console.log(b);
console.log(a);

 

라는 코드가 있다. 여기서 처음 b = a 라는 값을 먼저 출력하게 된다. 그리고 내부적으로 +1을 하여 두번째 줄

console.log(b)에서는 b = a라는 값 출력 결국 a = 0이라는 값을 출력하게 된다. 그리고 출력 후 +1을 하게 된다.

 

let a = 2;
let b = 3;
result = a++ + (b * 4);
console.log(result); // 14

 

위와 같은 코드는 b * 4 + 2의 순서로 진행이 된다. result에 저장 후 출력이 되는데, 그 출력 이후 바로 연산이 되어 이후 코드를 작성하게 되면 15라는 값을 출력하게 된다. b * 4 를 연산 그리고 a 와의 덧셈 연산 후 result로 저장 후 바로 값에 +1를 연산 마지막으로 15로 출력이다.

3 * 4 + 2 -> result 저장 -> +1(출력)

7-2.  전위 증가(post-increment)

후위 증가와 반대로 전위 증가는 연산을 먼저 한 후 출력을 하게된다. 여기서 출력과 연산이 동시에 되는 것 같지만,

연산을 먼저 한 후 출력을 하게 된다.

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

 

위와 같은 코드가 있다. 처음 let b = ++a; 에서 후위 증가의 경우는 출력부터 하였지만, 전위 증가는 연산부터 하여 b = a + 1 이라는 값을 연산 후 바로 출력을 하게 된다. 그래서 3번째 줄인 console.log(b)에서 0 + 1 = 1인 값을 바로 출력하게 된다.

그 이후 만약 한번 더 ++a를 하게 된다면 1 + 1인 값을 바로 출력한다.

let a = 2;
let b = 3;
result = ++a + (b * 4);
console.log(result); // 15

 

위와 같은 내용으로 여기서 순위가 있는데, 전위 증가 연산, 곱셈연산, 덧셈 연산이 있다. 하지만 전위 증감 연산자가 우선순위에 있기 때문에 () 유무 상관 없이 ++a 를 먼저 연산하게 된다. 2 + 1 + 12 의 순서로 하게 된다.

의 순서로 진행하게 된다.

8. 대소 관계 비교 연산자(Relational Operators)

> // 크다
< // 작다
>= // 크거나 같다
<= // 작거나 같다

 

console.log(2 > 3); // false
console.log(2 < 3); // true
console.log(3 < 2); // false
console.log(3 > 2); // true
console.log(3 <= 2); // false
console.log(3 >= 2); // true
console.log(2 >= 3); // false
console.log(3 >= 2); // true

 

여기서 '2'인 문자열을 비교하면 어떻게 될까?

console.log(3 > '2'); // true

 

값은 true라고 나오게 된다. 숫자와 문자열을 연산시, 문자열의 내용이 숫자라면, 암묵적으로 타입이 변환이 이뤄진다. 그래서 숫자로 인식하여 비교를 하게 된다.

이를 타입 강제 변환(type coercion)이라고 한다. 위 처럼 문자열이지만 문자열 2가 숫자 2로 변환되어 비교 연산을 하게 된다.

추후에 동등 비교 연산자를 하겠지만 추가 설명을 하겠다.

이러한 타입 강제 변환은 때때로 이상한 결과값을 출력을 할 때가 있다. 특히 == 연산자를 사용할때인데, 예를 들면 0 == '0' 은 true를 반환하게 된다. 그래서 값과 타입을 엄격하게 비교하기 위해 비교 연산자 '===' 와 '!==' 를 사용하는 것이 좋다. 3 === '3' 의 경우 값은 같지만 서로 타입이 다르기에 false를 반환하게 된다.

 

console.log(3 >= 3); // true

 

이러한 경우라면 true를 반환하게 되는데, 그 이유는 크거나 같다에서 둘 중 하나만 true가 되더라도 true로 출력하게 된다.

하지만 false의 경우는 둘 다 false인 경우에 false를 출력하게 된다.

 

9. 동등 비교 관계 연산자(Equality Operators)

 

== // 값이 같음
!= // 값이 다름
=== // 값과 타입이 둘다 같음
!== // 값과 타입이 다름

 

console.log(2 == 2); // true
console.log(2 != 2); // false
console.log(2 != 3); // true
console.log(2 == 3); // false
console.log(2 == '2'); // true
console.log(2 === '2'); // false - 값과 타입이 같지 않으므로 false나옴
console.log(true == 1); // true
console.log(true === 1); // false
console.log(false == 0); // true
console.log(false === 0); // false

 

const obj1 = {
  name: 'js',
}

const obj2 = {
  name: 'js',
}

console.log(obj1 == obj2); 
console.log(obj1 === obj2); 
console.log(obj1.name == obj2.name); 
console.log(obj1.name === obj2.name);

 

위와 같은 코드가 있다고 가정하자.

첫번 째 콘솔에서는 console.log(obj == obj2)의 값은 false를 반한하게 된다. 그 이유는 const로 선언하게 된다면 메모리 주소에 저장이 된다. 하지만 const로 선언을 하면 각기 다른 메모리 주소로 저장 되기 때문에 서로 다른 메모리 주소라서 false 라는 값을 반환하게 된다. 

 

두번째 콘솔 console.log(obj1 === obj2); 또한 false를 반환한다. 그 이유는 '===' 연산자의 경우는 값과 타입을 비교하는데, 위에 말한 것처럼 서로 다른 메모리 주소를 가지기 때문에 값(메모리주소)가 달라서 false를 반환하게 된다.

 

세번째 콘솔 console.log(obj2.name == obj2.name); 의 경우는 true를 반환한다. 그 이유는 == 비교 연산자는 값을 비교하기 때문에, 서로 다른 메모리 주소라 할지라도 서로 가지고 있는 객체안에 있는 프로퍼티의 값이 같기 때문에 true를 반환한다.

 

네번째 콘솔 console.log(obj2.name === obj2.name); 의 경우는 true를 반환한다. 이유는 === 연산자는 값과 타입을 비교하는데, 프로퍼티 name의 값과 타입이 동일시 하기때문에 true를 반환하게 된다.

 

여기서

let obj3 = obj2;

console.log(obj3 == obj2); // 
console.log(obj3 === obj2); //

 

를 하게 된다면, 위 console.log(obj3 == obj2); 와 console.log(obj3 === obj2); // 는 어떻게 출력이 될까?

console.log(obj3 == obj2); 의 경우는 true를 반환하게 된다. 그 이유는

obj2를 변수 obj3에 할당을 하기 때문이다. const 의 경우는 서로 다른 메모리주소를 가지기 때문에 false의 값을 출력하겠지만, let의 경우는 서로 같은 메모리 주소와 객체를 공유하기 때문에 true의 값을 출력하게 된다. 

 

오늘은 연산자에 대해서 배우게 되었다. 예전에 배운 내용이지만, 조금 의문이 가게 된다면 바로 검색해서 의문점을 푸는 편이다. 예를 들면 후위 증가, 전위 증가 연산자의 연산 순서에 대해서 새롭게 배운거 같다. 또한 3 >= '2' 의 경우 서로 다른 타입이지만 강제로 타입을 변경하여 값을 비교하는 것도 알게 되었다. 그리고 동등 비교 연산자를 할 때 const와 let의 차이점, const로 선언을 했을 경우 obj1 와 obj2가 서로 객체와 그 안에 프로퍼티가 같더라도 메모리 주소가 다르기 때문에 비교를 했을 때 false가 되는 것과 const를 선언한 후 let로 변수에 할당하게 되면, 메모리 주소를 복사하게 되어 true가 된다.