Merge remote-tracking branch 'upstream/master'

Author: Violet-Bora-Lee

1-js/02-first-steps/01-hello-world/article.md

@@ -78,7 +78,7 @@
 물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있습니다.
 
 ```html
-<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.2.0/lodash.js"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
 ```
 
 복수의 스크립트를 HTML에 삽입하고 싶다면 스크립트 태그를 여러 개 사용하면 됩니다.

1-js/02-first-steps/04-variables/article.md

@@ -80,7 +80,6 @@ let user = 'John'
 
 위에서 소개한 방식들에 기술적인 차이가 있지는 않습니다. 개인의 취향과 미적 감각에 따라 원하는 방식으로 코드를 작성하세요.
 
-
 ````smart header="`let` 대신 `var`"
 만들어진 지 오래된 스크립트에서 `let` 대신 `var`라는 키워드를 발견하는 경우가 있습니다.
 
@@ -135,6 +134,20 @@ alert(Hello); // Hello world!
 alert(message); // Hello world!
 ```
 
+````warn header="Declaring twice triggers an error"
+A variable should be declared only once.
+
+A repeated declaration of the same variable is an error:
+
+```js run
+let message = "This";
+
+// repeated 'let' leads to an error
+let message = "That"; // SyntaxError: 'message' has already been declared
+```
+So, we should declare a variable once and then refer to it without `let`.
+````
+
 ```smart header="함수형 언어"
 [함수형(functional)](https://en.wikipedia.org/wiki/Functional_programming) 프로그래밍 언어는 변숫값 변경을 금지합니다. [스칼라(Scala)](http://www.scala-lang.org/)와 [얼랭(Erlang)](http://www.erlang.org/)은 대표적인 함수형 언어입니다.
 

1-js/02-first-steps/08-operators/3-primitive-conversions-questions/solution.md

@@ -10,8 +10,8 @@ true + false = 1
 "4" - 2 = 2
 "4px" - 2 = NaN
 7 / 0 = Infinity
-" -9  " + 5 = " -9  5" // (3)
-" -9  " - 5 = -14 // (4)
+"  -9  " + 5 = "  -9  5" // (3)
+"  -9  " - 5 = -14 // (4)
 null + 1 = 1 // (5)
 undefined + 1 = NaN // (6)
 " \t \n" - 2 = -2 // (7)

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

@@ -9,6 +9,10 @@
 - 같음(동등): `a == b`. 등호 `=`가 두 개 연달아 오는 것에 유의하세요. `a ​​= b`와 같이 등호가 하나일 때는 할당을 의미합니다.
 - 같지 않음(부등): 같지 않음을 나타내는 수학 기호 <code>&ne;</code>는 자바스크립트에선 <code>a != b</code>로 나타냅니다. 할당연산자 `=` 앞에 느낌표 `!`를 붙여서 표시합니다.
 
+In this article we'll learn more about different types of comparisons, how JavaScript makes them, including important peculiarities. 
+
+At the end you'll find a good recipe to avoid "javascript quirks"-related issues.
+
 ## 불린형 반환
 
 다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환하는데 합니다. 반환 값은 불린형입니다.
@@ -198,9 +202,8 @@ alert( undefined == 0 ); // false (3)
 
 위와 같은 에지 케이스를 왜 살펴보았을까요? 이런 예외적인 경우를 꼭 기억해 놓고 있어야만 할까요? 그렇지는 않습니다. 개발을 하다 보면 자연스레 이런 경우를 만나고 점차 익숙해지기 때문에 지금 당장 암기해야 할 필요는 없습니다. 하지만 아래와 같은 방법을 사용해 이런 예외 상황을 미리 예방할 수 있다는 점은 알아두시길 바랍니다.
 
-일치 연산자 `===`를 제외한 비교 연산자의 피연산자에 `undefined`나 `null`이 오지 않도록 특별히 주의하시기 바랍니다.
-
-또한, `undefined`나 `null`이 될 가능성이 있는 변수가 `>= > < <=`의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 `undefined`나 `null`이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
+- 일치 연산자 `===`를 제외한 비교 연산자의 피연산자에 `undefined`나 `null`이 오지 않도록 특별히 주의하시기 바랍니다.
+- 또한, `undefined`나 `null`이 될 가능성이 있는 변수가 `>= > < <=`의 피연산자가 되지 않도록 주의하시기 바랍니다. 명확한 의도를 갖고 있지 않은 이상 말이죠. 만약 변수가 `undefined`나 `null`이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하시기 바랍니다.
 
 ## 요약
 

1-js/02-first-steps/10-ifelse/article.md

@@ -1,4 +1,4 @@
-# 조건부 연산자 if와 ?
+# if와 '?'를 사용한 조건 처리
 
 조건에 따라 다른 행동을 취해야 할 때가 있습니다.
 

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

@@ -134,7 +134,7 @@ alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 
 
     첫 번째 줄의 `||` 연산자는 `true`를 만나자마자 평가를 멈추기 때문에 `alert`가 실행되지 않습니다.
 
-    단락 평가는 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰입니다.
+    단락 평가는 연산자 왼쪽 조건이 falsy일 때만 명령어를 실행하고자 할 때 자주 쓰입니다.
 
 ## && (AND)
 
@@ -286,4 +286,4 @@ alert( Boolean("non-empty string") ); // true
 alert( Boolean(null) ); // false
 ```
 
-`NOT` 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 `&&`나 `||` 보다 먼저 실행됩니다.
+`NOT` 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 `&&`나 `||` 보다 먼저 실행됩니다.

1-js/02-first-steps/12-nullish-coalescing-operator/article.md

@@ -2,50 +2,54 @@
 
 [recent browser="new"]
 
-null 병합 연산자(nullish coalescing operator) `??`를 사용하면 여러 피연산자 중 그 값이 '확정되어있는' 변수를 짧은 문법으로도 찾을 수 있습니다.
+null 병합 연산자(nullish coalescing operator) `??`를 사용하면 짧은 문법으로 여러 피연산자 중 그 값이 '확정되어있는' 변수를 찾을 수 있습니다.
 
-상황에 따른 `a ?? b`의 평가 결과를 살펴봅시다.
-- `a`가 `null`이나 `undefined`가 아니면 `a`
-- `a`가 `null`이나 `undefined`이면 `b`
+`a ?? b`의 평가 결과는 다음과 같습니다.
+- `a`가 `null`도 아니고 `undefined`도 아니면 `a`
+- 그 외의 경우는 `b`
 
-null 병합 연산자 `??`를 사용하지 않고 만든 `x = a ?? b`와 동일하게 동작하는 코드는 다음과 같습니다.
+null 병합 연산자 `??`없이 `x = a ?? b`와 동일한 동작을 하는 코드를 작성하면 다음과 같습니다.
 
 ```js
 x = (a !== null && a !== undefined) ? a : b;
 ```
 
-길이가 길어지네요. 
+코드 길이가 길어지네요. 
 
-또 다른 예시를 살펴봅시다. `firstName`, `lastName`, `nickName`이란 변수가 있는데 이 값들은 모두 옵션 값이라고 해보겠습니다.
+또 다른 예시를 살펴봅시다. `firstName`, `lastName`, `nickName`이란 변수에 사용자 이름이나 별명을 저장하는데, 사용자가 아무런 정보도 입력하지 않는 케이스도 허용한다고 해보겠습니다.
 
-실제 값이 들어있는 변수를 찾고 그 값을 보여줘 보겠습니다(모든 변수에 값이 없다면 `익명`을 출력).
+화면엔 세 변수 중, 값이 정해진 변수의 값을 출력하는데, 세 변수 모두 값이 정해지지 않았다면 "Anonymous"가 출력되도록 해보죠.
+
+이럴 때 null 병합 연산자 `??`를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있습니다.
 
 ```js run
 let firstName = null;
 let lastName = null;
-let nickName = "바이올렛";
+let nickName = "Supercoder";
 
 // null이나 undefined가 아닌 첫 번째 피연산자
-alert(firstName ?? lastName ?? nickName ?? "익명"); // 바이올렛
+*!*
+alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder
+*/!*
 ```
 
 ## '??'와 '||'의 차이
 
-null 병합 연산자는 OR 연산자 `||`와 상당히 유사해 보입니다. 실제로 위 예시에서 `??`를 `||`로 바꿔도 그 결과는 동일하기까지 하죠.
+null 병합 연산자는 OR 연산자 `||`와 상당히 유사해 보입니다. 실제로 위 예시에서 `??`를 `||`로 바꿔도 그 결과는 동일하기까지 하죠. [이전 챕터](info:logical-operators#or-finds-the-first-truthy-value)에서 관련 내용을 살펴본 바 있습니다.
 
 그런데 두 연산자 사이에는 중요한 차이점이 있습니다.
 - `||`는 첫 번째 *truthy* 값을 반환합니다.
-- `??`는 *값이 정의되어있는* 첫 번째 값을 반환합니다.
+- `??`는 첫 번째 *정의된(defined)* 값을 반환합니다.
 
 `null`과 `undefined`, 숫자 `0`을 구분 지어 다뤄야 할 때 이 차이점은 매우 중요한 역할을 합니다.
 
-예시:
+예시를 살펴봅시다.
 
 ```js
 height = height ?? 100;
 ```
 
-`height`에 값을 정의하지 않은 상태라면 `height`엔 `100`이 할당됩니다. 그런데 `height`에 `0`이 할당된 상태라면 값이 바뀌지 않고 그대로 남아있습니다.
+`height`에 값이 정의되지 않았다면 `height`엔 `100`이 할당됩니다.
 
 이제 `??`와 `||`을 비교해봅시다.
 
@@ -56,17 +60,19 @@ alert(height || 100); // 100
 alert(height ?? 100); // 0
 ```
 
-`height || 100`은 `height`에 `0`을 할당했지만 `0`을 falsy 한 값으로 취급했기 때문에 `null`이나 `undefined`를 할당한 것과 동일하게 처리합니다. 높이에 `0`을 할당하는 것과 유사한 유스케이스에선 이처럼 `||`는 부정확한 결과를 일으킬 수 있습니다.
+`height || 100`은 `height`에 `0`을 할당했지만 `0`을 falsy 한 값으로 취급했기 때문에 `null`이나 `undefined`를 할당한 것과 동일하게 처리합니다. 따라서 `height || 100`의 평가 결과는 `100`입니다.
+
+반면 `height ?? 100`의 평가 결과는 `height`가 정확하게 `null`이나 `undefined`일 경우에만 `100`이 됩니다. 예시에선 `height`에 `0`이라는 값을 할당했기 때문에 얼럿창엔 `0`이 출력됩니다.
 
-대신 `height ?? 100`은 `height`가 정확히 `null`이나 `undefined`일때만 `height`에 `100`을 할당합니다. 
+이런 특징 때문에 높이처럼 `0`이 할당될 수 있는 변수를 사용해 기능을 개발할 땐 `||`보다 `??`가 적합합니다.
 
 ## 연산자 우선순위
 
-[`??`의 연산자 우선순위](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table)는 `7`로 꽤 낮습니다.
+[`??`의 연산자 우선순위](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence#Table)는 `5`로 꽤 낮습니다.
 
-대부분의 연산자보다 우선순위가 낮고, `=`와 `?` 보다는 조금 높죠.
+따라서 `??`는 `=`와 `?` 보다는 먼저, 대부분의 연산자보다는 나중에 평가됩니다.
 
-따라서 복잡한 표현식 안에서 `??`를 사용할 땐 괄호를 추가해주는 게 좋습니다.
+그렇기 때문에 복잡한 표현식 안에서 `??`를 사용해 값을 하나 선택할 땐 괄호를 추가하는 게 좋습니다.
 
 ```js run
 let height = null;
@@ -78,27 +84,34 @@ let area = (height ?? 100) * (width ?? 50);
 alert(area); // 5000
 ```
 
-`*`가 `??`보다 우선순위가 높기 때문에 괄호를 생략하게 되면 `*`가 먼저 실행되어 아래 코드처럼 동작할 겁니다.
+그렇지 않으면 `*`가 `??`보다 우선순위가 높기 때문에 `*`가 먼저 실행됩니다.
+
+결국엔 아래 예시처럼 동작하겠죠.
 
 ```js
 // 원치 않는 결과
 let area = height ?? (100 * width) ?? 50;
 ```
 
-`??`엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있습니다. 안정성 관련 이슈 때문에 `??`는 `&&`나 `||`와 함께 사용하는 것이 금지되어 있습니다.
+`??`엔 자바스크립트 언어에서 규정한 또 다른 제약사항이 있습니다.
 
-아래 예시를 실행해봅시다. 문법 에러가 발생합니다.
+**안정성 관련 이슈 때문에 `??`는 `&&`나 `||`와 함께 사용하지 못합니다.**
+
+아래 예시를 실행하면 문법 에러가 발생합니다.
 
 ```js run
 let x = 1 && 2 ?? 3; // SyntaxError: Unexpected token '??'
 ```
 
-이 제약에 대해선 아직 논쟁이 많긴 하지만 어쨌든 이슈가 있어서 명세서에 제약이 추가된 상황입니다.
+이 제약에 대해선 아직 논쟁이 많긴 하지만 사람들이 `||`를 `??`로 바꾸기 시작하면서 만드는 실수를 방지하고자 명세서에 제약이 추가된 상황입니다.
 
-에러를 피하려면 괄호를 사용해주세요.
+제약을 피하려면 괄호를 사용해주세요.
 
 ```js run
+*!*
 let x = (1 && 2) ?? 3; // 제대로 동작합니다.
+*/!*
+
 alert(x); // 2
 ```
 

1-js/03-code-quality/02-coding-style/1-style-errors/solution.md

@@ -12,7 +12,7 @@ function pow(x,n)  // <- 인수 사이에 공백이 없음
 
 let x=prompt("x?",''), n=prompt("n?",'') // <-- 에러를 발생시키는 코드는 아니나,
 // 두 줄로 나눠서 작성하는 게 좋고, 연산자 앞/뒤 공백과 문장 끝 ;를 넣어주는 게 좋음
-if (n<0)  // <- (n < 0) 같이 공백을 넣는 게 좋고, 윗줄은 비워놓아야 함(세로 들여쓰기)
+if (n<=0)  // <- (n <= 0) 같이 공백을 넣는 게 좋고, 윗줄은 비워놓아야 함(세로 들여쓰기)
 {   // <- 별도의 줄에 있는 중괄호
   // 아랫줄같이 가로 길이가 길어지면 가독성을 위해 코드를 여러 줄로 쪼개는 게 좋음  
   alert(`Power ${n} is not supported, please enter an integer number greater than zero`);
@@ -39,7 +39,7 @@ function pow(x, n) {
 let x = prompt("x?", "");
 let n = prompt("n?", "");
 
-if (n < 0) {
+if (n <= 0) {
   alert(`Power ${n} is not supported,
     please enter an integer number greater than zero`);
 } else {

1-js/03-code-quality/02-coding-style/article.md

@@ -285,7 +285,7 @@ function pow(x, n) {
 
 유명 스타일 가이드:
 
-- [Google의 자바스크립트 스타일 가이드](https://google.github.io/styleguide/javascriptguide.xml)
+- [Google의 자바스크립트 스타일 가이드](https://google.github.io/styleguide/jsguide.html)
 - [Airbnb의 자바스크립트 스타일 가이드](https://github.com/airbnb/javascript)
 - [Idiomatic.JS](https://github.com/rwaldron/idiomatic.js)
 - [StandardJS](https://standardjs.com/)

1-js/03-code-quality/04-ninja-code/article.md

@@ -244,4 +244,4 @@ function render() {
 
 - 편법 중 몇 개만 사용해도, 놀라운 코드를 만들 수 있게 됩니다.
 - 편법을 많이 사용하면 유지 보수하기가 힘들어져서 당신을 해고할 수 없게 됩니다. 
-- 편법을 모두 사용하면 후배 개발자들에게 엄청난 영감을 심어줄 수 있습니다.
+- 편법을 모두 사용하면 후배 개발자들에게 엄청난 영감을 심어줄 수 있습니다.