[자바스크립트 비기너] 연산자(Operator)

1. 연산자, 표현식

---

연산자

• 연산의 사전적 의미: 규칙에 따라 계산하여 값을 구한다.
• 연산자는 사전적 의미와 같다.표현식 (Expression)
• var total = 1 + 2; var value = total / (2 + 3); // 위의 식에서 total, (2 + 3) 모두 표현식에 해당된다.
• 표현식의 형태
• 1 + 2와 같은 식을 표현식을 평가한다고 말한다.
• 표현식을 평가하면 반드시 결과가 반환된다. 이를 평가 결과라고 한다.
• 자바스크립트는 표현식의 연결이다.

2. 할당 연산자

---

단일 할당 연산자

• = 하나만 사용한 형태 (ex. var result = 1 + 2;)

복합 할당 연산자

• = 앞에 연산자를 작성한다.
• ex. +=, -=, <<=, >>>=, &=
• 먼저 = 앞을 연산한 후 할당한다.
• var point = 7; point += 3;

해석, 실행 순서

• 해석이란 JS 코드를 기계어로 바꾸는 것을 말한다. (== 컴파일한다)
• "엔진이 해석하고 실행한다"라고 한다.
• 실행 순서
• var result = 1 + 2 + 6; // = 왼쪽의 표현식 평가 // = 오른쪽의 표현식 평가 // 왼쪽에서 오른쪽으로 평가 // = 오른쪽의 평가 결과를 왼쪽 표현식 평과 결과에 할당

3. 산술 연산자(+)

---

• • 양쪽의 표현식을 평가하고 평가 결과를 더한다.
• 한 쪽이라도 숫자가 아니면 평과 결과를 연결한다. (+ 연산자에만 있는 특별한 연산임)
• 왼쪽에서 오른쪽으로 연산한다. (ex. 1 + 5 + "ABC"의 결과는 6ABC 이다.)

4. 숫자로 변환

---

• JS는 연산하기 전에 우선 숫자로 변환을 시도한다.
• 변환된 값으로 연산한다. 

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

• ex. 123 - "23" == 100

5. 산술 연산자(-, *, /, % 연산자)

---

- 연산자

• 왼쪽 표현식 평가 결과에서 오른쪽 표현식 평과 결과를 뺀다.
• String 타입이지만 값이 숫자이면 Number 타입으로 변환하여 계산한다.

* 연산자

• 숫자 값으로 변환할 수 있으면 변환하여 곱한다.
• NaN 반환: 양쪽의 평과 결과가 하나라도 숫자가 아닐 때 (ex. 10 * "A")
• 소수 값이 생기는 경우는 IEEE 754 유동 소수점 처리로 인해 값이 우리가 알던 결과와 다르게 출력된다.
• 이를 해결하기 위해 실수를 정수로 변환하여 값을 구하고 다시 정수를 실수로 변환한다.

/ 연산자

• NaN 반환: 양쪽의 평과 결과가 하나라도 숫자가 아닐 때, 분모, 분자 모두 0일 때
• 분모가 0이면 Infinity를 반환한다.
• 분자가 0이면 0을 반환한다.

% 연산자

• ex. 3 % 2 == 1
• ex. 5 % 2.3 == 0.400...36
• 위 역시 실수를 정수로 변환하여 연산하고 다시 정수를 실수로 변환하면 우리가 알던 값이 출력된다.

6. 단항 연산자

---

단항 + 연산자

• 형태: +value
• 값을 Number 타입으로 변환한다.
• var value = "7"; console.log(typeof value); // string console.log(typeof +value); // number console.log(typeof Number(value); // number
• 단항 연산자(+)를 사용하면 더하기 연산자와 헷갈릴 수 있기 때문에 가독성을 위해 Number()를 사용하는 것이 더 좋다.

단항 - 연산자

• 형태: -value
• 값의 부호를 바꾼다. (+는 -로, -는 +로)
• 연산할 때만 바꾸고 원래 값은 바뀌지 않는다.
• 이 역시 가독성을 위해 (value * -1)처럼 코드를 작성하는 것도 좋다.

7.  후치, 전치, 논리 NOT 연산자

---

후치 ++ 연산자

• 형태: value++
• 문장 수행 후 값을 자동으로 1 증가시킨다. 즉, 세미콜론 다음 증가시킨다.

전치 ++ 연산자

• 형태: ++value
• 문장 안에서 1 증가시킨다. 표현식 평가 전 1을 증가시키는 것이므로 표현식에서 증가된 값을 사용한다.

후치 -- 연산자

• 형태: value--
• 문장 수행 후 1 감소시킨다.

전치 -- 연산자

• 형태: --value
• 문장 안에서 1 감소시킨다.

! 연산자

• 논리 NOT 연산자
• 형태: !value
• 표현식 평과 결과를 true, false로 변환한 후 true는 false, false는 true로 반환한다.
• 원래 값을 바뀌지 않고 사용할 때만 변환한다.

• console.log(!!"A"); 
  // A는 true, !A는 false, !!A는 true 
  // ES3에서 자주 사용하던 방식 
  // 안전하게 true, false로 변환하기 위함

8. 유니코드, UTF

---

유니코드

• 세계 모든 문자를 통합하여 코드화한 것
• 언어, 이모지 등을 포함한다.
• 코드 값을 코드 포인트(Code Point)라고 부른다.
• 0000FFFF, 100001FFFF 값에 문자를 매핑한다.

유니코드 표기 방법

• u와 숫자 형태로 작성한다. (ex. u0031은 숫자 1)
• JS는 u 앞에 역슬래시()를 붙인다.
• 역슬래시()를 문자로 표시하려면 역슬래시(\) 2개를 작성한다.
• ES6에서 표기 방법이 추가되었다. (10000~1FFFFF 다섯 자리를 지원한다.)

UTF

• Unicode Trnasformation Format
• 유니코드의 코드 포인트를 매핑하는 방법
• UTF-8, UTF-16, UTF-32로 표기한다.
• UTF-8은 8비트로 코드 포인트를 매핑하는 것이다.
• 8비트 인코딩이라고도 부른다.
• 반대로 디코딩도 있다.

9. 관계 연산자

---

• <, >, <=, >= 연산자, instance of 연산자, in 연산자> 연산자
• 양쪽이 Number 타입일 때는 왼쪽이 오른쪽보다 크면 true, 아니면 false를 반환한다.
• String 타입은 한 쪽이 String 타입이면 false, 양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교하며 문자 하나씩 비교한다.
• 코드 포인트는 유니코드를 등록할 때 부여한다. 유니코드 등록 순서로 비교한다는 것은 유니코드 사전 순서로 비교한다는 말과 같다.
• console.log("\u0033" > "\u0032") // true console.log("A" > "1") // true
• <, <=, >=는 비교 기준만 다른 것이다.

10. 동등, 부등, 일치, 불일치 연산자

---

== 연산자

• 동등 연산자이다.
• 왼쪽과 오른쪽 값이 같으면 true, 다르면 false를 반환한다.
• 값 타입은 비교하지 않는다. 1과 "1"은 같다.
• 값 타입이 다르면(문자:숫자, 숫자:문자 일 때) 문자 타입을 숫자 타입으로 변환하여 비교하기 때문에 true를 반환한다.

!= 연산자

• 부동 연산자
• a != b와 !(a == b)는 같다.

=== 연산자

• 일치 연산자
• 왼쪽과 오른쪽의 값과 타입이 모두 같으면 true, 값 또는 타입이 다르면 false를 반환한다.
• 1 === "1"은 false를 반환한다.!== 연산자
• var value; // undefined console.log(value == null); // true console.log(value === null); // false undefined와 null은 모두 값이기 때문에 ==로 비교하면 true이다.
• 불일치 연산자
• 값 또는 타입이 다르면 true, true가 아니면 false를 반환한다.

11. 콤마, 그룹핑, 논리 연산자

---

콤마(,) 연산자

• 콤마로 표현식을 분리한다.() 연산자
• var a = 1, b = 2; // 한 번만 var 작성
• 그룹핑 연산자
• 소괄호 안의 표현식을 먼저 평가하고 평가한 값을 반환한다.

|| 연산자

• 논리 OR 연산자
• 왼쪽 결과가 true이면 오른족은 비교하지 않는다.
• true가 된 시점의 변숫값을 반환한다.
• 마지막까지 비교했는데 모두가 false이면 false가 아니라 마지막 변숫값을 반환한다.

var value, zero = 0, two = 2;
console.log(value || zero || two); // 2
// value는 undefined -> false
// zero는 0 -> false
// two는 2 -> true

var one = 1;
console.log(one === 1 || two === 2); // true 반환
// 오른쪽은 비교하지 않는다.
// 오른쪽을 비교하면 two 변수가 없으므로 에러가 발생할 것이다.
// OR 연산자 사용할 때는 모든 조건이 or가 되는지 확인해야 한다.

&& 연산자

---

• 논리 AND 연산자
• 왼쪽 결과가 false이면 오른쪽은 비교하지 않는다.

12. 조건 연산자, 연산자 우선순위

---

조건 연산자

• exp ? exp-1 : exp-2
• 3항 연산자라고도 한다.
• exp 위치의 표현식을 먼저 평가한다.
• true이면 exp-1의 결과를 반환하고 false이면 exp-2의 결과를 반환한다.