javascript_const、letの変数宣言とテンプレート文字列、アロー関数

React講座を受講しているため、自分のメモとしてまとめます。

JSは動的型付け言語です。変数の中身を自動的に判定してくれます。

const name = 123;
const name1 = "田中さん";
// 変数の型を知りたい時はconsole.log(typeof 変数);
// Javaは静的型付け言語で、型を宣言する必要がある。
// 例：integer int string

var変数は簡単に上書きされることと再宣言されることで、大規模な開発ではミスの原因となります。
let変数：　上書き可能、再宣言は不可能
const変数：　上書きも再宣言も不可能

JavaScriptのオブジェクトや配列については値を変えることができます。

constで定義したオブジェクトはプロパティの変更が可能

constで定義した配列は中身の変更が可能

JSの中に基本constを使います。上書きが必要な変数についてはletを使います。

テンプレート文字列：JSの文字列にコードを埋め込んだ感じです。
構文は＄{}になります。

アロー関数
・引数は（）を省略することができる
・returnを省略することができる {}は書かない
アロー関数の書き方
const 関数名 = (引数)　=> {処理　戻り値};
引数が1個なら（）は不要

• const test = test => test;
  処理が1行なら{}不要、returnも省略
• const tax = (price,tax) => price*tax;

// アロー関数　関数の名前あり
const getItem = () => console.log("アロー");
getItem();

fruits = ["りんご","バナナ","みかん"];
fruits.forEach(function(input){
    console.log(input);
});
// アロー関数　関数の名前なし
fruits.forEach(input => console.log(input));

分割代入

アロー関数filter
MDNの中に、filter()関数についてこのように説明しています。

• filter() は、与えられた callback 関数を配列の各要素に対して一度ずつ呼び出し、callback が true と評価される値を返したすべての要素からなる新しい配列を生成します。

// array.filter()
const scores = [30,40,50,60,70];

const newScores = scores.filter((value)=> value>=40);
console.log(newScores);

アロー関数find()
MDNの中に、find()関数について下記のように説明します。
-find メソッドは、配列のそれぞれの添字に対して一度ずつ、callback 関数を実行し、callback 関数が truthy な値を返すまで繰り返します。

const members = ["本田","田中","中田"];

const member = members.find((value)=> value === "田中");
console.log(member);

array.map()メソッド
MDN内にmap()メソッドについて下記のように解釈しています。

• 与えられた関数を配列のすべての要素に対して呼び出し、その結果からなる新しい配列を生成します。

const userList = [10,20,30,40];
// 文字列とくっ付けるには'${}' バッククォート
const userIdList = userList.map(value => `user_${value}`);

console.log(userIdList);
// logの代わりtableを書くこともできる tableは表形式に表示する
console.table(userIdList);