[ 7장 ] 연산자

7장 연산자

• 연산자란 하나의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 숭행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자 라고 한다.
• 여기서 피연산자는 값으로 평가될수 있는 표현식 이어야 한다.
• 연산자를 공부하기에 앞서, 표현식과 문에 대한 정확한 개념이 필요하다.

< 연산자의 종류 >

//산술 연산자
5*4 // -> 20 

//문자열 연결 연산자
'My name is' + 'Kim' // -> My name is Kim

//할당 연산자
color = 'red' // -> 'red'

//비교 연산자
3>5 // -> false

//논리 연산자
true && false // -> false

//타입 연산자
typeof 'Hi' // -> string

표현식

• 표현식은 리터럴, 식별자, 연산자, 함수 호출 등의 조합을 말한다.
• 표현식은 평가되어 하나의 값을 만든다.

즉 표현식은 하나의 값으로 평가될 수 있는 문 이다.

10 //리터럴 표현식

sum //식별자 표현식

10 + 20 //연산자 표현식

square() //함수, 메소드 표현식

• 표현식은 결국 하나의 값이 되므로, 표현식 = 값 즉 동치(Equivalent) 이다. 표현식은 값처럼 사용할수 있고, 값대신 표현식을 위치 시킬수도 있다는 의미이다.

var x = 10;

x = 30; //식별자 표현식과 숫자 리터럴과 연산자의 조합

문

• 문은 자바스크립트 엔진에게 내리는 명령이다.
• 문이 실행되면 무슨 일인가 일어나게 된다.
  (ex)변수 선언문을 선언하면 -> 변수가 선언되고,
  할당문을 실행하면 -> 할당이 된다.
  조건문을 실행하면 -> 주어진 조건에 따라 코드 블록의 실행이 결정되고,
  반복문을 실행하면 -> 코드 블록이 반복 실행된다.

var x; //변수 선언문

x = 5; //할당문

function foo() {} //함수 선언문

if(x>5) {} //조건문

for(var i = 0; i<10; i++) {} //반복문

• 자바스크립트의 모든 코드는 문 or 표현식 이다
• 자연어에서 문이 마침표로 끝나는 하나의 완번한 문장 (Sentence)라고 한다면, 표현식은 문을 구성하는 요소 이다. -> 표현식 그 자체로도 하나의 문이 될수 있다.

표현식과, 문의 차이

• 표현식은 평가되어 값을 만들지만, 그 이상의 행위는 할 수 없다.
• 문은 변수나 함수를 var, let, const등의 키워드를 통해 만들어 내기도하고, 프로그렘의 흐름을 제어문 if, for, while 등을 통해 제어하기도 한다.
• 표현식은 값을 생성하는 것 이다. 문의 역할은 표현식을 통해 생성된 값을 이용해 컴퓨터에게 명령을 내리는 것 이다.

//선언문
var x = 5 * 10; //표현식 x=5*10을 포함하는 **문** 이다.

//할당문
x = 100; // 이자체가 **표현식** 이지만, 완전한 **문** 이기도 하다. 

//이처럼 선언문은 표현식이 아닌 문 이지만, 할당문은 그 자체가 표현식이자 문 이다.

표현식이 아닌 문은 언제나 undefined를 반환하고, 표현식인 문은 언제나 값을 반환 한다.

7-1. 산술 연산자

• 산술 연산자는 피연산자를 대상으로 수학적 계싼을 수행해 새로운 값을 만든다. 산술 연산이 불가능할 경우 NaN을 반환한다.

7-1-1. 이항 산술 연산자

• 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.
• 이항 산술 연산자의 경우 피연산자의 값을 변경하는 부수 효과가 없다. 언제나 새로운 값을 만들어낼 뿐이다. (+, -, *, /, %)

7-1-2. 단항 산술 연산자

• 1개의 피연산자를 산술하여 숫자 값을 만든다.
• 단항 산술 연산자의 경우 피연산자의 값을 변경하는 부수효과가 있다.

피연산자 앞에 위치한 전위 증가 감소 연산자 (++/--)는 먼저 피연산자의 값을 증가/감소 시킨 후, 다른 연산을 수행한다.
피연산자 뒤에 위치한 후위 증가 감소 연산자 (++/--)는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/ 감소 시킨다.

var x =5, reslut;

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

//선증가 후 할당
result = ++x;
console.log(reslut, x); // 7 7

//선할당 후 감소
result = x--;
console.log(reslut, x); // 7 6

//선감소 후 할당
result = --x;
console.log(reslut, x); // 5 5 

• 나머지 단항 연산자는 부수 효과가 없으며 한번쯤 참고했으면 좋은 부분들 이다.

//부호 반전
-(-10); // -> 10

//문자열을 숫자로 타입 변환
-'10'; // -> -10

//불리언 값을 숫자로 타입 변환
-true; // -> -1

//문자열은 숫자로 타입 변환할 수 없으므로 NaN을 반환 한다.
-'Hello'; // Nan

7-1-3. 문자열 연결 연산자

• • 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

// 문자열 연결 연산자
'1' + 2; // -> '12'
1 + '2'; // -> '12'

// 산술 연산자 
1 + 2; // -> 3

//불리언타입을 숫자로 변경후 연산하는 것을 암묵적 타입 변환 또는 타입 강제 변환 이라고 한다. 
// true는 1로 타입변환 된다
1 + true; // -> 2

// false는 0으로 타입변환 된다.
1 + false; // -> 2

// null은 0으로 타입 변환 된다.
1 + null; // -> 1

//undefined는 숫자로 타입 변환 되지 않는다.
+undefined; // -> NaN
1 + undefined; // -> NaN

7-2. 할당 연산자

• 할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
• 할당 연산자는 좌하의 변수에 값을 할당하므로, 변수 값이 변하는 부수효과가 있다.

var x;

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

x += 10; //x = x + 5;
console.log(X); // 15

x = 10; //x = x - 5;
console.log(X); // 10

x = 10; //x = x * 5;
console.log(X); // 50

x = 10; //x = x / 5 ;
console.log(X); // 10

x = 10; //x = x % 5;
console.log(X); // 0

var str = 'My name is' ;

//문자열 연결 연산자
str += 'Lee'; //str = str +'Lee';
console.log(str); // 'My name is Lee'

7-3. 비교 연산자

• 비교 연산자는 좌항과 우항을 비교하여 그 결과를 불리언 값으로 반환한다. (주로if, for문과 같은 제어문에서 자주 사용된다)

7-3-1. 동등/일치 비교 연산자

< 비교 연산자 >

비교 연산자	의미	사례	설명
==	동등 비교	x == y	x와 y의 값이 같음
===	일치 비교	x === y	x와 y의 값과 타입이 같음
!=	부동등 비교	x != y	x와 y의 값이 다름
!==	불일치 비교	x !== y	x와 y과 타입이 다름

• 동등 비교의 경우 암묵적 타입 변환을 통해 타입을 일치 시킨후 비교한다. 따라서, 정확한 결과를 예측하기 어렵다는 단점을 가지고 있다. 따라서 대부분 일치 비교(===) 연산자를 많이 사용한다.

//동등 비교
5 == 5; // -> true

//타입은 다르지만 암묵적 타입 변환을 통해 타입을 일치시켜 동등한 값이 반환된다.
5 == '5'; // -> true

//암묵적 타입 변환으로 결과를 예측하기 어렵다.
'0' == '' ; // -> false
0 == ''; // -> true
0 == '0'; // -> true

false == 'false' // -> false
false == '0' // -> true
false == null; // -> false
false == undefined; // ->false

//일치 비교
5 === 5; // -> true

//암묵적 타입 변환 없이 값을 비교, 즉 값과 타입이 모두 일치해야 함.
5 === '5'; // -> false

• 일치 비교 연산자에서는 NaN을 주의해야 한다.

NaN === NaN; // -> false

//해결방법
Number.isNaN(NaN); // -> true
Number.isNaN(10); // -> false
Number.isNaN(1 + undefined); // -> true

//숫자 0의 경우에도 조심해야 한다
-0 === +0; // -> true
Object.is(-0,+0); // -> false

• 부동등 비교의 경우 간단히 동등비교의 반대 개념이다.

5 != 8; // -> true;
5 != 5; // -> false;

5 !== 8; // -> true;
5 !== '5'; // -> true;

7-3-2. 대소 관계 비교 연산자

• 대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.

5 > 0; // -> true
5 > 5; // -> false
5 >= 5; // -> true
5 <= 5; // -> true

7-4. 삼항 조건 연산자

• 삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다. 자바 스크립트의 유일한 삼항 연산자 이며, 부수효과는 없다.

조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

//삼항 조건 연산자 

var x = 2;

var result = x % 2 ? '홀수' : '짝수' ;
console.log(result); //짝수

//위의 삼항 조건 연산자를 if문으로 풀어서 작성하면 아래와 같다.
if(x%2) result = '홀수';
else result = '짝수';

console.log(result); //짝수

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식이지만, if else문의 경우 표현식이 아닌 문 이다.

7-5. 논리 연산자

논리 연산자	의미
||	논리합(OR)
&&	논리곱(AND)
!	부정(NOT)

• 만약 피연산자가 불리언 값이 아니라면 불리언 타입으로 암묵적 타입 변환이 된다.

!0; // -> true
!'Hello'; // -> false

7-6. 쉼표 연산자

• 쉼표 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평과 결과를 반환한다.

var x, y, z;

x = 1, y = 2, z = 3; //3

7-7. 그룹 연산자

• 그룹 연산자를 통해 연산자의 우선순위를 조절 할 수 있다.

10 * 2 + 3; // -> 23
10 * (2 + 3); // -> 50

7-8. typeof 연산자

• typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환 한다.
• string, number, boolean, undefined, symbol, object, function 중 하나를 반환 하며, null의 경우 반환하는 경우는 없으며 함수의 경우 function을 반환 한다.

typeof '' // string
typeof 1 // number
typeof NaN // number
typeof true // boolean
typeof undefined // undefined
typeof Symbol() // symbol
typeof [] // object
typeof {} // object
typeof new Date() // object
typeof /test/gi // object
typeof function () {} // function
typeof null // object

• 여기서 자바스크립트의 첫번째 버그가 나타난다. null값을 연산하게 되면 null이 아닌 object를 반환 하게 된다. 따라서 null 타입인 확인을 위해서는 일치 연산자를 사용해야 한다.
• 또한 식별하지 않은 식별자를 연산하면 undefined가 반환 된다.

var foo = null;

typeof foo === null; // false
foo === null; // true

//선언한 적 없는 식별자
typeof undeclared; //undefined

7-9. 지수 연산자

• ES7 이전에는 Math.pow 메서드를 통해 연산 하였으나, 이후에는 좌항의 피연산자를 밑 으로하고, 우항의 피연산자를 지수로 거듭 제곱하여 숫자를 반환할 수 있다.

2 ** 2 // 4
2 ** 2.5 // 5.65685424949238
2 ** 0 // 1
2 ** -2 // 0.25

7-10. 그 외의 연산자

• 이외에도 ?. , ??, delete등 다양한 연산자가 추가로 존재한다.

7-11. 연산자의 부수 효과

• 대부분의 연산자는 다른코드에 영향을 주지 않지만, 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자의 경우 영향을 준다.

7-12. 연산자 우선순위

• 연산자는 우선순위가 높을수록 먼저 실행되지만, 보통의 경우 그룹 연산자를 통해 우선순위를 명시적으로 조절 한다.

7-13. 연산자 결합 순서

• 연산자 결합 순서란 연산자의 어느 쪽부터 평가를 수행할 것인지를 나타내는 순서를 말한다.