You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.
59
59
60
-
예시의 `'Z' > 'A'`는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 `"Glow"`와 `"Glee"`는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.
60
+
예시의 `'Z' > 'A'`는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 `'Glow'`와 `'Glee'`는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.
61
61
62
62
1.`G`는 `G`와 같습니다.
63
63
2.`l`은 `l`과 같습니다.
64
-
3.`o`는 `e`보다 크기 때문에 여기서 비교가 종료되고, `o`가 있는 첫 번째 문자열 `"Glow"`가 더 크다는 결론이 도출됩니다.
64
+
3.`o`는 `e`보다 크기 때문에 여기서 비교가 종료되고, `o`가 있는 첫 번째 문자열 `'Glow'`가 더 크다는 결론이 도출됩니다.
65
65
66
66
```smart header="정확히는 사전순이 아니라 유니코드 순입니다."
67
67
자바스크립트의 문자열 비교 알고리즘은 사전이나 전화번호부에서 사용되는 정렬 알고리즘과 아주 유사하지만, 완전히 같진 않습니다.
68
68
69
-
차이점 중 하나는 자바스크립트는 대·소문자를 따진다는 것입니다. 대문자 `"A"`와 소문자 `"a"`를 비교했을 때 소문자 `"a"`가 더 큽니다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이죠. 이와 관련한 자세한 내용은 <info:string> 챕터에서 다루도록 하겠습니다.
69
+
차이점 중 하나는 자바스크립트는 대·소문자를 따진다는 것입니다. 대문자 `'A'`와 소문자 `'a'`를 비교했을 때 소문자 `'a'`가 더 큽니다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이죠. 이와 관련한 자세한 내용은 <info:string> 챕터에서 다루도록 하겠습니다.
70
70
```
71
71
72
72
## 다른 형을 가진 값 간의 비교
@@ -90,7 +90,7 @@ alert( false == 0 ); // true
90
90
```
91
91
92
92
````smart header="흥미로운 상황"
93
-
같이 일어나지 않을 법한 두 상황이 동시에 일어나는 경우도 있습니다.
93
+
동시에 일어나지 않을 법한 두 상황이 동시에 일어나는 경우도 있습니다.
94
94
95
95
- 동등 비교(`==`) 시 true를 반환함
96
96
- 논리 평가 시 값 하나는 `true`, 다른 값 하나는 `false`를 반환함
@@ -107,7 +107,7 @@ alert( Boolean(b) ); // true
107
107
alert(a == b); // true!
108
108
```
109
109
110
-
두 값을 비교했을 때 참이 반환되는데, 값을 논리 평가한 후 비교하면 하나는 거짓이 반환된다는 점에 고개를 갸우뚱할 수도 있습니다. 자바스크립트의 관점에선 이런 결과가 아주 자연스럽습니다. 동등 비교 연산자 `==`는 (예시에서 문자열 `"0"`을 숫자 `0`으로 변환시킨 것처럼) 피연산자를 숫자형으로 바꾸지만, 'Boolean'을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문입니다.
110
+
두 값(a와 b)을 비교하면 참이 반환되는데, 값을 논리 평가한 후 비교하면 하나는 참, 하나는 거짓이 반환된다는 점에 고개를 갸우뚱할 수도 있습니다. 그런데 자바스크립트 관점에선 이런 결과가 아주 자연스럽습니다. 동등 비교 연산자 `==`는 (예시에서 문자열 `"0"`을 숫자 `0`으로 변환시킨 것처럼) 피연산자를 숫자형으로 바꾸지만, 'Boolean'을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문입니다.
**일치 연산자(strict equality operator) `===`를 사용하면 형 변환 없이 값을 비교할 수 있습니다.**
132
132
133
-
일치 연산자는 엄격한(strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사하기 때문에, 피연산자 `a`와 `b`의 형이 다를 경우 `a === b`는 `false`를 즉시 반환합니다.
133
+
일치 연산자는 엄격한(strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사하기 때문에 피연산자 `a`와 `b`의 형이 다를 경우 `a === b`는 즉시 `false`를 반환합니다.
134
134
135
135
예시:
136
136
137
137
```js run
138
138
alert( 0===false ); // false, 피연산자의 형이 다르기 때문입니다.
139
139
```
140
140
141
-
일치 연산자 `===`가 동등 연산자 `==`의 엄격한 형태인 것처럼 "불일치" 연산자 `!==`는 부등 연산자 `!=`의 엄격한 형태입니다.
141
+
일치 연산자 `===`가 동등 연산자 `==`의 엄격한 버전인 것처럼 '불일치' 연산자 `!==`는 부등 연산자 `!=`의 엄격한 버전입니다.
142
142
143
143
일치 연산자는 동등 연산자보다 한 글자 더 길긴 하지만 비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여줍니다.
144
144
145
145
## null이나 undefined와 비교하기
146
146
147
-
`null`이나 `undefined`를 다른 값과 비교할 땐 예상치 않은 일들이 발생합니다. 일단 몇 가지 규칙을 먼저 살펴본 후, 어떤 예상치 않은 일들이 일어나는지 구체적인 예시를 통해 아래에서 살펴보도록 하겠습니다.
147
+
`null`이나 `undefined`를 다른 값과 비교할 땐 예상치 않은 일들이 발생합니다. 일단 몇 가지 규칙을 먼저 살펴본 후, 어떤 예상치 않은 일들이 일어나는지 구체적인 예시를 통해 살펴보도록 하겠습니다.
148
148
149
149
일치 연산자 `===`를 사용하여 `null`과 `undefined`를 비교
150
150
: 두 값의 자료형이 다르기 때문에 일치 비교 시 거짓이 반환됩니다.
@@ -154,16 +154,16 @@ alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다
154
154
```
155
155
156
156
동등 연산자 `==`를 사용하여 `null`과 `undefined`를 비교
157
-
: 동등 연산자를 사용해 `null`과 `undefined`를 비교하면 특별한 규칙이 적용돼 `true`가 반환됩니다. 동등 연산자는 `null`과 `undefined`를 '각별한 커플'처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못하죠.
157
+
: 동등 연산자를 사용해 `null`과 `undefined`를 비교하면 특별한 규칙이 적용돼 `true`가 반환됩니다. 동등 연산자는 `null`과 `undefined`를 '각별한 커플'처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못합니다.
158
158
159
159
```js run
160
160
alert( null == undefined ); // true
161
161
```
162
162
163
-
산술 연산자나 기타 비교 연산자 `< > <= >=`를 사용하여 `null`과 `undefined`를 비교
163
+
산술 연산자나 기타 비교 연산자 `<`, `>`, `<=`, `>=`를 사용하여 `null`과 `undefined`를 비교
위의 비교 결과는 논리에 맞지 않습니다. (3)에서 `null`은 `0`보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 거짓을 반환하고 있습니다.
178
+
위 비교 결과는 논리에 맞지 않아 보입니다. (3)에서 `null`은 `0`보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 거짓을 반환하고 있네요.
179
179
180
-
이는 동등 연산자 `==`와 기타 비교 연산자 `> < >= <=`의 동작 방식이 다르기 때문입니다. (1)에서 `null > 0`이 거짓을, (3)에서 `null >= 0`이 참을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) `null`이 숫자형으로 변환돼 `0`이 되기 때문입니다.
180
+
이런 결과가 나타나는 이유는 동등 연산자 `==`와 기타 비교 연산자 `<`, `>`, `<=`, `>=`의 동작 방식이 다르기 때문입니다. (1)에서 `null > 0`이 거짓을, (3)에서 `null >= 0`이 참을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) `null`이 숫자형으로 변환돼 `0`이 되기 때문입니다.
181
181
182
182
그런데 동등 연산자 `==`는 피연산자가 `undefined`나 `null`일 때 형 변환을 하지 않습니다. `undefined`와 `null`을 비교하는 경우에만 `true`를 반환하고, 그 이외의 경우(`null`이나 `undefined`를 다른 값과 비교할 때)는 무조건 `false`를 반환합니다. 이런 이유 때문에 (2)는 거짓을 반환합니다.
위와 같은 에지 케이스를 왜 살펴보았을까요? 이런 예외적인 경우를 꼭 기억해 놓고 있어야만 할까요? 그렇지는 않습니다. 개발을 하다 보면 자연스레 이런 경우를 만나고 점차 익숙해지기 때문에 지금 당장 암기해야 할 필요는 없습니다. 하지만 아래와 같은 방법을 사용해 이런 예외 상황을 미리 예방할 수 있다는 점은 알아두시길 바랍니다.
204
204
205
205
- 일치 연산자 `===`를 제외한 비교 연산자의 피연산자에 `undefined`나 `null`이 오지 않도록 특별히 주의하시기 바랍니다.
206
-
- 또한, `undefined`나 `null`이 될 가능성이 있는 변수가 `>= > < <=`의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 `undefined`나 `null`이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
206
+
- 또한, `undefined`나 `null`이 될 가능성이 있는 변수가 `<`, `>`, `<=`, `>=`의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 `undefined`나 `null`이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
207
207
208
208
## 요약
209
209
210
210
- 비교 연산자는 불린값을 반환합니다.
211
211
- 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 '사전'순입니다.
212
212
- 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
213
213
-`null`과 `undefined`는 동등 비교(`==`) 시 서로 같지만 다른 값과는 같지 않습니다.
214
-
-`null`이나 `undefined`가 될 확률이 있는 변수가 `>` 또는 `<`의 피연산자로 올 때는 주의를 기울이시기 바랍니다. `null/undefined` 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.
214
+
-`null`이나 `undefined`가 될 확률이 있는 변수가 `>` 또는 `<`의 피연산자로 올 때는 주의를 기울이시기 바랍니다. `null`, `undefined` 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.
0 commit comments