Skip to content

Commit faae9ea

Browse files
[비교 연산자] 미번역분 번역 및 수정
1 parent 1a48ee4 commit faae9ea

File tree

1 file changed

+20
-20
lines changed

1 file changed

+20
-20
lines changed

1-js/02-first-steps/09-comparison/article.md

Lines changed: 20 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@
44

55
자바스크립트에서 기본 수학 연산은 아래와 같은 문법을 사용해 표현할 수 있습니다.
66

7-
- 보다 큼·작음: <code>a &gt; b</code>, <code>a &lt; b</code>.
8-
- 보다 크거나·작거나 같음: <code>a &gt;= b</code>, <code>a &lt;= b</code>.
7+
- 보다 큼·작음: <code>a &gt; b</code>, <code>a &lt; b</code>
8+
- 보다 크거나·작거나 같음: <code>a &gt;= b</code>, <code>a &lt;= b</code>
99
- 같음(동등): `a == b`. 등호 `=`가 두 개 연달아 오는 것에 유의하세요. `a ​​= b`와 같이 등호가 하나일 때는 할당을 의미합니다.
1010
- 같지 않음(부등): 같지 않음을 나타내는 수학 기호 <code>&ne;</code>는 자바스크립트에선 <code>a != b</code>로 나타냅니다. 할당연산자 `=` 앞에 느낌표 `!`를 붙여서 표시합니다.
1111

12-
In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities.
12+
이번 글에선 비교 시 일어나는 기이한 현상을 포함하여 다양한 자료형을 대상으로 자바스크립트가 어떻게 비교를 하는지에 대해 다룰 예정입니다.
1313

14-
At the end you'll find a good recipe to avoid "javascript quirks"-related issues.
14+
글 말미에는 자바스크립트에서만 일어나는 '기이한' 현상을 어떻게 예방할 수 있는지에 대해서 언급해두었습니다.
1515

1616
## 불린형 반환
1717

@@ -57,16 +57,16 @@ alert( 'Bee' > 'Be' ); // true
5757
4. 글자 간 비교가 끝날 때까지 이 과정을 반복합니다.
5858
5. 비교가 종료되었고 문자열의 길이도 같다면 두 문자열은 동일하다고 결론 냅니다. 비교가 종료되었지만 두 문자열의 길이가 다르면 길이가 긴 문자열이 더 크다고 결론 냅니다.
5959

60-
예시의 `'Z' > 'A'`는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 `"Glow"``"Glee"`는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.
60+
예시의 `'Z' > 'A'`는 위 알고리즘의 첫 번째 단계에서 비교 결과가 도출됩니다. 반면, 문자열 `'Glow'``'Glee'`는 복수의 문자로 이루어진 문자열이기 때문에, 아래와 같은 순서로 문자열 비교가 이뤄집니다.
6161

6262
1. `G``G`와 같습니다.
6363
2. `l``l`과 같습니다.
64-
3. `o``e`보다 크기 때문에 여기서 비교가 종료되고, `o`가 있는 첫 번째 문자열 `"Glow"`가 더 크다는 결론이 도출됩니다.
64+
3. `o``e`보다 크기 때문에 여기서 비교가 종료되고, `o`가 있는 첫 번째 문자열 `'Glow'`가 더 크다는 결론이 도출됩니다.
6565

6666
```smart header="정확히는 사전순이 아니라 유니코드 순입니다."
6767
자바스크립트의 문자열 비교 알고리즘은 사전이나 전화번호부에서 사용되는 정렬 알고리즘과 아주 유사하지만, 완전히 같진 않습니다.
6868
69-
차이점 중 하나는 자바스크립트는 대·소문자를 따진다는 것입니다. 대문자 `"A"`와 소문자 `"a"`를 비교했을 때 소문자 `"a"`가 더 큽니다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이죠. 이와 관련한 자세한 내용은 <info:string> 챕터에서 다루도록 하겠습니다.
69+
차이점 중 하나는 자바스크립트는 대·소문자를 따진다는 것입니다. 대문자 `'A'`와 소문자 `'a'`를 비교했을 때 소문자 `'a'`가 더 큽니다. 자바스크립트 내부에서 사용되는 인코딩 표인 유니코드에선 소문자가 대문자보다 더 큰 인덱스를 갖기 때문이죠. 이와 관련한 자세한 내용은 <info:string> 챕터에서 다루도록 하겠습니다.
7070
```
7171

7272
## 다른 형을 가진 값 간의 비교
@@ -90,7 +90,7 @@ alert( false == 0 ); // true
9090
```
9191

9292
````smart header="흥미로운 상황"
93-
같이 일어나지 않을 법한 두 상황이 동시에 일어나는 경우도 있습니다.
93+
동시에 일어나지 않을 법한 두 상황이 동시에 일어나는 경우도 있습니다.
9494
9595
- 동등 비교(`==`) 시 true를 반환함
9696
- 논리 평가 시 값 하나는 `true`, 다른 값 하나는 `false`를 반환함
@@ -107,7 +107,7 @@ alert( Boolean(b) ); // true
107107
alert(a == b); // true!
108108
```
109109
110-
값을 비교했을 때 참이 반환되는데, 값을 논리 평가한 후 비교하면 하나는 거짓이 반환된다는 점에 고개를 갸우뚱할 수도 있습니다. 자바스크립트의 관점에선 이런 결과가 아주 자연스럽습니다. 동등 비교 연산자 `==`는 (예시에서 문자열 `"0"`을 숫자 `0`으로 변환시킨 것처럼) 피연산자를 숫자형으로 바꾸지만, 'Boolean'을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문입니다.
110+
값(a와 b)을 비교하면 참이 반환되는데, 값을 논리 평가한 후 비교하면 하나는 참, 하나는 거짓이 반환된다는 점에 고개를 갸우뚱할 수도 있습니다. 그런데 자바스크립트 관점에선 이런 결과가 아주 자연스럽습니다. 동등 비교 연산자 `==`는 (예시에서 문자열 `"0"`을 숫자 `0`으로 변환시킨 것처럼) 피연산자를 숫자형으로 바꾸지만, 'Boolean'을 사용한 명시적 변환에는 다른 규칙이 사용되기 때문입니다.
111111
````
112112

113113
## 일치 연산자
@@ -130,21 +130,21 @@ alert( '' == false ); // true
130130

131131
**일치 연산자(strict equality operator) `===`를 사용하면 형 변환 없이 값을 비교할 수 있습니다.**
132132

133-
일치 연산자는 엄격한(strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사하기 때문에, 피연산자 `a``b`의 형이 다를 경우 `a === b``false` 즉시 반환합니다.
133+
일치 연산자는 엄격한(strict) 동등 연산자입니다. 자료형의 동등 여부까지 검사하기 때문에 피연산자 `a``b`의 형이 다를 경우 `a === b`즉시 `false`를 반환합니다.
134134

135135
예시:
136136

137137
```js run
138138
alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다.
139139
```
140140

141-
일치 연산자 `===`가 동등 연산자 `==`의 엄격한 형태인 것처럼 "불일치" 연산자 `!==`는 부등 연산자 `!=`의 엄격한 형태입니다.
141+
일치 연산자 `===`가 동등 연산자 `==`의 엄격한 버전인 것처럼 '불일치' 연산자 `!==`는 부등 연산자 `!=`의 엄격한 버전입니다.
142142

143143
일치 연산자는 동등 연산자보다 한 글자 더 길긴 하지만 비교 결과가 명확하기 때문에 에러가 발생할 확률을 줄여줍니다.
144144

145145
## null이나 undefined와 비교하기
146146

147-
`null`이나 `undefined`를 다른 값과 비교할 땐 예상치 않은 일들이 발생합니다. 일단 몇 가지 규칙을 먼저 살펴본 후, 어떤 예상치 않은 일들이 일어나는지 구체적인 예시를 통해 아래에서 살펴보도록 하겠습니다.
147+
`null`이나 `undefined`를 다른 값과 비교할 땐 예상치 않은 일들이 발생합니다. 일단 몇 가지 규칙을 먼저 살펴본 후, 어떤 예상치 않은 일들이 일어나는지 구체적인 예시를 통해 살펴보도록 하겠습니다.
148148

149149
일치 연산자 `===`를 사용하여 `null``undefined`를 비교
150150
: 두 값의 자료형이 다르기 때문에 일치 비교 시 거짓이 반환됩니다.
@@ -154,16 +154,16 @@ alert( 0 === false ); // false, 피연산자의 형이 다르기 때문입니다
154154
```
155155

156156
동등 연산자 `==`를 사용하여 `null``undefined`를 비교
157-
: 동등 연산자를 사용해 `null``undefined`를 비교하면 특별한 규칙이 적용돼 `true`가 반환됩니다. 동등 연산자는 `null``undefined`를 '각별한 커플'처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못하죠.
157+
: 동등 연산자를 사용해 `null``undefined`를 비교하면 특별한 규칙이 적용돼 `true`가 반환됩니다. 동등 연산자는 `null``undefined`를 '각별한 커플'처럼 취급합니다. 두 값은 자기들끼리는 잘 어울리지만 다른 값들과는 잘 어울리지 못합니다.
158158

159159
```js run
160160
alert( null == undefined ); // true
161161
```
162162

163-
산술 연산자나 기타 비교 연산자 `< > <= >=`를 사용하여 `null``undefined`를 비교
163+
산술 연산자나 기타 비교 연산자 `<`, `>`, `<=`, `>=`를 사용하여 `null``undefined`를 비교
164164
: `null``undefined`는 숫자형으로 변환됩니다. `null``0`, `undefined``NaN`으로 변합니다.
165165

166-
이제 위에서 살펴본 세 가지 규칙들이 어떤 흥미로운 에지 케이스(edge case)를 만들어내는지 알아봅시다. 이후, 어떻게 하면 에지 케이스가 만들어내는 함정에 빠지지 않을 수 있을지에 대해 알아보도록 하겠습니다.
166+
이제 위에서 살펴본 세 가지 규칙들이 어떤 흥미로운 에지 케이스(edge case)를 만들어내는지 알아봅시다. 이후, 어떻게 하면 에지 케이스가 만들어내는 함정에 빠지지 않을 수 있을지에 대해 알아보겠습니다.
167167

168168
### null vs 0
169169

@@ -175,9 +175,9 @@ alert( null == 0 ); // (2) false
175175
alert( null >= 0 ); // (3) *!*true*/!*
176176
```
177177

178-
위의 비교 결과는 논리에 맞지 않습니다. (3)에서 `null``0`보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 거짓을 반환하고 있습니다.
178+
비교 결과는 논리에 맞지 않아 보입니다. (3)에서 `null``0`보다 크거나 같다고 했기 때문에, (1)이나 (2) 중 하나는 참이어야 하는데 둘 다 거짓을 반환하고 있네요.
179179

180-
이는 동등 연산자 `==`와 기타 비교 연산자 `> < >= <=`의 동작 방식이 다르기 때문입니다. (1)에서 `null > 0`이 거짓을, (3)에서 `null >= 0`이 참을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) `null`이 숫자형으로 변환돼 `0`이 되기 때문입니다.
180+
이런 결과가 나타나는 이유는 동등 연산자 `==`와 기타 비교 연산자 `<`, `>`, `<=`, `>=`의 동작 방식이 다르기 때문입니다. (1)에서 `null > 0`이 거짓을, (3)에서 `null >= 0`이 참을 반환하는 이유는 (기타 비교 연산자의 동작 원리에 따라) `null`이 숫자형으로 변환돼 `0`이 되기 때문입니다.
181181

182182
그런데 동등 연산자 `==`는 피연산자가 `undefined``null`일 때 형 변환을 하지 않습니다. `undefined``null`을 비교하는 경우에만 `true`를 반환하고, 그 이외의 경우(`null`이나 `undefined`를 다른 값과 비교할 때)는 무조건 `false`를 반환합니다. 이런 이유 때문에 (2)는 거짓을 반환합니다.
183183

@@ -191,7 +191,7 @@ alert( undefined < 0 ); // false (2)
191191
alert( undefined == 0 ); // false (3)
192192
```
193193

194-
예시의 결과를 보면 `undefined`는 0을 매우 싫어하는 것처럼 보이네요. 항상 `false`를 반환하고 있습니다.
194+
예시를 보면 `undefined`는 0을 매우 싫어하는 것처럼 보입니다. 항상 `false`를 반환하고 있네요.
195195

196196
이런 결과는 아래와 같은 이유 때문에 발생합니다.
197197

@@ -203,12 +203,12 @@ alert( undefined == 0 ); // false (3)
203203
위와 같은 에지 케이스를 왜 살펴보았을까요? 이런 예외적인 경우를 꼭 기억해 놓고 있어야만 할까요? 그렇지는 않습니다. 개발을 하다 보면 자연스레 이런 경우를 만나고 점차 익숙해지기 때문에 지금 당장 암기해야 할 필요는 없습니다. 하지만 아래와 같은 방법을 사용해 이런 예외 상황을 미리 예방할 수 있다는 점은 알아두시길 바랍니다.
204204

205205
- 일치 연산자 `===`를 제외한 비교 연산자의 피연산자에 `undefined``null`이 오지 않도록 특별히 주의하시기 바랍니다.
206-
- 또한, `undefined``null`이 될 가능성이 있는 변수가 `>= > < <=`의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 `undefined``null`이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
206+
- 또한, `undefined``null`이 될 가능성이 있는 변수가 `<`, `>`, `<=`, `>=`의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 `undefined``null`이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
207207

208208
## 요약
209209

210210
- 비교 연산자는 불린값을 반환합니다.
211211
- 문자열은 문자 단위로 비교되는데, 이때 비교 기준은 '사전'순입니다.
212212
- 서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
213213
- `null``undefined`는 동등 비교(`==`) 시 서로 같지만 다른 값과는 같지 않습니다.
214-
- `null`이나 `undefined`가 될 확률이 있는 변수가 `>` 또는 `<`의 피연산자로 올 때는 주의를 기울이시기 바랍니다. `null/undefined` 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.
214+
- `null`이나 `undefined`가 될 확률이 있는 변수가 `>` 또는 `<`의 피연산자로 올 때는 주의를 기울이시기 바랍니다. `null`, `undefined` 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.

0 commit comments

Comments
 (0)