Skip to content

Commit 6ae8319

Browse files
[논리 연산자] 보완
- 이슈 #505 해결
1 parent 738e912 commit 6ae8319

File tree

1 file changed

+26
-26
lines changed
  • 1-js/02-first-steps/11-logical-operators

1 file changed

+26
-26
lines changed

1-js/02-first-steps/11-logical-operators/article.md

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
# 논리 연산자
22

3-
자바스크립트엔 세 종류의 논리 연산자 `||`(OR), `&&`(AND), `!`(NOT) 이 있습니다.
3+
자바스크립트엔 세 종류의 논리 연산자 `||`(OR), `&&`(AND), `!`(NOT)이 있습니다.
44

5-
연산자에 "논리"라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 (불린형뿐만 아니라) 모든 유형의 값을 받을 수 있습니다. 연산 결과 역시 모든 유형이 될 수 있습니다.
5+
연산자에 '논리'라는 수식어가 붙긴 하지만 논리 연산자는 피연산자로 불린형뿐만 아니라 모든 타입의 값을 받을 수 있습니다. 연산 결과 역시 모든 타입이 될 수 있습니다.
66

77
좀 더 자세히 알아보도록 합시다.
88

99
## || (OR)
1010

11-
"OR" 연산자는 두 개의 수직선 기호로 만들 수 있습니다.
11+
'OR' 연산자는 두 개의 수직선 기호로 만들 수 있습니다.
1212

1313
```js
1414
result = a || b;
@@ -27,7 +27,7 @@ alert( true || false ); // true
2727
alert( false || false ); // false
2828
```
2929

30-
보시다시피 피연산자가 모두 `false`인 경우를 제외하고 연산 결과는 항상 `true`입니다.
30+
피연산자가 모두 `false`인 경우를 제외하고 연산 결과는 항상 `true`입니다.
3131

3232
피연산자가 불린형이 아니면, 평가를 위해 불린형으로 변환됩니다.
3333

@@ -64,9 +64,9 @@ if (hour < 10 || hour > 18 || isWeekend) {
6464
}
6565
```
6666

67-
## 첫 번째 truthy를 찾는 OR 연산자 "||"
67+
## 첫 번째 truthy를 찾는 OR 연산자 '||'
6868

69-
위에선 피연산자가 불린값인 경우만을 다뤘습니다. 전통적인 방식이죠. 이제 자바스크립트에서만 제공하는 논리연산자 OR의 "추가"기능에 대해 알아보도록 하겠습니다.
69+
지금까진 피연산자가 불린형인 경우만을 다뤘습니다. 전통적인 방식이죠. 이제 자바스크립트에서만 제공하는 논리연산자 OR의 '추가'기능에 대해 알아보겠습니다.
7070

7171
추가 기능은 아래와 같은 알고리즘으로 동작합니다.
7272

@@ -79,8 +79,8 @@ result = value1 || value2 || value3;
7979
이때, OR `||`연산자는 다음 순서에 따라 연산을 수행합니다.
8080

8181
- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
82-
- 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 `true`이면 연산을 멈추고 해당 피연산자의 (변환 전) 원래 값을 반환합니다.
83-
- 피연산자 모두를 평가한 경우(모든 피연산자가 변환 후 `false`경우) 마지막 피연산자를 반환합니다.
82+
- 각 피연산자를 불린형으로 변환합니다. 변환 후 그 값이 `true`이면 연산을 멈추고 해당 피연산자의 **변환 전** 원래 값을 반환합니다.
83+
- 피연산자 모두를 평가한 경우(모든 피연산자가 `false`로 평가되는 경우) 마지막 피연산자를 반환합니다.
8484

8585
여기서 핵심은 반환 값이 형 변환을 하지 않은 원래 값이라는 것입니다.
8686

@@ -97,11 +97,11 @@ alert( null || 0 || 1 ); // 1 (1은 truthy임)
9797
alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)
9898
```
9999

100-
위에서 소개한 자바스크립트에서만 제공하는 OR 연산자의 추가 기능을 이용하면 다양한 용도로 OR 연산자를 활용할 수 있습니다.
100+
이런 OR 연산자의 추가 기능을 이용하면 여러 용도로 OR 연산자를 활용할 수 있습니다.
101101

102102
1. **변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기**
103103

104-
여러 변수가 있는데 이 변수들은 날짜 정보를 담고 있거나 `null` 혹은 `undefined`일 수 있다고 가정해 봅시다. 이들 중 실제 날짜 데이터가 들어 있는 첫 번째 변수는 어떻게 찾을 수 있을까요?
104+
여러 변수가 있는데 이 변수들은 특정 정보를 담고 있거나 `null` 혹은 `undefined`일 수 있다고 가정해 봅시다. 이들 중 실제 유효한 데이터가 들어 있는 첫 번째 변수는 어떻게 찾을 수 있을까요?
105105

106106
OR `||`을 이럴 때 활용할 수 있습니다.
107107

@@ -119,11 +119,11 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을
119119
`currentUser``defaultUser` 둘 다 falsy였다면 `"unnamed"`가 출력되었을 겁니다.
120120
2. **단락 평가**
121121

122-
피연산자엔 값뿐만 아니라 임의의 표현식이 올 수도 있습니다. 위에서 설명해 드린 바와 같이 OR`||`은 왼쪽부터 시작해서 오른쪽으로 평가 및 테스트를 진행하고, truthy를 만나면 평가를 중지하고 그 값을 반환합니다. 왼쪽부터 연산을 시작해 truthy에 도달한 순간 평가를 멈추기 때문에 모든 피연산자를 평가하지 않고 짧게 연산을 끝마칩니다. 이런 과정을 "단락 평가(short circuit evaluation)"라고 부르죠.
122+
피연산자엔 값뿐만 아니라 임의의 표현식이 올 수도 있습니다. 위에서 설명해 드린 바와 같이 OR`||`은 왼쪽부터 시작해서 오른쪽으로 평가를 진행하고, truthy를 만나면 평가를 멈춘 후 그 값을 반환합니다. truthy를 만난 순간 평가를 멈추기 때문에 모든 피연산자를 평가하지 않고 짧게 연산을 끝마칩니다. 이런 프로세스를 '단락 평가(short circuit evaluation)'라고 부릅니다.
123123

124-
두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 단락 평가가 어떻게 동작하는지 명확히 볼 수 있습니다.
124+
단락 평가의 동작 방식은 두 번째 피연산자가 변수 할당과 같은 부수적인 효과(side effect)를 가지는 표현식 일 때 명확히 볼 수 있습니다.
125125

126-
아래 예시에서 `x`의 값은 아직 할당되지 않은 상태입니다.
126+
아래 예시에서 `x`엔 값이 아직 할당되지 않은 상태입니다.
127127

128128
```js run no-beautify
129129
let x;
@@ -133,7 +133,7 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을
133133
alert(x); // 표현식 (x = 1)이 평가되지 않았기 때문에 x는 undefined입니다.
134134
```
135135

136-
위 예시에서 첫 번째 인수가 `false`라면, `||`두 번째 인수를 평가하기 때문에 x에 값이 할당됩니다.
136+
첫 번째 인수가 `false`라면, 두 번째 인수가 평가되기 때문에 `x` 값이 할당됩니다.
137137

138138
```js run no-beautify
139139
let x;
@@ -143,11 +143,11 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을
143143
alert(x); // 1
144144
```
145145

146-
위 두 예시에서 할당은 복잡하지 않고 간단한 부수 효과였습니다. 평가가 진행되지 않으면 그 효과를 알 수 없는 기타 부수 효과가 있을 수도 있죠.
146+
위 두 예시에서 살펴본 할당 연산은 복잡하지 않고 간단한 부수 효과입니다. 그런데 평가가 진행되지 않으면 그 효과가 드러나지 않는 부수 효과가 있을 수도 있습니다.
147147

148-
OR을 이런 식으로 활용하면 "`if` 조건문을 더 짧게" 대체할 수 있습니다. 첫 번째 피연산자를 불린값으로 변환하고, 그 값이 false 라면 두 번째 피연산자를 평가하도록 만들 수 있죠.
148+
OR을 이런 식으로 활용하면 `if` 조건문을 '짧게' 줄일 수 있습니다. 첫 번째 피연산자를 평가했을 때 `false`두 번째 피연산자를 평가하도록 만들 수 있죠.
149149

150-
코드 이해도 측면에서 "평범한" `if`문을 사용하는 것이 좋긴 하지만, 가끔은 OR을 사용한 대안이 편리할 수 ​​있습니다.
150+
코드 이해도 측면에서 '평범한' `if`문을 사용하는 것이 좋긴 하지만, 가끔은 OR을 사용한 대안이 편리할 수 ​​있습니다.
151151

152152
## && (AND)
153153

@@ -180,13 +180,13 @@ if (hour == 12 && minute == 30) {
180180
OR 연산자와 마찬가지로 AND 연산자의 피연산자도 타입에 제약이 없습니다.
181181

182182
```js run
183-
if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가
183+
if (1 && 0) { // 피연산자가 숫자형이지만 논리형으로 바뀌어 true && false가 됩니다.
184184
alert( "if 문 안에 falsy가 들어가 있으므로 alert창은 실행되지 않습니다." );
185185
}
186186
```
187187

188188

189-
## 첫 번째 falsy를 찾는 AND 연산자 "&&"
189+
## 첫 번째 falsy를 찾는 AND 연산자 '&&'
190190

191191
AND 연산자와 피연산자가 여러 개인 경우를 살펴봅시다.
192192

@@ -197,8 +197,8 @@ result = value1 && value2 && value3;
197197
AND 연산자 `&&`는 아래와 같은 순서로 동작합니다.
198198

199199
- 가장 왼쪽 피연산자부터 시작해 오른쪽으로 나아가며 피연산자를 평가합니다.
200-
-피연산자를 불린형으로 변환합니다. 변환 후 값이 `false`이면 평가를 멈추고 해당 피연산자의 (변환 전) 원래 값을 반환합니다.
201-
- 피연산자 모두를 평가한 경우(모든 피연산자가 truthy인 경우) 마지막 피연산자를 반환합니다.
200+
-피연산자는 불린형으로 변환됩니다. 변환 후 값이 `false`이면 평가를 멈추고 해당 피연산자의 **변환 전** 원래 값을 반환합니다.
201+
- 피연산자 모두가 평가되는 경우(모든 피연산자가 `true`로 평가되는 경우) 마지막 피연산자가 반환됩니다.
202202

203203
정리해 보자면 이렇습니다. AND 연산자는 첫 번째 falsy를 반환합니다. 피연산자에 falsy가 없다면 마지막 값을 반환합니다.
204204

@@ -215,16 +215,16 @@ alert( 1 && 5 ); // 5
215215
// 첫 번째 피연산자가 falsy이면,
216216
// AND는 첫 번째 피연산자를 반환하고, 두 번째 피연산자는 무시합니다.
217217
alert( null && 5 ); // null
218-
alert( 0 && "no matter what" ); // 0
218+
alert( 0 && "아무거나 와도 상관없습니다." ); // 0
219219
```
220220

221-
OR 연산자에도 피연산자 여러 개를 연속해서 전달할 수 있습니다. 첫 번째 falsy가 어떻게 반환되는지 예시를 통해 살펴봅시다.
221+
AND 연산자에도 피연산자 여러 개를 연속해서 전달할 수 있습니다. 첫 번째 falsy가 어떻게 반환되는지 예시를 통해 살펴봅시다.
222222

223223
```js run
224224
alert( 1 && 2 && null && 3 ); // null
225225
```
226226

227-
다음 표현식에선 AND 연산자의 피연산자가 모두 truthy이기 때문에 마지막 피연산자가 반환됩니다.
227+
아래 예시에선 AND 연산자의 피연산자가 모두 truthy이기 때문에 마지막 피연산자가 반환됩니다.
228228

229229
```js run
230230
alert( 1 && 2 && 3 ); // 마지막 값, 3
@@ -246,7 +246,7 @@ let x = 1;
246246
(x > 0) && alert( '0보다 큽니다!' );
247247
```
248248

249-
`&&`의 오른쪽 피연산자는 평가가 `&&` 우측까지 진행되어야 실행됩니다. 즉, `(x> 0)`이 참인 경우에만 `alert`문이 실행되죠.
249+
`&&`의 오른쪽 피연산자는 평가가 `&&` 우측까지 진행되어야 실행됩니다. 즉, `(x > 0)`이 참인 경우에만 `alert`문이 실행되죠.
250250

251251
위 코드를 if 문을 써서 바꾸면 다음과 같습니다.
252252

@@ -272,7 +272,7 @@ NOT 연산자의 문법은 매우 간단합니다.
272272
result = !value;
273273
```
274274

275-
OR 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행합니다.
275+
NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행합니다.
276276

277277
1. 피연산자를 불린형(`true / false`)으로 변환합니다.
278278
2. 1에서 변환된 값의 역을 반환합니다.

0 commit comments

Comments
 (0)