[DEEP DIVE] 7. 연산자

표현식을 통해서 값을 생성하고 사용 되려면 우선 표현식 안에서 연산이 되야 한다.

 

Js의 연산자에 대해서 알아보자~!

 

연산자

하나 이상의 표현식을 대상으로 산술 할당 비교 논리 타입 지수 연산을 수행하고 하나의 값을 생성한다
연산자 표현식도 표현식이다

1. 산술 연산자

수학적 계산을 수행하고 새로운 숫자 값을 만든다
산술 연산이 불가능한 경우에는 NaN 반환
피연산자의 수에 따라 이항과 단항으로 나뉨

1️⃣ 이항 산술

피연산자의 값을 변경하는 부수효과 X

var num = 5 + 2;
console.log(num) // 7

num 변수는 이제 7이라는 값이 저장된 메모리 주소를 기억하고 있지만 피연산자인 5와 2의 값은 그대로

2️⃣ 단항 산술

증가(++) 감소(--) 연산자는 피연산자의 값을 변경

var num = 10
num ++;
console.log(num) // 11
num --;
console.log(num) // 10

 

증감 연산자는 위치에 따라 기능이 다르다

var num = 10, result;

result = num++; // 선할당 후증가
console.log(result, num); //5 6

result = ++num;
console.log(result, num); //7 7

result = num--;
console.log(result, num); //7 6

result = --num;
console.log(result, num); //5 5

++가 변수 뒤에 있으면 먼저 현재 변수값을 주고 그 변수는 += 1 이 되고

앞에 있으면 +=1 한 변수값을 할당하고 변수도 += 1 이 된다.

-- 경우도 마찬가지~

 

📌자동 형변환

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자가 숫자 타입으로 변경됨

이항 연산자와 헷갈리면 안됨!

var x = "10" + "20";
console.log(x); //1020

피연산자가 2개인 이항 연산자를 사용하여 문자열 2개를 더하면 문자열 연결 연산자가 되므로 주의하자!

var x = '1'
console.log(+x); //1
console.log(typeof(+x)); // number

x = false 
console.log(+false) //0

x = 'Hello'
// 문자열은 숫자로 변경할 수 없다
console.log(+x) // NaN

📌부호변경 연산자

-(-10); // 10
-("10"); // -10
-true; // -1
-"Hi"; // NaN

📌문자열 연결 연산자

피연산자중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작

// 피연산자중 문자열이 있는 경우
'10' + 2 // 102
console.log("Hi" + 0) //Hi0
console.log("Hi" + false) //Hifalse

// 피연산자중 문자열이 없는 경우
// true -> 1 false -> 0 null -> 0
1 + true // 2
1 + false // 1
1 + null // 1

// undefined
1 + undefined // NaN

2. 할당 연산자

할당 연산자 '=' 이용
우항에 있는 피연산자의 평가 결과를 좌변의 변수에 할당
변수 값이 변경되는 부수효과가 있음!

📌 문자열 연결 연산자

var str = "Hello"
str += "World";
console.log(str); // "HelloWorld"

3. 비교 연산자

좌, 우의 피연산자를 비교한 다음의 결과를 불리언 값으로 변환한다
if for 같은 제어문에서 자주 사용

1️⃣ 동등/일치 비교 연산자

📌 타입 일치 비교 연산자

기호	의미
===	값, 타입 모두 일치
!==	타입이 불일치

동등연산자는 혼동을 줄 수 있는 결과를 야기함

console.log(false == 'false') // false
console.log(false == '0') // true

엥..? 할만하다. 

동등비교 연산자 == 는 값이 같으면 true를 반환 한다는데

false  'false' 의 값이 같은거 같은데 왜 false?

false  '0' 은 또 왜 true?

이 경우는 Js 의 안티패턴이라고 한다 일치 비교 연산자 === 를 사용하자

NaN === NaN // false

일치비교 연산자의 예외인 NaN은 자기 자신과 일치하지 않는 유일한 값이라고 한다.. 알아두자

 

2️⃣ 대소 관계 비교 연산자

<  <= > >=

4. 삼항 조건 연산자

var x = 24
var res = (x > 20) ? "성인" : "Not 성인"
console.log(res) // 성인

첫 번째 피연산자가 참을 반환하면 2번째 피연산자를 반환, 그렇지 않으면 3번째 피연산자를 반환
? 앞의 첫 번째 피연산자는 true of false 로 평가될 표현식 
boolean 값으로 평가 되므로 표현식이다

var x = 7
var res = x % 2 ? "홀수" : "짝수"
console.log(res) // 홀수

x % 2 의 결과는 0 or 1 

true or false 값이 아닌 숫자 값이지만 삼항 연산자 내에서 암묵적으로 불리언 값으로 형변환 된다.

if, else 문은 표현식이 아닌 문이기 때문에 값처럼 사용할 수 없다.

삼항 연산자는 가능!

5. 논리 연산자

우항 좌항의 피연산자를 논리 연산함
|| or
&& and
! not

📌 논리 부정 연산자는 항상 불리언 값 반환

 

+ 단항 연산자가 숫자타입이 아닌 피연산자를 숫자 타입으로 자동 형변환 해주는것 처럼,

!논리 부정 연산자도 불리언 타입이 아닌 피연산자를 불리언 타입으로 자동 형변환 해준다

console.log(!0); // false
console.log(!"Hi"); // true

6. 쉼표 연산자

피연산자를 ","  기준 차례대로 평가

7. 그룹 연산자

() 이용하여 연산의 우선순위 지정 

8. typeof 연산자

number, boolean, undefined, symbol, object, function 중 하나를 반환

typeof NaN // number
typeof null // object
typeof [] // object
typeof {} // object
typeof new Date // object
typeof function(){} // function

여기서 null은 object 타입임을 알 수 있다.  Js의 버그..

null 타입인지 확인하기 위해서는 일치 연산자를 사용해야함!

var x = null
typeof x === null // false
x === null // true

9. 지수 연산자

math.pow()
** 사용

📌 음수를 거듭제곱으로 사용하기 위해서는 ()로 묶어줘야함

console.log(-5 ** 2) // SyntaxError
console.log((-5) ** 2) // 25

10. 연산자의 부수 효과

📌 피연산자에 영향을 주는 연산자를 다시 한번 짚고 넘어갑시다

var x;
x = 1;

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

var user = {
	name : "woong"
}

delete user.name
console.log(user) // {}

증감 연산자와 객체의 프로퍼티 키 값을 삭제하면 피연산자에 부수효과를 발생 시킨다.

 

11. 연산자 우선순위, 결합순서

음...책에 있는 우선순위에 대해서 모두 외울 필요는 없을듯