Reactを勉強しなおすにあたって、Javascriptの基本をおさらいしました。
忘れていることも多くためになったので、メモがてらJavascriptの基本の文法をブログに残します。
こちらの技術書の内容になります。Reactの勉強のために購入しましたがJavascriptの基本についても十分に説明されていて、Javascriptをあまり触ったことがないけどReactを勉強したいという人にもおすすめできる一冊です。
目次
リテラル表現
テンプレート文字列
数値セパレーター
アロー関数
変数と同名のプロパティ
メソッドの簡易構文
動的なプロパティ名の生成
可変長引数の関数
スプレッド構文
OptionalChanging
Javascriptの基本構文
リテラル表現
リテラル:変数に格納できる値そのもの。もしくはコードの中で値を表現するための記法。
テンプレート文字列
文字リテラルをバッククウォートで括る。
バッククウォートで括ることで、改行がそのまま改行として扱われる。
変数もくくれるし数式も可能。
let fruit = ‘りんご’;
let cost = 100;
let msg = `${fruit}の値段は${Math.trunc(cost*1.1)}円です。`;
console.log(msg);
>> りんごの値段は110円です。
より直感的に、文字列の中に変数や数式をうめこむことができる。
数値セパレーター
桁区切り文字で、アンダースコアで表現する。可読性を高めるためのものなので実行結果には影響しない。
const value = 123_456_789;
console.log(value);
>> 123456789
アロー関数
以下は意味的にほぼ同じ。
function example(引数){
return 関数の本体;
}
const example =(引数)⇒{
return 関数の本体;
}
アロー関数は特定の条件下でさらに簡潔化することができる
- 関数本体が一文である時、{}とreturnは省力できる
const example = (引数) ⇒ 関数本体; - 引数が一つの場合は引数を括る()が省略できる
const example = 引数 ⇒ 関数本体;
＊引数がないときはカッコの省略はできない
変数と同名のプロパティ
プロパティと値を格納した変数名が同じ場合は値の指定を省略できる。
const title = ‘Javascript’;
const price = 500;
const book = { title, price };
console.log(book);
>>{ title: ‘Javascript’, price: 500 }
メソッドの簡易構文
ES2015以前はプロパティ名：関数リテラルのような表し方だったが、より簡易的になった。以下は同じ意味。
const member = {
name: ‘三田’,
greet: function() {
console.log(こんにちは、${this.name}さん！);
}
}
const member = {
name: ‘三田’,
greet() {
console.log(こんにちは、${this.name}さん！);
}
}
動的なプロパティ名の生成
プロパティ名を[]で括ることで式の値からプロパティ名を生成できる。(算出プロパティ名)
let i = 0;
const member = {
[`attr${++i}`]: ‘佐藤’,
[`attr${++i}`]: ‘女性’,
[`attr${++i}`]: ’18歳’
};
>> { attr1: ‘佐藤理央’, attr2: ‘女性’, attr3: ’18歳’ }
可変長引数の関数
仮引数の前にピリオド3個(…)を付与する。
function sum(…nums) {
let result = 0;
for (const num of nums) {
result += num;
}
return result;
}
console.log(sum(10, 25, 2));
上記は渡された数値の合計値を求める関数。渡す引数は何個でも可能。
スプレッド構文
実引数の前にピリオド3個(…)を付与すると配列やオブジェクトを個々の要素にばらす役割がある。
const foo = [1, 2];
// 要素を追加して新しい配列を生成
const baz = […foo, 3, 4]; // => [1, 2, 3, 4]
// 配列をマージ
const hoge = […foo, …bar]; // => [1, 2, 1, 2]
optional changing 演算子
メソッド呼び出し時に空値の判定をif文で行うところを、「?.」で置き換える。
if (str !== null && str !== undefined) {
console.log(str.substring(1));
}
console.log(str?.substring(1));
Javascriptの中級を目指したい方にはこの本がおすすめです！この著者の方はいつもわかりやすい技術書を出されていて、勉強する際によく利用しています。