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)라고 부른다.
- 0000
FFFF, 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의 결과를 반환한다.