Reactを学ぶために覚えたいJavascriptの基礎文法

目的

Reactを自己学習しています。その中でReactを学ぶにはjavascriptへの理解が必要であり、最低限の基礎的な文法をまとめました。自分の備忘録でもあり、これも学んだ方がいいというものがあれば、ぜひともコメントをお願いします。

テンプレート文字列

${変数}のように記述する。javascriptでの変数や式はだいたい{}内に書く

const name = "いとと";
 const age = "28";
 const message2 = `私の名前は${name}です。年齢は${age}です。`;
 console.log(message2);// 私の名前はいととです。年齢は28歳です。

アロー関数

矢印=>を使って関数を定義する。従来のようにfunctionを使って定義をしなくてよいため、コードの可読性が上がる。

functionでの定義
const func1 = function(str) {
    return str;
}
console.log(func1("func1です")); //func1です

アロー関数
 const func2 = (str) => {
     return str;
 }
 console.log(func2("func2です"));//func2です

分割代入

配列から値を取り出したり、オブジェクトからプロパティを取り出して別個の変数に代入することができる。

//オブジェクトからname,ageプロパティを取り出す場合
const myProfile  = { 
    name:"いとと",
    age: 28,
};
const {name, age} = myProfile;//name,ageプロパティを変数name,ageにそれぞれ割り当てる※この時、オブジェクトのプロパティ名と変数名は一致する必要がある。
const message2 =`名前は${name}です。年齢は${age}歳です`;//上記のname,age変数を参照
console.log(message2);

//配列から取り出す場合
const myProfile =[`いとと`, 28]; //配列として定義
const [name, age] = myProfile;
const message4 = `名前は${name}です。年齢は${age}歳です`; // 順番が大事！
console.log(message4);

スプレッド構文

...fooの形で定義され、配列やオブジェクトの要素を展開する。

const arr1 =[1,2];
console.log(...arr1);//1 2 配列の中身を順番に処理
const sumFunc =(num1, num2) => console.log(num1 + num2);
sumFunc(...arr1);//3

mapメソッドを使った配列の処理

ループを使った繰り返し処理をわざわざ書かなくてよい
returnされた結果に基づいて新しい配列を生成する

const nameArr =["田中","山田","佐藤"];
const nameArr2 = nameArr.map((name)=>{
    return name;
})
 console.log(nameArr2);//["田中","山田","佐藤"]

配列をループして処理する場合

const nameArr =["田中","山田","佐藤"];
nameArr.map((name) => console.log(name));//田中、山田、佐藤
nameArr.map((name, index) => console.log(`${index + 1}番目は${name}です`));
//1番目は田中です,番目は山田です,3番目は佐藤です

Filter

ある条件に一致した値を取り出す
偶数を取り出す場合

const numArr = [1, 2, 3, 4, 5];
const newNumArr = numArr.filter((num) => {
    return num % 2 == 0;
});
console.log(newNumArr);//[2,4]

特定の値だけ出力条件を変える（田中だけ呼び捨てにする）

const nameArr =["田中","山田","佐藤"];
const newNameArr = nameArr.map((name) => {
    if (name == "田中"){
        return name
    } else {
        return `${name}さん`
    }
})
console.log(newNameArr);//['田中', '山田さん', '佐藤さん']

三項（条件）演算子

3つのオペラントをとる演算子。疑問符(?)、真値の場合の実行式、コロン(:)、偽値の場合の実行式の順に書く。

const num = 1300;
console.log(num.toLocaleString()); //1,300カンマ区切りで表示
const formattedNum = typeof num == `number` ? num.toLocaleString() : `数値を入力してください`;
console.log(formattedNum); //数字の時はカンマ区切りで表示　文字ならば「数値を入力してください」

const checkSum = (num1, num2) => {
    return num1 + num2 > 100 ? `100を超えています!!` : `許容範囲内です`;
}
console.log(checkSum(20, 81)); //`100を超えています!!`

参考資料

Udemy　モダンJavaScriptの基礎から始める挫折しないためのReact入門