Javascriptの基本文法

Last updated at 2025-07-24Posted at 2025-07-24

はじめに

React実践の教科書の2章を読んで忘れている文法が多くあるなと感じたため、備忘録としてまとめます。

javascriptの変数の宣言方法はvar,let,constの3種類あります。

これらの宣言方法は

という２点において違いが存在します。

再宣言可能とは

var name="田中"
var name="山田"

のように一度宣言した変数名を再び定義しなおすことができます。

上書き可能とは

let name="田中"
name="山田"

のように変数名を書き換えることができる状態を指します。

そして、再宣言と上書きが可能な宣言方法は以下の通りです。

	var	let	const
再宣言	○	×	×
上書き	○	○	×

一般的には再宣言と上書きが不可能なconstの使用が推奨されています。
その理由として、一度変数を宣言したらその値が二度と変わることがないため、想定していない挙動が起きにくいからです。

アロー関数とは関数の記法のひとつです。
具体的には、

const formated_name=(name)=>{
    return (`${name}さん`)
}

console.log(formated_name("長嶋"))

のように記述を行います。
この関数は、名前を渡したらさんをつけて表示します。

map関数、filter関数とは共にfor文を簡略化させた記法です。

for文では

const name_array=["今村","村田","本谷"];

for (let index=0;index<name_array.length;index++){
    console.log(name_array[index])
}

のように配列のindexを取得し、そのindexを配列に渡すことで値を取り出すためやや煩雑なコードになります。

一方、map関数では、

name_array.map((name)=>{console.log(name)})

このように配列の値を直接取り出すことができるため、コードを簡潔に記述することができます。

また、indexの値も利用したい場合は

name_array.map((name,index)=>{console.log(`${index+1}番目は、${name}です`)})

と記述すると、

1番目は、今村です
2番目は、村田です
3番目は、本谷です

のようにindexも返却されます。

map関数では2つ引数を渡すと1つ目の引数には配列の値が、2つ目の引数には配列のインデックスが渡されます。

filter関数では任意の値のみを取り出したいときに使用します。
例えばname_arrayの奇数番目の値のみを取り出したいとき、

const name_array=["今村","村田","本谷"];

const odd_name_array=name_array.filter((name,index)=>{
    return index%2===0;
})

console.log(odd_name_array)

と記述すると

[ '今村', '本谷' ]

filter関数ではreturnの次に評価する文を書くことで欲しい値のみをもとの配列から抽出することができます。