SFDC：TrailheadのモダンなJavascriptのモジュールやってみました

TrailheadのモダンなJavascriptのモジュールやってみました。まだ日本語翻訳されていないモジュールなのでGoogle Chromeの翻訳機能で日本語変換してチェックしました。

Get Started with Modern JavaScript Development Unit | Salesforce

JavaScript ES6 の新しい構文を調べる

概要

関数とブロックのスコープの違いを説明してください。
const キーワードを使用する理由を述べてください。
変数の初期化に使用される省略形の ES6+ 構文を認識します。
データを分離するために使用される新しい構造化構文を特定します。
テンプレートリテラルの作成に使用されるバッククォート文字を特定します。

関数とブロックのスコープ

サンプルコード1

var myVar = 1;
function myFunc() {
  var myVar = 2;
  console.log(myVar); 
}
myFunc();
console.log(myVar);

サンプルコード2

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

ポイント

ブロックは、中括弧内の任意のコードです。ブロックスコープにより、これらの中かっこ内で定義された変数がグローバル変数にならないことが保証されます。代わりに、ローカルスコープがあります。変数のスコープ方法をこのように制御すると、コードでの予期しない動作を防ぐのに役立ちます。

Let Is 新しい Var

letについての解説。

Const

サンプルコード1

constは定数の宣言。値は再代入できない。宣言時に初期化する必要がある。
初期化しなかったときにエラーになることを確認できるサンプル。

const BRANDCOLOR;
console.log(BRANDCOLOR);

The constant "BRANDCOLOR" must be initialized

その他

サンプルコード1

const BRANDCOLOR = {
  primary: "blue",
  accent: "teal"
}

BRANDCOLOR.accent = 'gray';
console.log(BRANDCOLOR);

サンプルコード2

let firstName = 'John', lastName = 'Doe';
let user = {
  firstName : firstName,
  lastName : lastName
}
console.log(user);

次の書き方もできる。

let firstName = 'John!', lastName = 'Doe';
let user = { firstName, lastName };
console.log(user);

サンプルコード3

let one = numbers[0],
  two = numbers[1],
  three = numbers[2],
  four = numbers[3];
console.log(one);

次の書き方もできる

let numbers = [1, 2, 3, 4]; 
let [one, two, three, four] = numbers;
console.log(one);

こういうふうに変数宣言省略もできる。

let numbers = [1, 2, 3, 4]; 
let [ , , three] = numbers;
console.log(three);

オブジェクトの場合

const APPLE = {
  type: 'red delicious',
  color: 'red',
  size: 'large'
}

const { type, color } = APPLE;
console.log(color);

存在しない変数名を使用するとundefined

const APPLE = {
  type: 'red delicious',
  color: 'red',
  size: 'large'
}

const { type, color, size, packaging } = APPLE;
console.log(packaging);

より良いエラーメッセージ

console.logのエラーメッセージのカスタマイズ。 (値差し込み)

let user = 'Me';
console.log(`The following 'user', ${user} has encountered an "error".`);

JavaScript 関数を理解する

関数の太い矢印の構文を認識します。
thisキーワードで使用する範囲を記述します。
ES6+ でオプションのパラメーターを定義すると、コードがよりクリーンになる理由を説明してください。
...''演算子のさまざまな用途を説明してください。

書き方サンプル

let result = function (i,j) {
  return i+j; 
}
console.log(result(2,3));

アロー関数を使うやり方

let result = (i,j) => i+j; 
console.log(result(2,3));

ポイント

ここで行ったのは、キーワードとキーワードを削除し、function代わりreturnに新しい太い矢印記号を使用したことだけです。パラメーターが 1 つしかない場合、括弧は省略可能です。式が複数ある場合は、中括弧のみが必要です。中括弧を含める場合は、returnキーワードが必要であることを覚えておいてください。
thisアロー関数を使用すると、特にネストされた関数が関係する場合に、コードが少なくなり、キーワードを処理する際の混乱が解消されます。関数にはと呼ばれる特別な変数がありthis、これはしばしば「動的 this」と呼ばれ、関数の呼び出しに使用されるオブジェクトを参照します。