fix: learn/javascript/objects/basics en-us 동기화 (#1284)

1 files changed, 36 insertions, 28 deletions

diff --git a/files/ko/learn/javascript/objects/basics/index.html b/files/ko/learn/javascript/objects/basics/index.html
index 4220f9bafc..a31c5ed163 100644
--- a/files/ko/learn/javascript/objects/basics/index.html
+++ b/files/ko/learn/javascript/objects/basics/index.html
@@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Objects/Basics
  </tbody>
 </table>
 
-<h2 id="객체_기본">객체 기본</h2>
+<h2 id="Object_basics">객체 기본</h2>
 
 <p>객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 합시다.</p>
 
@@ -46,13 +46,16 @@ translation_of: Learn/JavaScript/Objects/Basics
 
 <pre class="brush: js">var person = {};</pre>
 
-<p>이제 JS 콘솔에 <code>person</code> 을 입력하면 다음과 같은 결과를 보게됩니다.</p>
+<p>이제 브라우저의 <a href="/ko/docs/Learn/Common_questions/What_are_browser_developer_tools#the_javascript_console">JavaScript 콘솔</a> 을 열고 <code>person</code>을 입력 한 다음 <kbd>Enter</kbd>/<kbd>Return</kbd>을 누르세요. 아래 줄 중 하나와 유사한 결과가 표시됩니다.</p>
 
-<pre class="brush: js">[object Object]</pre>
+<pre class="brush: js">[object Object]
+Object { }
+{ }
+</pre>
 
-<p>축하합니다, 여러분은 벌써 첫 번째 객체를 생성하였습니다. 하지만 텅 빈 객체여서 우린 이걸로 뭘 할 수는 없습니다. 자, 이제 이 오브젝트를 다음과 같이 고쳐봅시다.</p>
+<p>축하합니다. 방금 첫번째 객체를 만들었습니다. 잘했어요! 그러나 이것은 빈 객체이므로 실제로 많은 것들을 할 수 없습니다. 파일에서 JavaScript 객체를 다음과 같이 업데이트 해보겠습니다.</p>
 
-<pre class="brush: js">var person = {
+<pre class="brush: js">const person = {
   name: ['Bob', 'Smith'],
   age: 32,
   gender: 'male',
@@ -66,7 +69,7 @@ translation_of: Learn/JavaScript/Objects/Basics
 };
 </pre>
 
-<p>저장 후 리로드 한 다음에 아래의 내용을 브라우저 개발자 도구의 JavaScript 콘솔에  입력해보세요.</p>
+<p>저장하고 새로 고침 한 후 브라우저 devtools의 JavaScript 콘솔에 다음 중 일부를 입력 해보세요.</p>
 
 <pre class="brush: js">person.name
 person.name[0]
@@ -75,7 +78,7 @@ person.interests[1]
 person.bio()
 person.greeting()</pre>
 
-<p>자, 이제 당신은 객체에 포함된 데이터와 함수를 갖게 되었으며, 이것들을 간단하고 멋진 문법을 통해 사용할 수 있게되었습니다!</p>
+<p>이제 객체 내부에 몇 가지 데이터와 기능이 있으며 이제 멋진 간단한 구문으로 액세스 할 수 있습니다!</p>
 
 <div class="note">
 <p><strong>Note</strong>: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — <a href="https://github.com/mdn/learning-area/blob/master/javascript/oojs/introduction/oojs-finished.html">oojs-finished.html</a> (그리고 <a href="http://mdn.github.io/learning-area/javascript/oojs/introduction/oojs-finished.html">실행되는 예제도 보세요</a>). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.</p>
@@ -95,7 +98,7 @@ person.greeting()</pre>
 
 <p>객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때  많이 쓰이는 방법입니다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우입니다. 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 또 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽습니다.</p>
 
-<h2 id="점_표기법">점 표기법</h2>
+<h2 id="Dot_notation">점 표기법</h2>
 
 <p>위에서, 우리는 객체의 프로퍼티와 메소드를 <strong>점 표기법</strong>을 통해 접근했습니다. 객체 이름(person)은 <strong>네임스페이스</strong>처럼 동작합니다. 객체내에 <strong>캡슐화되어있는</strong>것에 접근하려면 먼저 점을 입력해야합니다. 그 다음 점을 찍고 접근하고자 하는 항목을 적습니다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.</p>
 
@@ -103,7 +106,7 @@ person.greeting()</pre>
 person.interests[1]
 person.bio()</pre>
 
-<h3 id="하위_namespaces">하위 namespaces</h3>
+<h3 id="Sub-namespaces">하위 namespaces</h3>
 
 <p>다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다. 예를 들면, 다음과 같은 name 멤버를 </p>
 
@@ -133,7 +136,7 @@ name.last</pre>
 
 <p>그렇지 않으면 기존 메소드는 더 이상 동작하지 않을 것입니다.</p>
 
-<h2 id="괄호_표기법">괄호 표기법</h2>
+<h2 id="Bracket_notation">괄호 표기법</h2>
 
 <p>객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있습니다. 다음과 같이 사용하는 대신</p>
 
@@ -145,9 +148,9 @@ person.name.first</pre>
 <pre class="brush: js">person['age']
 person['name']['first']</pre>
 
-<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 스트링을 값에 매핑합니다.</p>
+<p>이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 <strong>연관배열 (associative arrays</strong>)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 문자열을 값에 매핑합니다.</p>
 
-<h2 id="객체_멤버_설정하기">객체 멤버 설정하기</h2>
+<h2 id="Setting_object_members">객체 멤버 설정하기</h2>
 
 <p>지금까지는 객체 멤버를 단순히 가져오기만(또는 <strong>반환</strong>) 했습니다. 설정할 멤버를 간단히 명시하여(점이나 대괄호 표기법을 사용) 객체 멤버의 값을 <strong>설정</strong>(갱신)하는 것도 물론 가능합니다.</p>
 
@@ -190,7 +193,7 @@ person[myDataName] = myDataValue;</pre>
 
 <p>점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.</p>
 
-<h2 id="this_는_무엇인가">"this" 는 무엇인가?</h2>
+<h2 id="What_is_this">"this" 는 무엇인가?</h2>
 
 <p>자, 우리가 이제 보게될 메소드가 좀 이상하게 보일 수도 있을겁니다. 예제를 한번 봐주세요</p>
 
@@ -210,30 +213,30 @@ person[myDataName] = myDataValue;</pre>
 }
 
 var person2 = {
-  name: 'Brian',
+  name: 'Deepti',
   greeting: function() {
     alert('Hi! I\'m ' + this.name + '.');
   }
 }</pre>
 
-<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Brian." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p>
+<p>이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 <code>person1.greeting()</code> 은 "Hi! I'm Chris." 를 출력합니다. 반면 <code>person2.greeting()</code> 은 "Hi! I'm Deepti." 을 출력하게 됩니다. 앞서 이야기한 것처럼, <code>this</code> 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.</p>
 
-<h2 id="객체를_줄곧_사용해_왔습니다">객체를 줄곧 사용해 왔습니다</h2>
+<h2 id="Youve_been_using_objects_all_along">객체를 줄곧 사용해 왔습니다</h2>
 
 <p>예제코드를 따라하다보니, 이쯤 되면 슬슬 "점" 표기법을 사용하는 것이 꽤 자연스럽게 느껴질 것입니다. 물론 이 코스 내내 사용했기 때문입니다! 샘플에서 사용하였던 브라우저 내장 API 나 JavaScript 객체들은 실제로 우리가 공부했던 구조와 완전히 동일한 방법으로 구현된 것들입니다. 물론 우리가 봤던 예제보다 복잡하기는 합니다.</p>
 
-<p>자, 다음과 같이 String의 메소드를 사용했다고 가정합시다.</p>
+<p>자, 다음과 같이 문자열의 메소드를 사용했다고 가정합시다.</p>
 
 <pre class="brush: js">myString.split(',');</pre>
 
-<p><code><a href="https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 String 을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p>
+<p><code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/String">String</a></code> 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 문자열을 생성할 때 마다 <code>String</code> 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.</p>
 
 <p>아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할때면,</p>
 
 <pre class="brush: js">var myDiv = document.createElement('div');
 var myVideo = document.querySelector('video');</pre>
 
-<p><code><a href="https://developer.mozilla.org/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을  제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p>
+<p><code><a href="/ko/docs/Web/API/Document">Document</a></code> 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, <code>Document</code> 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을  제공하는 <code>document</code> 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.</p>
 
 <p>우리가 계속 사용해왔던 다른 내장 객체/API(<code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Array">Array</a></code>, <code><a href="/ko/docs/Web/JavaScript/Reference/Global_Objects/Math">Math</a></code> 등등)들도 마찬가지입니다</p>
 
@@ -247,7 +250,12 @@ var myVideo = document.querySelector('video');</pre>
 <p><strong>Note</strong>: 객체간 통신은 <strong>message passing</strong> 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.</p>
 </div>
 
-<h2 id="요약">요약</h2>
+<h2 id="Test_your_skills!">실력을 시험해보세요!</h2>
+
+<p>본문의 끝에 도달했지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기전에 정보들을 잘 기억하고 있는지 확인하기 위한 몇 가지 추가 테스트를 찾을 수 있습니다. <a href="/en-US/docs/Learn/JavaScript/Objects/Test_your_skills:_Object_basics">기술 테스트 : 객체의 기본 사항</a>을 참조하세요.</p>
+
+
+<h2 id="Summary">요약</h2>
 
 <p>축하합니다, 첫 번째 JavaScript 객체 설명 문서를 끝까지 읽으셨습니다. 이제 여러분은 JavaScript 객체를 어떻게 활용하는지 이해하게 되었습니다. 간단한 사용자 정의 객체를 만드는 방법을 포함해서요. 또 객체는 데이터와 연관된 함수를 저장하는데 매우 유용한 구조라는 것도 알게 되었습니다. 만약 <code>person</code> 객체가 가지고 있는 모든 프로퍼티와 메소드를 따로 따로 분리된 변수와 함수로 구현하려고 한다면 그것이야 말로 비효율적이고 끔찍한 일이 될 것입니다. 변수명과 함수명들이 중복된다거나 하는 일도 비일비재 할 것입니다. 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역활을 합니다.</p>
 
@@ -255,14 +263,14 @@ var myVideo = document.querySelector('video');</pre>
 
 <p>{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}</p>
 
-<h2 id="이_모듈_에서는">이 모듈 에서는</h2>
+<h2 id="In_this_module">이 모듈 에서는</h2>
 
 <ul>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li>
- <li><a href="https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/Basics">객체 기본</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/Object-oriented_JS">입문자를위한 객체 지향 JavaScript</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/Object_prototypes">객체 프로토타입</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/Inheritance">JavaScript 에서의 상속</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/JSON">JSON 데이터와 작업</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/Object_building_practice">객체 생성 실습</a></li>
+ <li><a href="/ko/docs/Learn/JavaScript/Objects/Adding_bouncing_balls_features">bouncing balls demo 에 기능들 추가하기</a></li>
 </ul>