プログラミングノート（モダンJavaScript）

はじめに

Udemyの【世界で7万人が受講】Understanding TypeScript 日本語版を参考に一部JavaScriptを学習したので、プログラミングノート（カンペ用ノート）をします。

letとvar

letを使うべき(ベストは全部const)

// varはグローバルスコープまたは関数スコープ
function add(a: number, b: number) {
  var result; // これは関数スコープ
  result = a + b;
  return result;
}

if (age >= 20) {
  var isAdult = true; // これはグローバルスコープ
}
console.log(isAdult); // undefined

// letはブロックスコープ
if (age >= 20) {
  let isAdult = true; // ブロックスコープ
}
console.log(isAdult); // エラーになる

※以前記載の誤りを指摘いただいていましたが、下書きに戻せなかったので、一旦削除して修正後再投稿しました。
　ご指摘いただいた方ありがとうございました。

アロー関数

基本的なアロー関数

const add1 = (a: number, b: number) => {
  return a + b;
};
console.log(add1(2, 5));

右側の中括弧に式が一つの場合は省略可能

const add2 = (a: number, b: number) => a + b;
console.log(add2(2, 5));

パラメータが一つの場合は左の（）が不要

const printOutput: (output: string | number) => void = output => {
  console.log(output);
};
printOutput(add1(2, 5));

※ 「string|number型の引数とvoidの戻り値を定義した関数型」という型定義を最初に入れている

デフォルト値

一番右の引数だけ設定が可能。

const add = (a: number, b: number = 1) => {
  return a + b;
};
console.log(add(2));

スプレッド演算子

const hobbies = ["Sports", "Cooking"];
const activeHobbies = ["Hiking", ...hobbies]; 
activeHobbies.push(...hobbies); 

（おまけ）アドレス渡しと値渡し

const person = {
  name: "Max",
  age: 30,
};

const copiedPerson_address = person; // アドレス渡し。値はコピーしていない。
const copiedPerson_value = {
  ...person,
}; //値渡し

レストパラメータ

任意の数を受け取る

const add3 = (...numbers: number[]) => {
  return numbers.reduce((curResult, curValue) => {
    return curResult + curValue;
  }, 0);
};
const addedNumbers = add3(5, 10, 2, 3.7);
console.log(addedNumbers);

分割代入

配列やオブジェクトを分割して取り出す

const hobbies = ["Sports", "Cooking"];
const activeHobbies = ["Hiking", ...hobbies];

const [hobby1, hobby2, ...remainingHobbies] = hobbies;

オブジェクトの場合

const person = {
  firstName: "Max",
  age: 30,
};

const { firstName: userName, age } = person; //キーをuserNameで上書き