From 733494801c8948e7d8b817c975604caab549eed4 Mon Sep 17 00:00:00 2001 From: hochan Lee Date: Sun, 15 Aug 2021 22:56:51 +0900 Subject: fix: learn/javascript/objects/basics en-us 동기화 (#1284) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ko/learn/javascript/objects/basics/index.html | 64 ++++++++++++---------- 1 file changed, 36 insertions(+), 28 deletions(-) (limited to 'files/ko/learn') 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 -

객체 기본

+

객체 기본

객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다. 예제를 통해서 실제 객체가 무엇인지 알아보도록 합시다.

@@ -46,13 +46,16 @@ translation_of: Learn/JavaScript/Objects/Basics 
var person = {};
-

이제 JS 콘솔에 person 을 입력하면 다음과 같은 결과를 보게됩니다.

+

이제 브라우저의 JavaScript 콘솔 을 열고 person을 입력 한 다음 Enter/Return을 누르세요. 아래 줄 중 하나와 유사한 결과가 표시됩니다.

-
[object Object]
+
[object Object]
+Object { }
+{ }
+
-

축하합니다, 여러분은 벌써 첫 번째 객체를 생성하였습니다. 하지만 텅 빈 객체여서 우린 이걸로 뭘 할 수는 없습니다. 자, 이제 이 오브젝트를 다음과 같이 고쳐봅시다.

+

축하합니다. 방금 첫번째 객체를 만들었습니다. 잘했어요! 그러나 이것은 빈 객체이므로 실제로 많은 것들을 할 수 없습니다. 파일에서 JavaScript 객체를 다음과 같이 업데이트 해보겠습니다.

-
var person = {
+
const person = {
   name: ['Bob', 'Smith'],
   age: 32,
   gender: 'male',
@@ -66,7 +69,7 @@ translation_of: Learn/JavaScript/Objects/Basics
 };
 

 
-
저장 후 리로드 한 다음에 아래의 내용을 브라우저 개발자 도구의 JavaScript 콘솔에  입력해보세요.

+
저장하고 새로 고침 한 후 브라우저 devtools의 JavaScript 콘솔에 다음 중 일부를 입력 해보세요.

 
 
person.name
 person.name[0]
@@ -75,7 +78,7 @@ person.interests[1]
 person.bio()
 person.greeting()

 
-
자, 이제 당신은 객체에 포함된 데이터와 함수를 갖게 되었으며, 이것들을 간단하고 멋진 문법을 통해 사용할 수 있게되었습니다!

+
이제 객체 내부에 몇 가지 데이터와 기능이 있으며 이제 멋진 간단한 구문으로 액세스 할 수 있습니다!

 
 

 
Note: 만약 여기까지 진행하는데 어려움이 있다면, 제가 만들어놓은 파일과 비교해보세요 — oojs-finished.html (그리고 실행되는 예제도 보세요). Live 버전에서는 텅빈 화면만 보이겠지만, 그게 정상입니다 — 다시, 개발자도구를 열고 객체 구조를 들여다보기 위해 위에 언급된 명령어를 입력해보세요.

@@ -95,7 +98,7 @@ person.greeting()

객체 리터럴을 사용해서 객체를 생성하는 것은 연속된 구조체나 연관된 데이터를 일정한 방법으로 변환하고자 할 때  많이 쓰이는 방법입니다. 예를 들면 서버에게 주소를 데이터베이스에 넣어달라고 요청하는 경우입니다. 각 아이템들을 하나 하나 개별 전송하는 것보다, 하나의 객체를 전송하는 것이 훨씬 효율적입니다. 또 각 아이템들을 이름으로 구분해서 사용하기 원할 때도 배열을 사용하는 것보다 훨씬 쉽습니다.

-

점 표기법

+

점 표기법

위에서, 우리는 객체의 프로퍼티와 메소드를 점 표기법을 통해 접근했습니다. 객체 이름(person)은 네임스페이스처럼 동작합니다. 객체내에 캡슐화되어있는것에 접근하려면 먼저 점을 입력해야합니다. 그 다음 점을 찍고 접근하고자 하는 항목을 적습니다. 간단한 프로퍼티의 이름일 수도 있을 것이고, 배열의 일부이거나 객체의 메소드를 호출할 수도 있습니다.

@@ -103,7 +106,7 @@ person.greeting() person.interests[1] person.bio() -

하위 namespaces

+

하위 namespaces

다른 객체를 객체 멤버의 값으로 갖는 것도 가능합니다. 예를 들면, 다음과 같은 name 멤버를 

@@ -133,7 +136,7 @@ name.last

그렇지 않으면 기존 메소드는 더 이상 동작하지 않을 것입니다.

-

괄호 표기법

+

괄호 표기법

객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있습니다. 다음과 같이 사용하는 대신

@@ -145,9 +148,9 @@ person.name.first 
person['age']
 person['name']['first']
-

이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 연관배열 (associative arrays)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 스트링을 값에 매핑합니다.

+

이런 방식은 배열 속에 있는 항목에 접근하는 방법과 매우 유사해 보이는데 실제로도 이는 기본적으로 동일한 것입니다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하는 대신에 각 멤버의 값들과 연결된 이름을 이용합니다. 객체가 간혹 연관배열 (associative arrays)이라고 불리는 것이 당연합니다. 연관배열은 배열이 숫자를 값에 연결하는 것과 같은 방법으로 문자열을 값에 매핑합니다.

-

객체 멤버 설정하기

+

객체 멤버 설정하기

지금까지는 객체 멤버를 단순히 가져오기만(또는 반환) 했습니다. 설정할 멤버를 간단히 명시하여(점이나 대괄호 표기법을 사용) 객체 멤버의 값을 설정(갱신)하는 것도 물론 가능합니다.

@@ -190,7 +193,7 @@ person[myDataName] = myDataValue;

점 표기법으로는 위의 예제처럼 멤버의 이름을 동적으로 사용할 수 없고, 상수 값만을 사용해야 합니다.

-

"this" 는 무엇인가?

+

"this" 는 무엇인가?

자, 우리가 이제 보게될 메소드가 좀 이상하게 보일 수도 있을겁니다. 예제를 한번 봐주세요

@@ -210,30 +213,30 @@ person[myDataName] = myDataValue; } var person2 = { - name: 'Brian', + name: 'Deepti', greeting: function() { alert('Hi! I\'m ' + this.name + '.'); } } -

이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 person1.greeting() 은 "Hi! I'm Chris." 를 출력합니다. 반면 person2.greeting() 은 "Hi! I'm Brian." 을 출력하게 됩니다. 앞서 이야기한 것처럼, this 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.

+

이 예제에서, 메소드의 실제 코드는 완전히 동일하지만 person1.greeting() 은 "Hi! I'm Chris." 를 출력합니다. 반면 person2.greeting() 은 "Hi! I'm Deepti." 을 출력하게 됩니다. 앞서 이야기한 것처럼, this 은 실행중인 코드가 속해있는 객체입니다. 객체 리터럴을 직접 지정해서 사용하는 경우라면 그리 유용하지 않겠지만, 동적으로 객체를 생성하는 경우(예를 들면 생성자를 사용하는 경우)에는 매우 유용합니다. 이 부분은 추후에 더 명확하게 이해가 될 겁니다.

-

객체를 줄곧 사용해 왔습니다

+

객체를 줄곧 사용해 왔습니다

예제코드를 따라하다보니, 이쯤 되면 슬슬 "점" 표기법을 사용하는 것이 꽤 자연스럽게 느껴질 것입니다. 물론 이 코스 내내 사용했기 때문입니다! 샘플에서 사용하였던 브라우저 내장 API 나 JavaScript 객체들은 실제로 우리가 공부했던 구조와 완전히 동일한 방법으로 구현된 것들입니다. 물론 우리가 봤던 예제보다 복잡하기는 합니다.

-

자, 다음과 같이 String의 메소드를 사용했다고 가정합시다.

+

자, 다음과 같이 문자열의 메소드를 사용했다고 가정합시다.

myString.split(',');
-

String 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 String 을 생성할 때 마다 String 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.

+

String 클래스의 인스턴스가 가진 메소드를 사용하고 있습니다. 코드에서 문자열을 생성할 때 마다 String 의 인스턴스가 만들어지고, 그렇게 만들어진 인스턴스는 당연히 공통적으로 사용할 수 있는 메소드와 프러퍼티를 가집니다.

아래와 같이 도큐먼트 오브젝트 모델(DOM)에 접근할때면,

var myDiv = document.createElement('div');
 var myVideo = document.querySelector('video');
-

Document 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, Document 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을  제공하는 document 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.

+

Document 클래스의 인스턴스를 통해 메소드를 사용하고 있는 것입니다. 각 웹페이지가 로딩될 때, Document 인스턴스가 만들어지고, 전체 웹 페이지 구조와 컨텐츠 그리고 URL같은 기능들을  제공하는 document 가 호출됩니다. 다시 말하지만 이건 여러 공통 메소드와 프로퍼티들이 이 인스턴스를 통해 사용가능하게 됩니다.

우리가 계속 사용해왔던 다른 내장 객체/API(Array, Math 등등)들도 마찬가지입니다

@@ -247,7 +250,12 @@ var myVideo = document.querySelector('video');

Note: 객체간 통신은 message passing 방식을 사용한다고 생각하는게 좋습니다. 한 객체가 다른 객체에게 어떤 액션을 요청해야 하는 경우, 그 객체는 다른 객체가 가지고 있는 메소드를 통해서 메세지를 보내는 것이고, 응답을 기다리는 것입니다. 그 응답은 것이 우리가 알고 있는 return 값입니다.

-

요약

+

실력을 시험해보세요!

+ +

본문의 끝에 도달했지만 가장 중요한 정보를 기억할 수 있나요? 계속 진행하기전에 정보들을 잘 기억하고 있는지 확인하기 위한 몇 가지 추가 테스트를 찾을 수 있습니다. 기술 테스트 : 객체의 기본 사항을 참조하세요.

+ + +

요약

축하합니다, 첫 번째 JavaScript 객체 설명 문서를 끝까지 읽으셨습니다. 이제 여러분은 JavaScript 객체를 어떻게 활용하는지 이해하게 되었습니다. 간단한 사용자 정의 객체를 만드는 방법을 포함해서요. 또 객체는 데이터와 연관된 함수를 저장하는데 매우 유용한 구조라는 것도 알게 되었습니다. 만약 person 객체가 가지고 있는 모든 프로퍼티와 메소드를 따로 따로 분리된 변수와 함수로 구현하려고 한다면 그것이야 말로 비효율적이고 끔찍한 일이 될 것입니다. 변수명과 함수명들이 중복된다거나 하는 일도 비일비재 할 것입니다. 객체는 고유의 패키지에 우리의 정보를 안전하게 정보를 보호해주는 역활을 합니다.

@@ -255,14 +263,14 @@ var myVideo = document.querySelector('video');

{{NextMenu("Learn/JavaScript/Objects/Object-oriented_JS", "Learn/JavaScript/Objects")}}

-

이 모듈 에서는

+

이 모듈 에서는

-- cgit v1.2.3-54-g00ecf