Javascript 연산자(Operator)

Nov 16, 2020 » javascript

자바스크립트 연산자(Operator)

연산자의 사전적 의미?
규칙에 따라 계산하여 값을 구함

연산자 형태

+, -, *, /, %
>, >=, <, <=
==, !=, ===, !==
콤마(,), typeof, delete, void
instanceof, in, new 등

자바스크립트 표현식(Expression)

표현식 형태

1 + 2
var total = 1 + 2; 1 + 2 는 표현식을 평가한다고 한다.
1 + 2 = 3 에서 3은 평가 결과 라고 한다.

자바스크립트는 표현식의 연결이다.

할당 연산자

단일 할당 연산자
- = 하나만 사용한다.
- var result = 1 + 2;
  왼쪽에서 오른쪽으로 계산한다. result 의 값은 3이 된다.
복합 할당 연산자
- = 앞에 연산자를 작성한다.
- +=, -=, *=, /=, %=
  <<=, >>=
  >>>=, &=, ^=, |=
- 복합 할당 연산자는 = 앞을 먼저 연산한 후, 변수에 할당한다.
```
 var point = 7;

 point += 3;
 // 7 + 3 = 10
 // 10을 포인트에 할당한다. 고로 point의 최종 값은 10이다.
```

산술 연산자

+ 연산자

평가 결과를 더한다.

var value = 1 + 2 + 4;
log(value);
 // 1 + 2 + 4
 //결과 값 : 7

평가 결과를 연결한다. 한 쪽이라도 숫자(number)가 아니면 연결한다.

var two = "2";
var value = 1 + two;
log(value);
log(typeof value);

// 12 (숫자 1과 문자 2가 연결되어 12)
// String

var value = 1 + 5 + "ABC";
log(value)

// 결과 값 : 6ABC

숫자로 변환

자바스크립트는 연산하기 전에 우선 숫자로 변환하려고 시도한다.

값 타입	변환 값
Undifined	NaN
Null	+0
Boolean	true : 1, false: 0
Number	변환 전 / 후 같음
String	값이 숫자이면 숫자로 연산 단, 더하기(+)는 연결

예제 1

var value;
log(10 + value);

//결과 값 : NaN

위의 코드를 보면 변수 value의 값은 undifined 이나 자바스크립트는 값을 숫자로 변환하는 것을 시도하기 때문에 NaN 으로 나온다.

예제2

log(10+Null);
//결과 값 : 10
log(10 + true);
//결과 값 : 11
log(10 + false);
//결과 값 : 10

Null은 0으로 변환
true는 1로 변환, false는 0으로 변환이다.

예제3

log(10 + "123");
//결과 값 : 10123
log(123 - "23");
//결과 값 : 100

더하기(+)는 값이 숫자라도 타입이 String이면 문자열로 연결한다.
그러나 -, *, /는 숫자로 변환하여 연산한다.

-(빼기) 연산자

String 타입이지만 값이 숫자이면 Number 타입으로 변환하여 계산한다.

log("125 - 2");
//결과 값 : 123

이처럼 "125" 는 String 타입이지만 값이 숫자이므로 Number 타입으로 변환하여 계산된다.

*(곱하기) 연산자

빼기 연산자와 마찬가지로 숫자 값으로 변환할 수 있으면 변환한다.

양쪽의 평가가 하나라도 숫자가 아닐때 NaN을 반환한다.

  log(10 * "20"); //결과 값 : 200
  log(10 * true); //결과 값 : 10
  log(10 * false); //결과 값 : 0
  log(10 * null); //결과 값 : 0
  log(10 * "A"); //결과 값 : NaN

소수 값이 생기는 경우 처리
```
  log(2.3 * 3);
  //결과 값 : 6.8999999999999995
```
2.3 * 3의 값은 6.9로 출력되지 않는다.
이는 정상이며 IEEE 754 유동 소수점 처리 때문이다.

이를 해결하기 위해선 실수를 정수로 변환하여 값을 구한 뒤
다시 정수를 실수로 변환하는 방법이다.
```
  log(2.3 * 10 * 3 / 10);
  // 2.3 * 10 = 23
  // 23 * 3 = 69
  // 69 / 10 = 6.9
  // 결과 값 : 6.9
```

/ (나누기) 연산자

NaN 반환

양쪽의 평가결과가 하나라도 숫자가 아닐 때

분모, 분자 모두 0일 때
분모가 0일 때 : Infinity 반환
분자가 0일 때 : 0 반환

log(10 / 2); //결과 값 : 5
log(10 / "2"); //결과 값 : 5
log(10 / "A"); //결과 값 : NaN
log(10 / 0); //결과 값 : Infinity
log(0 / 10); //결과 값 : 0

% (나머지) 연산자

왼쪽 표현식 평가 결과를 오른쪽 표현식 평가 결과로 나누어 나머지를 구한다.
```
log(5 % 2.5); //결과 값 : 0
log(5 % 2.3); //결과 값 : 0.40000000000000036
```
소수 끝 36을 없애려면 실수를 정수로 변환하여 연산 후 다시 정수를 실수로 변환해야 한다.
```
log((5 * 10 - (2 * 2.3 * 10)) / 10); //결과 값 : 0.4
```

단항 연산자

1. 단항 + 연산자

형태 : +value (+변수)
값을 Number 타임으로 변환시킨다.

var value = "7";
log(typeof value); //결과 값 : String
log(typeof +value); //결과 값 : Number

이와 같이 타입을 Number 타입으로 변경시켜준다.
좀더 가독성이 좋은 Number()도 같은 기능을 가진다.

log(typeof Number(value)); // 결과 값 : Number

2. 단항 - 연산자

형태 : -value
값의 부호를 바꾼다.
+ 👉 -
- 👉 +
값의 부호는 연산할 때만 변경된다. (원래 값은 변경 ❌)

var value = 7;
log(-value); // 결과 값 : -7
log(8 + -7); // 결과 값 : 1
log(value); // 결과 값 : 7

후치 ++연산자

형태 : value++
값을 자동으로 +1 증가시킨다.
세미콜론(;) 다음에 증가 시킨다.
```
var one = 1;
var value = one++ + 3;
log(value); // 결과 값 : 4
log(one); // 결과 값 : 2
```
++연산자는 세미콜론 다음에 증가를 시키기 때문에 value는 4가 된다.
one++은 문장을 수행하기 전이기 때문에 값이 증가되지 않고 여전히 1이기 때문이다.

전치 ++연산자

형태 : ++value
값을 자동으로 +1 증가시킨다.
문장 안에서 1을 증가 시킨다.
```
  var one = 1;
  var value = ++one +3;
  log(value); //결과 값 : 5
```
++연산자는 표현식 평가 전에 1이 증가된다.
세미콜론 전에 증가를 시키기 때문에 표현식에서 증가된 값을 사용한다.

후치 –연산자

형태 : value–
값을 자동으로 -1 감소 시킨다.
세미콜론(;) 다음에 감소 시킨다.
```
  var two = 2;
  var value = 2-- + 3; 
  log(value); //결과 값 : 5
  log(two); //결과 값 : 1
```
후치 ++연산자와 마찬가지로 문장을 수행한 후에 감소시키기 때문에 value의 값은 2 + 3 으로 5이다.

전치 –연산자

형태 : –value
값을 자동으로 -1 감소 시킨다.
문장 안에서 1을 감소 시킨다.
```
      var two = 2;
      var value = --two + 3;
      log(value); // 결과 값 : 4
```
--연산자는 표현식 평가 전에 1이 감소된다.
세미콜론 전에 감소를 시키기 때문에 표현식에서 감소된 값을 사용한다.

!연산자

형태 : !value
논리 NOT 연산자

NOT 연산자는 피연산자가 단 하나뿐인 단항 연산자이다.

표현식 평가 결과를 true or false로 변환한 후
true ➡ false
false ➡ true 로 반환한다.

  var value = true;
  log(!value); // 결과 값 : false
  log(!!"A"); // 결과 값 : true

유니코드

세계의 모든 문자를 통합하여 코드화 시킨 것이다.
언어(Language), 🙈🙉🙊이모지(Emoji) 등
코드 값을 코드 포인트라도 부른다.
표기 방법
- 1. u와 숫자 형태 : u0031 ➡ 숫자 ‘1’
- 1. Javascript 표현법 : u 앞에 ‘'
    log("\u0031"); //결과 값 : 1

ES6에선 다섯자리의 코드 값을 지원한다. (원래는 네자리만 지원)

UTF

Unicode Transformation Format 의 약자이다.
유니코드의 코드 포인트를 매핑하는 방법이다.
UTF-8, UTF-16, UTF-32 로 표기 된다.
➡ HTML 작성시 표기법
utf-8은 8비트로 코드 포인트를 매핑했다는 뜻이다. 8비트 인코딩이라고 부른다.

괸계 연산자

작거나 큰걸 비교하는 연산자 (<, >, <=, >=)
instanceof 연산자
in 연산자

1. > 연산자

양쪽이 Number 타입일 때 왼쪽이 오른쪽 보다 크면 true
왼쪽이 오른쪽 보다 작으면 false
```
log(1 + 2 > 1); //결과 값 : true
```
String 타입 비교 한 쪽만 String 차입이면 false 양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교한다.
<, >, <=, >= 는 비교 기준만 다르다.

== 연산자

양쪽의 값이 같으면 true 다르면 false
데이터 타입은 비교하지 않는다.
```
log(1 === "1"); // 결과 값 : true
```
String 타입을 Number 타입으로 변환하여 비교하기 때문에 같다.
```
var value;
log(value == null); //결과 값 : true
```
value는 undefined로 타입이 다르지만 값이 같으므로 true가 반환된다

!= 연산자

양쪽의 값이 다르면 true 같으면 false
a != b 와 !(a == b) 는 같은 뜻이다.

=== 연산자

양쪽의 값과 타입이 모두 일치하면 true 하나라도 다르면 false
```
  log(1 === 1); //결과 값 : true
  log(1 === "1";) // 결과 값 : false
```
주의하기! 📢
```
var value;
log(value == null); //결과 값 : true
log(value === null); //결과 값 : false
```
undefined 와 null은 값이다.
== 연산자로 비교하면 true, === 연산자로 비교하면 타입이 다르므로 false가 뜬다. 주의해서 사용하도록 하자.

!== 연산자

양쪽의 값 또는 타입이 다르면 true
하나라도 같으면 false

콤마(,) 연산자

콤마로 표현식을 분리한다.
```
var a =1,
  b = 2
```

() 연산자

그룹핑 연산자.

소괄호 안의 표현식을 먼저 평가한다.

var number = 5 / (2 + 3); // 결과 값 : 1

|| 연산자

논리 OR 연산자
표현식 안에 평가 결과가 하나라도 true면 true 아니면 false가 된다.
```
var value, zero = 0, two = 2;
log(value || zero || two); //결과 값 : 2
```
value의 값은 undefined로 false
zero의 값은 0 이므로 false (주의❕ 0은 false이다. 0제외는 true)
two의 값은 2 이므로 true이므로 two의 변수값 2를 반환한다.

true면 true가 아니라 true가 된 변수의 값을 반환한다.
```
var value, zero = 0;
log(value || zero); // 결과 값 : undefined
```
이 경우는 결과가 모두 false일때의 결과이다.
모두가 false이면 false가 아닌 마지막 변수의 값을 반환한다.
고로 마지막 변수인 zero의 값을 반환하여 결과 값이 undefined가 된다.
왼쪽의 결과가 true 이면 뒤(오른쪽)는 비교하지 않는다.
```
var one = 1;
log(one === 1 || two === 2); //결과 값 : true
```
왼쪽의 결과 값이 이미 true가 나왔기 때문에 오른쪽 결과값은 비교하지 않는다.
만약 비교를 하게 된다면 two 변수는 존재하지 않기 때문에 error가 뜰것이다.

&& 연산자

논리 AND 연산자
표현식의 표현결과가 모두 true면 true 아니면 false
```
var one = 1, two = 2;
log(one && two); // 결과 값 : 2
```
모두 true일 경우, 마지막 변수의 값을 반환한다.
왼쪽 결과가 false 이면 오른쪽은 비교하지 않는다.
```
var one = 1, zero = 0;
log(one && zero && nine); // 실행 결과 : 0
```
변수 one과 zero를 비교했을때 true와 false 이므로 false가 된다.
왼쪽 결과가 이미 false이기 때문에 nine은 평가하지 않는다.
마지막 변수인 zero의 값을 반환한다.

조건 연산자

삼항 연산자라고도 부른다.

exp ? exp-1 : exp-2 exp 위치의 표현식을 먼저 평가한다.
true ➡ exp-1 값 반환
false ➡ exp-2 값 반환

log(1 === 1 ? "같음" : "다름"); //결과 값 : 같음
log(1 === "1" ? "같음" : "다름"); //결과 값 : 다름

연산자 우선 순위

MDN 홈페이지 참조