Value Types, Reference Types and Scope in JavaScript - Lee-hyuna/33-js-concepts-kr GitHub Wiki

자바스크립트의 간단한 기록으로 시작하는 시리즈의 두 번째 파트입니다.

자바스크립트에는 객체와 함수라는 두 가지 기본 요소 만 있습니다.

객체와 함수를 이해하고 자바스크립트를 이해합니다.

자바스크립트의 함수는 객체입니다. 사실, 자바스크립트의 모든 것은 객체입니다.

그렇지만 언어는 다른 의미를 가지고 있는 값 유형으로 알려진 특정한 유형 최적화를 포함하고 있습니다. 이는 성능(performance)과 사람들이 값 유형이 특정한 방법으로 작동할것이라고 직관적으로 기대하고 있기 때문입니다.

값 유형은 number, symbol, boolean, null 그리고 undefined입니다. string도 메모리를 저장하기 위해 약간 다른 동작으로 구현되지만 값 유형입니다.

symbol과 별개로 이들은 모두 문법적으로 통용됩니다. 즉, 문자 그대로 프로그램에 쓸 수 있습니다.

var a = 1; // 리터럴 값 1은 'a'라고 표시된 메모리 주소로 복사됩니다.

값 유형에는 복사 의미가 있습니다.

var a = 1;
var b = a;
a = 2;
b === 1; // true: 값 1은 b 뒤에 있는 메모리에 복사됩니다.

정확하게 우리가 기대하는 행동입니다(그리고 이것이 바로 이런식으로 행동하는 이유입니다).
boolean도 마찬가지입니다.

여기 포스트잇에 그린 것은 코드를 실행 한 후 나타나는 렉시컬 환경입니다. 여기서, 두 가지 변수가 어휘 환경에 추가됩니다. a와 b. 이들 값은 렉시컬 환경에서 key - value - pair mapping 으로 저장됩니다.
“Lexical environment(렉시컬 환경)”은 작성된 코드의 관점에서 둘러싼 범위로 정의 된 컨텍스트를 의미합니다.

null 및 undefined는 빈 값을 나타냅니다. null은 유저가 정의한 무언가가 의도적으로 비어있음을 나타냅니다. undefined는 아무것도 없는 것을 나타내는 특별한 값입니다.
null은 모든 객체 상속 체인의 맨 위에도 사용됩니다.

변수가 선언되고 초기화되지 않으면 값은 undefined입니다.
문자열은 문자열과 관련된 고유 한 메모리 문제 때문에 특수 값 유형입니다.(원하는 만큼 길어질 수 있음!)
문자열은 값 유형으로 생각할 수 있지만 미묘한 차이는 할당이 전체 값을 복사하지 않습니다. 대신 구현은 문자열의 단일 표현에 대한 참조를 복사합니다.

내부적으로 유지됩니다.
객체는 참조 유형입니다. 객체는 참조 값을 복사합니다.
객체는 두 가지 방법으로 선언할 수 있습니다.

var o = new Object();

var o = {};

위의 두 가지는 동등합니다. 후자를 객체 리터럴 구문이라고 합니다.

객체를 참조하는 것은 객체 자체 대신에 그 주변을 접근한다는 것을 의미합니다. 이것은 성능의 이유 외에도 대부분의 개발자가 기대하기 때문입니다.

나는 모든것이 객체라는 것을 앞서 언급하였습니다.
이것은 auto-boxing이라는 자바스크립트의 자동 기능에 의해 활성화되는 개념적 규칙입니다.

auto-boxing은 객체처럼 취급 될 때 객체의 값 유형은 boxing 또는 wrapping입니다. 그 뒤에서는 값 유형 인스턴스의 사용 기간 동안 임시 객체가 작성됩니다.

예를 들면:

2.0.toString(); 2.0은 자동으로 boxing되어 toString 메서드를 호출 할 수 있습니다.  (boxing or unboxing)이 있음

이와 같이 값 유형을 포함하여 자바스크립트의 모든 것이 객체라고 말할 수 있습니다 (아무 것도없는 유형은 제외). 어떤 사람들은 자바스크립트가 객체 지향적이지 않다고 말한다. 반대로, 우리가 보았듯이, 언어의 모든 것은 문자 그대로 대상입니다.

다른 중요한 객체 카테고리는 함수입니다. 다음과 같은 함수를 선언합니다.

function functionName() {  // This is a "function declaration".
  // Do something…
}

함수를 표현식 (함수 표현식)으로 정의 할 수도 있습니다. 예를 들면 다음과 같습니다.

var x = function() {};

Aside : 위 표현식은 기술적으로 할당 식에 함수 표현식이 포함된 표현식 문입니다. 또한 함수문에는 이상한 경우가 있다. 이들은 자바스크립트에서 블록 내부에서 선언 된 함수로 정의됩니다. 이들은 표준에서 지원되지 않았지만 브라우저 공급 업체는 역사적으로 호환되지 않는 구현을 했습니다.

if(true) {
  function f() { // A function statement.
   // Do something…
  }
}

이러한 이유로 함수 문은 ES5 이하에서 사용해서는 안됩니다.
참고 : ES6은 함수 명령문에 대한 표준 동작을 정의합니다. 자세한 내용은이 문서의 범위를 벗어납니다.

함수는 객체입니다 (기억하세요, 모든 것은 객체입니다). 이것은 함수에서 함수를 반환하고 함수로 인수로 전달할 수 있음을 의미합니다. 자바스크립트에서 기능은 ‘first-class language citizens’이라고 합니다.

함수를 선언하는 것은 (1) 장면 뒤에 있는 함수 객체의 인스턴스를 새로 만드는 것으로 생각할 수 있습니다.

var f = new Function('console.log("foo");');

(1) 입문서의 경우 설명적 목적. 현실에는 차이가 있다.

여담으로, 이미 약간의 지식이있는 사람들을 위해, 새로운 함수는 전역 범위에서 코드를 실행합니다. Eval은 로컬 범위를 사용합니다. setTimeout은 난독 화 된(obfuscated) 함수 인스턴스입니다.

함수는 자바스크립트에서 범위를 정의합니다.

if(true) {
  var x = 1;
}
console.log(x); // 1 because functions define scope!

위의 내용은 다음과 같습니다.

var x;
if(true) {
  x = 1;
}
console.log(x);

EcmaScript 6에는 블록 범위 지정이 있는 추가 변수 유형인 let 및 const가 있습니다.

if(true) {
  let x = 1;
  const y = 2;
}
console.log(x); // x가 if문 블록으로 스코프 되어있기 때문에 ReferenceError입니다.
console.log(y); // y가 if문 블록으로 스코프 되어있기 때문에 ReferenceError입니다.

범위(Scope)는 변수 이름의 재사용을 제어하고 garbage collector에서 무언가가 도달 할 수없고 수집 할 수있는시기를 결정하는 데 사용되기 때문에 이해하는 것이 중요합니다.

Summary (요약)

자바스크립트는 객체와 함수에 대해 두 가지 중요한 개념만 가지고 있습니다. 모든 것은 자바스크립트의 객체이며 이것은 객체 지향 언어입니다.

값 유형은 숫자, boolean 및 문자열에 대해 더 나은 성능과 덜 놀라운 의미를 가능하게하는 최적화입니다.

자바스크립트의 범위는 함수에 의해 정의되지만 다가오는 Ecmascript 6에서 블록(block)은 특정 유형의 변수 선언에 대한 범위 지정을 제공합니다.

이 시리즈는 사용자 정의 유형 및 자바스크립트 호이스팅을 계속합니다.

내 이름은 Ben Aston이며 오늘 내 게시물을 읽어 주셔서 감사합니다. 저는 런던에 본사를 둔 자바스크립트 컨설턴트로서 전세계에서 단기 컨설팅을 제공합니다. [email protected]에 연락 할 수있습니다.

자바스크립트에 대한 지식을 더 발전시키고 싶다면, 내 실습 과정에 관심을 가질 수 있습니다. 자세한 내용은 온라인으로 www.learnjavascript.london에서 찾을 수 있습니다.

이 작품을 즐기신 분은 아래의 "recommend" 버튼을 클릭하여 알려 주십시오.

자바스크립트에서 클로저에 대한 게시물에 관심이있을 수도 있습니다.