최신 JavaScript 구문을 사용한 모범 사례

이 기사는 우리의 책(JavaScript : Best Practice)에 소개되어 있습니다. 최신 JavaScript의 급변하는 모범 사례를 유지하십시오.

최신 JavaScript는 새로운 프레임워크 및 환경의 변화하는 요구를 충족시키기 위해 빠르게 발전하고 있습니다. 이러한 변경 사항을 활용하는 방법을 이해하면 시간을 절약하고 기술을 향상 시키며 좋은 코드와 훌륭한 코드의 차이를 표시 할 수 있습니다.

최신 JavaScript가 무엇을하려고 하는지 알면 새로운 구문을 가장 유리하게 사용할 때와 기존 기술을 사용하는 것이 적절한시기를 결정하는 데 도움이됩니다.

뭔가에 집착하는 것

요즘 JavaScript를 처음 접했거나 한동안 코드를 작성해온 사람이든, JavaScript 상태에 혼란스러워하는 사람은 없습니다. 수많은 새로운 프레임 워크, 언어에 대한 많은 변화, 그리고 고려해야 할 많은 맥락이 있습니다. 우리가 매달 배워야 할 모든 새로운 것들을 가지고 누구나 어떤 일을 해내게 되는 것에 놀라운 일입니다.

응용 프로그램이 아무리 복잡하더라도 모든 프로그래밍 언어로 성공하는 비결은 기본으로 돌아가고 있다고 생각합니다. Rails를 이해하려면 먼저 Ruby 기술을 익히고, isomorphic React에서 불변성 및 단방향 데이터 흐름을 사용하려는 경우 webpack을 사용하여(또는 요즘 시원한 괴짜들이 수행하는 작업 (or whatever the cool nerds are doing these days)) 핵심 JavaScript를 알아야합니다.

언어 자체의 작동 방식을 이해하는 것은 최신 프레임 워크와 환경에 익숙해지는 것보다 훨씬 실용적입니다. 심지어 날씨보다 빠르게 변화합니다. 그리고 JavaScript를 통해 우리는 온라인에서 JavaScript가 어떻게 만들어졌는지, 어떻게 효과적으로 사용할 수 있는지에 대한 사려 깊은 정보가 오래 전부터 있습니다.

문제는 최신 버전의 JavaScript와 함께 제공된 새로운 기술중 일부는 기존 규칙 일부를 사용하지 못하는 점입니다. 그러나 모두 그런건 아닙니다! 때로는 새로운 구문이 복잡한 작업을 대체하여 동일한 작업을 수행 할 수 있습니다. 다른 경우에는 새로운 접근 방식이 기존 방식을 대체하는 간단한 대체 방식처럼 보일 수 있지만 미묘한 차이가 있으므로 그 점을 인식하는 것이 중요합니다.

Syntactic Sugar 한스푼

최근 몇년 동안 JavaScript의 많은 변화가 기존 구문에 대한 Syntactic Sugar로 묘사되었습니다.
많은 경우에, Syntactic Sugar는 자바 프로그래머가 JavaScript를 사용하는 방법을 배우는 데 도움이 될 수 있거나, 나머지 사람들은 우리가 이미 알고 있는 일을 성취하기 위한 더 깨끗하고 간단한 방법을 원할 뿐입니다. 다른 변화들은 마법의 새로운 능력을 도입하는 것처럼 보입니다.

그러나 현대적인 구문을 사용하여 익숙한 오래된 기술을 다시 만들거나 실제로 작동하는 방식을 이해하지 않고 적용하려는 경우 다음과 같은 위험이 있습니다.

• 이전에 완벽하게 작동 한 코드를 디버깅해야 함
• 런타임에 잡을 수 있는 미묘한 실수를 소개
• 예상하지 못한 경우 실패하는 코드 작성

사실, 기존 기술을 대체 할 수있는 것으로 보이는 몇 가지 변경 사항은 실제로 대체 할 코드와 다르게 작동합니다. 대부분의 경우 원래의 오래된 스타일을 사용하여 수행하려는 작업을 수행하는 것이 더 합리적입니다. 효과적인 최신 JavaScript를 작성하려면 이러한 상황이 언제인지 인식하고 선택 방법을 알아야합니다.

당신의 const가 일관성이 없을 때

최신 JavaScript는 let과 const라는 두 가지 새로운 키워드를 도입하여 대부분의 변수 선언시 var의 필요성을 효과적으로 대체합니다. 그러나 var와 동일한 방식으로 동작하지는 않습니다.

기존 JavaScript에서는 변수를 사용하기 전에 var키워드로 변수를 선언하는 것이 항상 깨끗한 코딩 관행이었습니다. 그렇게하지 않으면 선언 한 변수에 동일한 컨텍스트에서 실행 된 스크립트를 통해 전역 스코프에서 액세스 할 수 있습니다.
그리고 기존 JavaScript는 여러 스크립트가 동시에 로드 될 수있는 웹 페이지에서 자주 실행 되었기 때문에 한 스크립트에서 선언 된 변수가 다른 스크립트로 누출될 수 있습니다.

최신 JavaScript에서 var를 가장 깨끗하게 드롭 인 대체 할 수 있습니다. 그러나 var와 구별되는 몇 가지 특성이 있습니다. var를 사용하는 변수 선언은 해당 스코프 내부에 배치 된 위치에 관계없이 기본적으로 포함된 스코프의 상단에 항상 올려져 있습니다. 즉, 깊이 중첩 된 변수조차도 포함된 스코프의 시작 부분에서 선언되고 사용 가능한 것으로 간주 될 수 있습니다. let 또는 const도 마찬가지입니다.

console.log(usingVar); // undefined
var usingVar = "defined";
console.log(usingVar); // "defined"

console.log(usingLet); // error
let usingLet = "defined"; // never gets executed
console.log(usingLet); // never gets executed

let 또는 const를 사용하여 변수를 선언하면 해당 변수의 스코프는 선언 된 로컬 블록으로 제한됩니다. JavaScript의 블록은 함수 본문 또는 루프 내의 실행 코드와 같은 중괄호 {}로 구분됩니다.

이는 반복자 및 루프와 같은 변수의 블록 스코프 사용에 매우 편리합니다. 이전에는 루프 내에서 선언 된 변수를 포함하는 스코프에서 사용할 수 있었으므로 여러 카운터가 동일한 변수 이름을 사용할 경우 혼동 될 수 있습니다. 그러나 스크립트의 한 블록 내에서 선언 된 변수가 다른 곳에서 사용 가능할 것으로 기대한다면 let은 당신을 잡을 수 있습니다.

for (var count = 0; count < 5; count++) {
  console.log(count);
} // outputs the numbers 0 - 4 to the console
console.log(count); // 5


for (let otherCount = 0; otherCount < 5; otherCount++) {
  console.log(otherCount);
} // outputs the numbers 0 - 4 to the console
console.log(otherCount); // error, otherCount is undefined

다른 대체 선언은 const이며 상수를 나타냅니다. 그러나 완전히 일정하지는 않습니다.

이 변수는 var또는 let변수와 달리 값없이 선언 할 수 없습니다.

var x; // valid
let y; //valid
const z; // error

const 선언 된 후에 새로운 값으로 설정하려고 하면 오류가 발생합니다.

const z = 3; // valid
z = 4; // error

그러나 모든 경우에 const가 불변인 것으로 예상할 경우 const로 선언 된 객체 또는 배열이 내용을 변경할 수 있게 되면 깜짝 놀랄 수 있습니다.

const z = []; // valid
z.push(1); // valid, and z is now [1]
z = [2] // error

이런 이유로, 사람들이 선언 된 후에는 절대로 변경하지 않으려는 의도를 가지고 있을때 모든 변수 선언에 대해 var대신 const 상수를 사용하는 것이 좋습니다.

변수를 변경할 수없는 것으로 취급하는 것이 좋지만 JavaScript는 외부 스크립트의 도움없이 const로 선언된 배열 및 객체와 같은 참조 변수의 내용에 대해서는 이를 적용하지 않습니다. 따라서 const키워드를 사용하면 일반 독자와 JavaScript 사용자가 실제로 제공하는 것보다 더 많은 보호를 기대할 수 있습니다.

초기화하고 변경하고 싶지 않은 간단한 숫자 또는 문자열 변수, 한 번 정의 한 다음 수정을 위해 닫아두기를 기대하는 이름이 지정된 함수 및 클래스에 const를 사용하는 경향이 있습니다. 그렇지 않으면 대부분의 변수 선언에 let을 사용합니다. 특히 선언 된 범위에 의해 경계를 정합니다. 최근에 var를 사용해야 할 필요성을 발견하지 못했지만 범위를 벗어나고 스크립트 상단에 오르는 선언을 원한다면 그렇게해야합니다.

함수 스코프 제한

function 키워드를 사용하여 정의 된 기존 함수는 호출 된 매개 변수에 대해 블록 내에 정의 된 일련의 명령문을 실행하고 선택적으로 값을 리턴하도록 호출 할 수 있습니다.

function doSomething(param) {
  return(`Did it: ${param}`);
}
console.log(doSomething("Hello")); // "Did it: Hello"

또한 new 키워드와 함께 프로토 타입 상속을 가진 객체를 구성 할 수 있으며, 그 정의는 호출 될 수있는 스코프 내 어느 곳에 나 배치 할 수 있습니다.

function Animal(name) {
  this.name = name;
}
let cat = new Animal("Fluffy");
console.log(`My cat's name is ${cat.name}.`); // "My cat's name is Fluffy."

이러한 방식 중 하나로 사용되는 함수는 호출 전후에 정의 할 수 있습니다. JavaScript는 중요하지 않습니다.

console.log(doSomething("Hello")); // "Did it: Hello"

let cat = new Animal("Fluffy");
console.log(`My cat's name is ${cat.name}.`); // "My cat's name is Fluffy."

function doSomething(param) {
  return(`Did it: ${param}`);
}
function Animal(name) {
  this.name = name;
}

기존 함수는 고유한 컨텍스트를 작성하여 명령문 본문의 스코프 내에서만 존재하는 값을 정의합니다. 그 안에 정의된 명령문이나 하위 함수가 실행 중이며 선택적으로 함수를 호출 할 때 이에 대한 값을 바인딩 할 수 있습니다.

이는 키워드가 많으며 일반적으로 프로그래머가 필요로 하는 것 이상입니다. 따라서 최신 JavaScript는 기존 함수의 동작을 화살표 함수와 클래스로 분리합니다.

Getting to Class on Time

기존 function의 일부는 class키워드에 의해 인수되었습니다. 이를 통해 프로그래머는 호출 가능한 화살표 함수로 보다 기능적인 프로그래밍 패러다임을 따르거나 클래스와 함께 보다 객체 지향적인 접근 방식을 사용하여 기존 함수의 프로토 타입 상속을 대체할지 여부를 선택할 수 있습니다.

JavaScript의 클래스는 다른 객체 지향 언어의 간단한 클래스와 매우 유사하게 보이고 작동하며 JavaScript가 서버로 확장 됨에 따라 Java 및 C ++ 개발자에게는 쉬운 디딤돌이 될 수 있습니다.

JavaScript에서 객체 지향 프로그래밍을 수행 할 때 함수와 클래스의 한 가지 차이점은 JavaScript의 클래스는 C++에서와 같이 (Java에서는 아니지만) 순방향 선언이 필요하다는 것입니다. 즉, new키워드로 인스턴스화하기 전에 스크립트에서 class를 선언해야합니다. function키워드를 사용한 프로토타입 상속은 스크립트에서 나중에 정의하더라도 JavaScript에서 작동합니다. function선언은 class와는 달리 자동으로 맨 위로 올라 가기 때문입니다.

// Using a function to declare and instantiate an object (hoisted)
let aProto = new Proto("Myra");
aProto.greet(); // "Hi Myra"

function Proto(name) {
  this.name = name;
  this.greet = function() {
    console.log(`Hi ${this.name}`);
  };
};

// Using a class to declare and instantiate an object (not hoisted)
class Classy {
  constructor(name) {
    this.name = name;
  }
  greet() {
    console.log(`Hi ${this.name}`);
  }
};

let aClassy = new Classy("Sonja");
aClassy.greet(); // "Hi Sonja"

화살표 함수와의 차이점

기존 함수의 다른 측면은 이제 화살표 함수를 사용하여 액세스 할 수 있습니다. 새로운 구문은 호출 가능한 함수를보다 간결하게 작성하여 콜백에서 보다 깔끔하게 맞출 수 있도록합니다. 실제로, 화살표 함수의 가장 간단한 구문은 중괄호를 완전히 없애고 실행된 명령문의 결과를 자동으로 반환하는 단일 행입니다.

const traditional = function(data) {
  return (`${data} from a traditional function`);
}
const arrow = data => `${data} from an arrow function`;

console.log(traditional("Hi")); // "Hi from a traditional function"
console.log(arrow("Hi"));  // "Hi from an arrow function"

화살표 함수는 여러 가지 특성을 캡슐화하여 더 편리하게 부를 수 있으며, 함수를 부를 때 유용하지 않은 다른 행동을 배제합니다. 보다 다양한 기존 function키워드를 대체하는 것은 아닙니다.

예를 들어, 화살표 함수는 this와 arguments를 호출 된 컨텍스트에서 상속합니다. 프로그래머가 요청 된 컨텍스트에 적용하기 위해 호출되는 동작을 자주 원할 때 이벤트 처리 또는 setTimeout과 같은 상황에 유용합니다. 기존 함수는 프로그래머가 .bind(this)를 사용하여 기존 this에 함수를 바인딩하는 복잡한 코드를 작성하도록 강요했습니다. 화살표 함수에는 필요하지 않습니다.

class GreeterTraditional {
  constructor() {
    this.name = "Joe";
  }
  greet() {
    setTimeout(function () {
      console.log(`Hello ${this.name}`);
    }, 1000); // inner function has its own this with no name
  }
}
let greeterTraditional = new GreeterTraditional();
greeterTraditional.greet(); // "Hello "

class GreeterBound {
  constructor() {
    this.name = "Steven";
  }
  greet() {
    setTimeout(function () {
      console.log(`Hello ${this.name}`);
    }.bind(this), 1000); // passing this from the outside context
  }
}
let greeterBound = new GreeterBound(); // "Hello Steven"
greeterBound.greet();

class GreeterArrow {
  constructor() {
    this.name = "Ravi";
  }
  greet() {
    setTimeout(() => {
      console.log(`Hello ${this.name}`);
    }, 1000); // arrow function inherits this by default
  }
}
let greeterArrow = new GreeterArrow();
greeterArrow.greet(); // "Hello Ravi"

Understand What You’re Getting

이것은 단지 syntactic sugar가 아닙니다. 새로운 기능이 필요했기 때문에 JavaScript의 많은 새로운 변경 사항이 도입되었습니다. 그러나 JavaScript의 기존 구문에 대한 오래된 이유가 사라졌다는 것을 의미하지는 않습니다. 종종 기존 JavaScript 구문을 계속 사용하는 것이 합리적이며, 때로는 새로운 구문을 사용하면 코드를 훨씬 빨리 작성하고 이해하기 쉽게 만들 수 있습니다.

팔로우하는 온라인 자습서를 확인하십시오. 작성자가 var를 사용하여 모든 변수를 초기화하고 프로토타입 상속을 선호하는 클래스를 무시하거나 콜백의 function문에 의존하는 경우 나머지 구문은 구어적이며, 기존의 JavaScript를 기반으로 할 것으로 예상 할 수 있습니다. 그리고 그건 괜찮습니다. 오늘날 JavaScript가 항상 가르쳐지고 사용된 기존 방식을 통해 배우고 적용 할 수있는 것들이 여전히 많습니다. 그러나 초기화에서 let과 const, 콜백의 화살표 함수 및 클래스를 객체 지향 패턴의 기초로 보는 경우 아마도 예제에서 다른 최신 JavaScript 코드도 볼 수 있습니다.

현대 JavaScript에서 가장 좋은 방법은 언어가 실제로하는 일에주의를 기울이는 것입니다. 익숙한 것에 따라 항상 명확하지 않을 수도 있습니다. 그러나 작성중인 코드가 달성하려는 목표, 배포해야 할 위치 및 다음에 누가 수정해야하는지 생각해보십시오. 그런 다음 최선의 방법이 무엇인지 스스로 결정하십시오.

번역 페이지 주소 : https://www.sitepoint.com/modern-javascript-best-practices/