문자열, 숫자, 변수 및 그 사이의 모든 것 

이 책의 첫 번째 초안은 기술을 새로 고치려는 숙련 된 JavaScript 개발자를 대상으로 했습니다. 나는 JavaScript 기초 (나쁜)를 완전히 건너 뛰었고 나중에 귀중한 피드백을 바탕으로 언어에 빠른 재 소개를 추가하기로 결정했습니다. 

그래서 여기 있습니다! JavaScript는 "types"라는 7 개의 레고 브릭을 기반으로 합니다.

https://github.com/valentinogagliardi/Little-JavaScript-Book/blob/v1.0.0/manuscript/chapter2.md 

전체 목록은 다음과 같습니다.

• String
• Number
• Boolean
• Null
• Undefined
• Object
• Symbol (part of ECMAScript 2015)

유형인 Object를 제외하고 다른 모든 것을 언어의 "기본(primitive)"이라고도 합니다. 모든 JavaScript 유형에는 문자열과 같이 코드에서 사용할 수 있는 해당 표현이 있습니다.

var string = "Hello John";

Numbers:

var age = 33;

말하자면 JavaScript에는 산술 연산이 있습니다.

그런 다음 부울이 있습니다.

var not = false;

및 객체 :

var obj = {
  name: "John",
  age: 33
};

JavaScript에서 변수를 선언하는 가장 호환 가능한 방법인 var 키워드를 사용하여 값을 변수에 저장할 수 있습니다.

var greet = "Hello";
var year = 89;
var not = false;

ECMAScript 2015에서는 let과 const라는 두 가지 옵션이 있기 때문에 호환됩니다. 이전 브라우저는 이러한 새 키워드를 지원하지 않을 수 있으며 "변환기"(용어는 1 장 참조)를 사용하지 않으면 오류가 발생할 수 있습니다. 

최신 브라우저에서는 두 가지 방법으로 var와 다른 let 및 const의 이점을 얻을 수 있습니다.

• let과 const 모두 자체 "거품"(범위)을 만듭니다.
• const는 재 할당하거나 다시 선언 할 수 없습니다

"거품"이란 let 또는 const로 선언 된 변수가 묶음 또는 외부 "거품"에 선언 된 동일한 변수 이름과 겹치지 않음을 의미합니다. 예를 들면 다음과 같습니다.

let name = "John";

{
  let name = "Valentino";
  console.log(name); // "Valentino"
}

console.log(name); // "John"

여기서 name은 중복 된 것처럼 보이지만 실제로는 자체 거품에서 두 가지 다른 변수입니다. const는 같은 행동을 합니다 :

const name = "John";

{
  const name = "Valentino";
  console.log(name); // "Valentino"
}

console.log(name); // "John"

대신 var를 사용하는 동일한 코드는 다른 방식으로 동작합니다.

var name = "John";

{
  var name = "Valentino";
  console.log(name); // "Valentino"
}

console.log(name); // "Valentino"

const는 재배치 하거나 같은 거품으로 다시 선언 할 수 없습니다. const를 다시 선언하려고 하면 "SyntaxError : Identifier has already declaration"이 표시됩니다. 그리고 같은 상수에 어떤 값을 다시 할당하면 "TypeError : Assignment to constant variable"이 나타납니다. 다음 예제는 오류를 발생 시킵니다.

const name = "John";
const name = "Valentino";

// SyntaxError: Identifier 'name' has already been declared

이 코드도 발생합니다.

const name = "John";
name = "Valentino";

// TypeError: Assignment to constant variable.

그러나 const를 변경할 수 없는 "const를 다시 할당하거나 다시 선언 할 수 없습니다"라고 말할 때 주의하십시오. 그것은 내가 말한 모든 JavaScript 개발자를 문자 그대로 다루는 주제입니다. 실제로 배열이나 객체와 같이 약간 더 복잡한 JavaScript 데이터 구조는 const에 할당 된 경우에도 변경 가능합니다.

const person = {
  name: "John",
  age: 21
};

person.name = "Valentino";

console.log(person);

// { name: 'Valentino', age: 21 }
// Oh, I wish I was 21 for real!

어떻게 불변입니까? 배열은 다음과 같습니다.

const list = [1, 1, 3, 2, 5];

list.shift();

console.log(list); // [ 1, 3, 2, 5 ]

다시 말하지만, 변경할 수 없습니다. 다음에 누군가가 "불변은 변하지 않는다"고 말하면 몇 가지 요령을 보여주십시오. 그리고 이제 기본으로 돌아갑니다. 독립형 변수 외에도 엔티티 목록 인 배열을 선언 할 수도 있습니다.

var array = ["Hello", 89, false, true];

0부터 시작하여 인덱스로 배열 요소에 액세스 할 수 있습니다.

var array = ["Hello", 89, false, true];
var first = array[0]; // Holds "Hello"

거의 모든 JavaScript 엔터티에는 메서드라는 일부 함수가 연결되어 있습니다. 이름을 2로 지정하기 위해 array에는 자체 조작 방법이 많이 있습니다.

var array = ["Hello", 89, false, true];

array.push(99);
array.shift();

console.log(array); // [ 89, false, true, 99 ];

그리고 문자열도 마찬가지입니다 :

var string = "John";
console.log(string.toUpperCase()); // JOHN

5 장 후반부에서 이러한 메소드의 출처를 알 수 있지만 여기에는 스포일러가 있습니다. 각각 Array.prototype 및 String.prototype에 정의되어 있습니다. 메소드와 함께 문자열 길이에 대한 정보를 추출하는 데 유용한 특성도 있습니다.

var string = "John";
console.log(string.length); // 4

또는 배열의 길이 :

var array = ["Hello", 89, false, true];

array.push(99);
array.shift();

console.log(array.length); // 4

이러한 속성은 "getters"/ "setters"라고 불리기 때문에 다소 특별합니다. 대부분의 JavaScript 유형은 기본이 되는 객체입니다 (이 책의 뒷부분에서 자세히 설명합니다). 많은 메서드와 속성이 연결된 객체와 같은 문자열을 상상할 수 있습니다. 배열의 길이에 액세스 할 때 해당 getter를 호출하는 것입니다. setter 기능은 설정 작업을 시작합니다.

var array = {
  value: ["Hello", 89, false, true],
  push: function(element) {
    //
  },
  shift: function() {
    //
  },
  get length() {
    // gets the length
  },
  set length(newLen) {
    // sets the length
  }
};

// Getter call
var len = array.length

// Setter call
array.length = 50;

이제 기본 사항을 정리 한 후 가장 중요한 JavaScript 유형 중 하나 인 Object를 자세히 살펴 보겠습니다.

Standing on the shoulders of a giant Object 

객체는 거의 모든 다른 엔터티에서 파생되도록 JavaScript에서 가장 중요한 유형입니다. 예를 들어 함수와 배열은 특수 객체입니다. JavaScript의 객체는 다음 예제 (리터럴 형식)와 같이 키 / 값 쌍의 컨테이너입니다.

var obj = {
  name: "John",
  age: 33
};

객체를 생성하는 또 다른 방법이 있지만 드물고 느리므로 피하십시오.

var obj = new Object({
  name: "John",
  age: 33
});

보시다시피 객체는 해당 속성에 액세스하여 나중에 검색 할 수 있는 값을 유지하는 편리한 방법입니다.

var obj = {
  name: "John",
  age: 33
};

console.log(obj.name); // "John"

새 속성을 추가, 삭제 또는 변경할 수도 있습니다.

var obj = {
  name: "John",
  age: 33
};

obj.address = "Some address";
delete obj.name;
obj.age = 89;

객체의 키는 문자열 일 수도 있으며 이 경우 대괄호 표기법으로 속성에 액세스합니다.

var obj = {
  name: "John",
  age: 33,
  "complex key": "stuff"
};

console.log(obj["complex key"]); // "stuff"

그러나 점 표기법이 더 일반적이며 키가 복잡한 문자열이 아닌 경우 전통적인 속성 액세스를 선호해야 합니다.

var obj = {
  name: "John",
  age: 33
};

// Dot notation, more common
console.log(obj.name); // "John"

대괄호 표기법 이상 :

var obj = {
  name: "John",
  age: 33
};

// Bracket notation
// Not so common if the key is a one word string
console.log(obj["name"]); // "John"

이것이 알아야 할 모든 기본 사항이지만 5 장에서는 JavaScript 객체가 실제로 강력하고 더 많은 작업을 수행 할 수 있음을 알 수 있습니다. 이제 JavaScript 함수를 살펴 보겠습니다.

JavaScript 함수의 50 가지 음영 

거의 모든 프로그래밍 언어에는 함수가 있으며 JavaScript는 예외가 아닙니다. 함수는 재사용 가능한 코드입니다. 다음 예를 고려하십시오.

function hello(message) {
  console.log(message);
}

hello("Hello");

과

function sum(a, b) {
  return a + b;
}

var sum = sum(2, 6);

첫 번째 함수는 문자열을 인쇄하고 두 번째 함수는 외부 세계에 값을 반환합니다. 보시다시피 함수는 "서명"함수에 나열된 매개 변수를 승인 할 수 있습니다.

// a and b are parameters in the function's signature
function sum(a, b) {
  return a + b;
}

함수를 호출 할 때 값을 전달할 수 있으며, 이러한 맥락에서 인수의 이름을 사용합니다.

// a and b are parameters in the function's signature
function sum(a, b) {
  return a + b;
}

// 2 and 6 are arguments for the function
var sum = sum(2, 6);

function 키워드로 선언 된 JavaScript 함수는 일반적인 본문이 없는 화살표 함수 (후에 화살표 함수에 대해 자세히 설명하지 않음)와 달리 일반 함수입니다. 정규 함수는 많은 모양을 취할 수 있습니다.

• named function
• anonymous function
• object method
• object method shorthand (ECMAScript 2015)
• IIFE (immediately invoked function expression)

명명 된 함수는 가장 일반적인 유형의 함수입니다.

// A named function
function sum(a, b) {
  return a + b;
}

반면 익명 함수는 이름이 없으며 나중에 사용하기 위해 변수에 할당 할 수 있습니다.

var sum = function(a, b) {
  return a + b;
};

또는 다른 함수 내에서 콜백으로 사용됩니다 (다음 장에서는 콜백에 대해 자세히 설명합니다).

var button = document.createElement("button");

button.addEventListener("click", function(event) {
  // do stuff
});

함수는 JavaScript 객체 안에 있을 수도 있습니다. 그렇다면 우리는 그 객체의 메소드를 (좋은지 나쁜지) 함수라고 부릅니다.

var widget = {
  showModal: function() {
    // do stuff
  }
};

widget.showModal();

일반 함수는 기본적으로 this 키워드를 가져옵니다.이 키워드는 함수 호출 방법에 따라 다른 의미를 취할 수 있습니다. 6 장에서 주제를 자세히 살펴 보겠습니다. 이제는 간단한 규칙을 당연히 받아들입니다. 객체 안에서 실행되는 함수는 이것을 포함하는 객체를 가리킵니다.

var widget = {
  html: "<div></div>",
  showModal: function() {
    console.log(this.html);
  }
};

widget.showModal(); // "<div></div>"

ECMAScript 2015에서는 다음과 같이 객체 방법 속기 및 쓰기 방법을 사용할 수 있습니다.

var widget = {
  showModal() {
    // object method shortand
  }
};

widget.showModal();

마지막으로 IIFE (즉시 호출 된 함수 표현식)가 있습니다. IIFE는 즉시 자신을 호출하는 함수입니다.

var IIFE = (function() {
  // what happens in an IIFE stays in the IIFE
})();

구문은 약간 이상하게 보일 수 있지만 IIFE는 4 장에서 볼 수 있듯이 매우 강력합니다. 일반 함수와 함께 ECMAScript 2015에 추가 된 화살표 함수도 있습니다. 화살표 함수는 함수 키워드를 사용하지 않지만 함수 키워드는 사용하지 않습니다. 비슷한 모양으로 나옵니다.

• named arrow function
• anonymous arrow function
• object method (not so useful)
• IIFE arrow function (immediately invoked function expression)

화살표 함수는 편리하지만 과도하게 사용하지 않는 것이 좋습니다. 다음은 이름이 지정된 화살표 함수입니다. 매개 변수가 없는 경우 return 문을 생략하고 괄호를 사용할 수 있습니다.

const arrow = () => console.log("Silly me");

화살표 함수로 무언가를 계산하거나 다른 함수를 호출 해야 하는 경우 중괄호로 몸체를 열 수 있습니다.

const arrow = () => {
  const a = callMe();
  const b = callYou();
  return a + b;
};

중괄호는 JavaScript 객체를 정의하기 위한 리터럴 형식이므로 다음과 같은 작업을 수행 할 수 있는 것은 아닙니다.

const arrow = () => {
  a : "hello", 
  b: "world"
};

구문이 잘못되어 컴파일 되지 않습니다. 화살표 함수에서 객체를 반환하려면 괄호를 사용할 수 있습니다.

const arrow = () => ({
  a: "hello",
  b: "world"
});

console.log(arrow());
// { a: 'hello', b: 'world' }

또는 훨씬 더 나은 반환 진술 :

const arrow = () => {
  return {
    a: "hello",
    b: "world"
  };
};

일반 익명 함수와 마찬가지로 익명 화살표 함수도 있습니다. 다음은 다른 함수에 대한 콜백으로 전달 된 것입니다.

const arr = [1, 2, 3];

const res = arr.map(element => element + 1);

console.log(res); // [ 2, 3, 4 ]

요소를 매개 변수로 사용하고 각 배열 요소에 대해 요소 + 1을 반환합니다. 화살표 함수에 단일 매개 변수가 있는지 알 수 있듯이 괄호를 묶을 필요는 없습니다.

const fun = singleParameter => singleParameter + 1;

그러나 더 많은 매개 변수가 필요한 경우 괄호가 필요합니다.

const fun = (a, b) => a + b + 1;

화살표 함수는 객체 메서드로 나타날 수도 있지만 일반 함수와 다르게 동작합니다. 함수를 실행 중인 객체에 대한 참조 this키워드를 몇 단락 전에 소개했습니다. 객체 메소드로 호출 될 때 일반 함수는 this을 "호스트"객체로 지정합니다.

var widget = {
  html: "<div></div>",
  showModal: function() {
    console.log(this.html);
  }
};

widget.showModal(); // "<div></div>"

대신 화살표 함수는 완전히 다른 것을 가리키고 있습니다.

var widget = {
  html: "<div></div>",
  showModal: () => console.log(this.html)
};

widget.showModal(); // undefined

이러한 이유로 화살표 함수는 객체 방법으로 적합하지 않지만 흥미로운 사용 사례가 있으며 책에서 효과적으로 사용하는 이유와 시기를 볼 수 있습니다. 결론적으로 IIFE 화살표 함수를 보겠습니다.

(() => {
  console.log("aa");
})();

유효하고 혼란스러운 구문은 그렇지 않습니까? 이제 다음 장으로 넘어 갑시다!

결론 

JavaScript에는 "유형"이라고 하는 7 개의 기본 빌딩 블록이 있으며 그 중 6 개는 "기본"이라고도 합니다. 객체 자체의 유형이며 언어의 가장 중요한 요소이기도 합니다. 객체는 키 / 값 쌍의 컨테이너이며 함수를 포함하여 거의 모든 JavaScript 프리미티브를 포함 할 수 있습니다. 대부분의 다른 프로그래밍 언어와 마찬가지로 JavaScript에는 문자열, 숫자, 함수, 부울 및 Null 및 Undefined라는 특수 유형이 있습니다. JavaScript에는 화살표 함수 (ECMAScript 2015에 추가)와 일반 함수의 두 가지 형태의 함수가 있습니다. 둘 다 사용 사례가 있으며 다른 하나 대신 언제 어떻게 사용하는지 경험을 통해 배우게 됩니다.