[모던 자바스크립트] 7장 연산자

      "   > - < !!  "  
 사람 : 우와 ! 귀여운 이모티콘이다!
??? : 대소 관계 비교 연산자와 이항 산술연산자 그리고 마지막으로 논리연산자까지 ;   

 

 

자 연산자는 하나 이상의 표현식을 대상으로 여러가지 연산을 수행하여 하나의 값을 만들게 한다

 

이때, 표현식을 우린 "피연산자"라고 하고 피연산자는 값으로 평가되는 표현식이여야한다.. 머 전 챕터에서 배웠듯이 표현식은 "값으로 평가가 되는 것들"을 애기하니 같은 맥락이다.

 

마지막으로 피연산자와 연산자가 조합이된다면 새로운 값이 생성이되고 그 또한 표현식이여야 하겠죠? 안나오면 문제가 있는겁니다!

 

 

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

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

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

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

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

// 타입 연산자 

 

자 이제 연산자의 종류를 한번 알아 봅시다 !

 

 

1. 산술 연산자

 

 모두가 어렸을 때, 철수가 주는 사과를 먹기 위해서 한번쯤은 몇개인지 세어야했던 시절이 있었을 거다.

 

맞다 그거다 덧셈 ,뺼셈 등 새로운 값(표현식)이 나오게 하는 것을 말한다.

 

이제 여기서, 개발자라면 하나 더 알고가자. 산술 연산이 불가능하다? 그럼 , NaN으로 변환한다는 것을.. 

 

 

이 아래 표는 꼭 피연산자가 2개이상을 가지고 있을 때 적용할 수 있는 이항 산술 연산자이다. 

모든 이항 산술 연산자는 파연산자의 값을 변경하는 부수효과가 없다, 바꾸는것이 아니 새로운 값을 창조한다

이항 산술 연산자

 

부수효과가 나왔다는 말은 부수효과가 있는 연산자도 있다는 것이겠죠? 바로 "단항 산술 연산자"이다 

 

단항 산술 연산자는 한 개의 피연산자를 산술 연산하여 숫자 값을 만든다.

 

• 아까 얘기했듯 증가/감소 연산자는 피연산자의 값을 변경하는 부수 효과가 있다는 것이다.
• 즉 증감 연산자는 피연산자의 값을 증감 후 암묵적으로 할당이 이뤄진다.

var x = 1;

// ++ 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x++; // x = x + 1;
console.log(x); // 2

// -- 연산자는 피연산자의 값을 변경하는 암묵적 할당이 이뤄진다.
x--; // x = x - 1;
console.log(x); // 1

증감 연산자는 위치에 따라 다른 의미를 가진다.

• 전위 증감 연산자는 먼저 피연산자의 값을 증감 후, 다른 연산을 수행한다.
• 후위 증감 연산자는 먼저 다른 연산을 실행 후, 피연산자를 증감한다.

var x = 5, result;

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

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

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

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

이와 다르게 +/- 단항 연산자는 부수효과가 없다.

+10; // 10
+(-10) // -10

 

얘네는 피연산자를 숫자타입으로 변환하여 반환하기에 타입을 변경하지 값을 변경하는게 아니라 부수효과가 없다

 

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

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

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

-(-10); // -> 10 이니 얘도 부수효과 x

 

 

1-3 문자열 연결 연산자

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

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

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

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

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

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

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

• 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동변환되기도 한다.
• 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

 

 

2. 할당 연산자

 

할당연산자는 조금 계산방향이 다르다 좌향 -> 우향이 아닌 우향->좌향 의 순서고 

 

정확히는 " 우향에 있는 피연산자의 평가 결과를 좌향에 있는 변수에 할당한다"

그렇기에 변수 값이 변하는 부수효과가 있다!

이전 챕터에서 표현식은 값으로 평가될 수 있는 문이고, 문에는 표현식인 문과 표현식이 아닌 문이 있다했는데,

할당문은 표현식이다. 할당은 변수의 값을 저장하는 것으로 배웠고 아래처럼도 쓰일 수 있다.

var x;

//할당문은 표현식이다.
console.log(x = 10); // 10

 

3. 비교연산자

 

좌항과 우항의 피연산자를 비교하여 그 결과를 불리언 값으로 반환하는것. 

if 나 for 문에 많이 사용된다 

 

동등/일치 비교 연산자 

 

동등비교 연산자는 느슨한 비교

일치 비교 연산자는 엄격한 비교가 포인트이다

• 동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 값은 값인지 비교한다.
  • 따라서 동등 비교 연산자는 좌항과 우항의 피연산자가 타입은 다르더라도 암묵적 타입 변환 후에 같은 값일 수 있다면 true를 반환한다.
  • 동등 비교 연산자는 예측하기 어렵고 실수하기 쉽다.

// 동등 비교
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

• 일치 비교(===) 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.
  • 암묵적 타입 변환을 하지 않고 값을 비교한다.
  • 따라서 일치 비교 연산자는 예측하기 쉽다.

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

// 암묵적 타입 변환을 하지 않고 값을 비교한다.
// 즉, 값과 타입이 모두 같은 경우만 true를 반환한다.
5 === '5'; // -> false

• 일치 비교 연산자에서 주의할 것은 NaN이다.

// NaN은 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // -> false

• NaN은 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 빌트인 함수 Number.isNaN을 사용한다.

// Number.isNaN 함수는 지정한 값이 NaN인지 확인하고 그 결과를 불리언 값으로 반환한다.
Number.isNaN(NaN); // -> true
Number.isNaN(10); // -> false
Number.isNaN(1 + undefined); // -> true

 

또한 숫자 0의 비교에도 주의해야 한다.

0 === -0 // true
0 == -0 // true

숫자 0의 경우 동등/일치 비교 연산자 모두 비교 결과는 true를 반환한다.

 

 

부동등/불일치 비교 연산자는 각각 동등/일치 비교 연산자의 반대 개념이다.

 

 

대소 관계 비교 연산자

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

4. 삼항 조건 연산자

• 조건식의 평가 결과에 따라 반환할 값을 결정
• 자바 스크립트의 유일한 삼항연산자
• 부수효과 x
• 조건식? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

var x = 2;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2? '홀수' : '짝수';

console.log(result) //짝수

 

• if…else 문을 사용해도 삼항 조건 연산자 표현식과 유사하게 처리할 수 있다.

var x = 2, result;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
if (x % 2) result = '홀수';
else       result = '짝수';

console.log(result); // 짝수

• 삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if…else 문은 표현식이 아니고 "문"이다 그렇기에  값처럼 사용할 수 없다.

  var x = 10;
  
  // if..else 문은 표현식이 아닌 문이다. 따라서 값처럼 사용할 수 없다.
  var result = if (x % 2) { result = '홀수'; } else { result = '짝수'; }
  // SyntaxError: Unexpected token if

• 반대로 삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

조건에 따라 어떤 값을 결정할 때는 삼항 조건 연산자 표현식

조건에 따라 수행해야 할 문이 하나가 아니라 여러개라면 if else문이 가독성이 좋다

 

 

5. 논리 연산자

 

 

• 우항과 좌항의 피연산자를 논리 연산

!의 논리 부정 연산자는 불리언값으로 타입을 반환하기에 암묵적으로 타입을 변환한다(불리언 값이 아니면)

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

6. 쉼표 연산자

• 쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.
• 마지막!!! 피연산자 값 반영을 잘 확인!!!!

var x, y, z;

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

7.  그룹 연산자

• 우리가 아는 "괄호부터 계산해야 해"의 그 연산자
• 소괄호(’()’)로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.
• 그룹 연산자는 우선순위가 가장 높다.

10 * 2 + 3; // -> 23

// 그룹 연산자를 사용하여 우선순위를 조절
10 * (2+3); // -> 50

8. typeof 연산자

• typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.
• 'null'은 반환하지 않는다.

• typeof 연산자는 아래 코드와 같이 7개의 문자열 중 하나를 반환한다.

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

typeof 연산자로 null을 연산하면 'null'이 아닌 'object'가 반환된다.

 

이는 자바스크립트의 첫 번째 버전의 버그다. 하지만 기존 코드에 영향을 줄 수 있기 때문에 아직까지 수정되지 못하고 있다.

그러므로 값이 null타입인지 확인할 때는 typeof연산자가 아닌 일치 연산자를 사용해야한다.

var foo = null;

typeof foo === null; // false

foo === null; //  true

선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError가 발생하지 않고 undefined가 반환된다.

typeof undeclared; // undefined

 

9. 지수 연산자

• ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭제곱하여 숫자 값을 반환한다
  
  

2 ** 2; // 4
2 ** 0; // 1
2 ** -2; // 0.25

 

• 지수 연산자가 도입되기 이전에는 Math.pow 메서드를 사용했다.

Math.pow(2, 2); // 2

 

 

• 지수 연산자가 다음과 같은 경우 Math.pow 메소드 보다 가독성이 좋다.

2 ** (3 ** 2); // 512
Math.pow(2, Math.pow(3,2)); // 512

//음수를 거듭제곱의 밑으로 사용해 계산하려면 다음과 같이 괄호로 묶어야 한다.
(-5) ** 2; // 25

// 할당 연산자와 함께 사용할 수 있다.
var num = 5;
num **= 2; //25

//지수 연산자는 이항 연산자 중에서 우선순위가 가장 높다.
2 * 5 ** 2; // 50

10. 그 외의 연산자 

 

여기서 얘기하지 않은 연산자는 다음 챕터에 연결되어 소개될거지만, 맛보기로 보여준다!

11. 연산자의 부수효과

• 대부분의 연산자는 다른 코드에 영향을 주지 않는다.
  ex) 1*2는 다른 코드에 영향을 안주고 새로운 값 2가 나타난다
• 하지만 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있다.
• 할당 연산자(=), 증가/감소 연산자(++/—), delete 연산자가 있다

var x;

// 할당 연산자는 변수 값이 변하는 부수 효과가 있다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다.
x = 1;
console.log(x); // 1

// 증가/감소 연산자(++/--)는 피연산자의 값을 변경하는 부수효과가 있다.
// 피연산자 x의 값이 재할당되어 변경된다. 이는 x 변수를 사용하는 다른 코드에 영향을 준다. 
x++;
console.log(x); // 2

var o = { a: 1};

// delete 연산자는 객체의 프로퍼티를 삭제하는 부수 효과가 있다. 이는 o 객체를 사용하는 다른 코드에 영향을 준다.
delete o.a;
console.log(o); // {}

 

12. 연산자 우선순위

 

말그대로 가장 먼저 실행해야하는것들을 말한다.

13. 연산자 결합순서

 

말그대로 무엇부터 연산을 해야하는지의 순서를 말한다. 

 

예를 들어, 5+2 = 7 은 ->쪽으로 연산을 하고 , x += 5 는 5를 x에 더하여 다시 x에게 주는 방식이기에 <-이다