Javascriptの基礎文法

はじめに

Javascriptの基礎学習を進めています。
学習した内容を後々辞書代わりに使えるように記事にまとめてみようと思い、執筆しました。
間違いなどあればぜひフィードバックをお願いいたします！

繰り返し処理

while文

特定の条件を満たす時(true)の間、{}内の処理を繰り返す。
※{}の後は;(セミコロン)不要。

基本構文

while(条件式) {
    実施する処理
}

例

let num = 1;
// numの値が10以下の場合は、numberに1を加算し続ける。
while (num <= 10) {
    num += 1;
}

//出力結果
1
2
3
...
10

for文

変数、条件式、変数の更新を指定して、繰り返し処理を実施する。
※{}の後は;(セミコロン)不要。

基本構文

for( 変数定義; 条件式; 変数の更新　) {
    繰り返しの処理
}

例

// iの値が5以下だったら、iの値を出力する
for( let i = 0; i <= 5; i++　) {
    console.log(i);
}
//出力結果
1
2
3
4
5

配列を操作するメソッド

pushメソッド

配列の最後に新しい要素を追加する。

基本構文

配列.push(追加したい要素);

例

const array = [1,2,3,4]
array.push(5);

// 出力結果
console.log(array);
=> [1,2,3,4,5]

forEachメソッド

配列の各要素に対して、引数に与えられた関数の処理を実行する。

基本構文

配列.forEach((element, index, array) => {
    実行する処理
});

element...配列内の要素が入る。
index...インデックス番号が入る。
array...forEachを実行している配列そのものが入る。

例

array = ["apple", "banana", "orange"];
array.forEach((element,index) => {
    console.log({index: index, element: element});
});

//出力結果
{index: 0, element: 'apple'}
{index: 1, element: 'banana'}
{index: 2, element: 'orange'}

findメソッド

条件に合致する1つ目の要素を配列の中から取り出すメソッド。

例

配列.find((element, index, array) => {
    // 検索条件
)}

element...配列内の要素が入る。
index...インデックス番号が入る。
array...findを実行している配列そのものが入る。

例

// arrayの中から偶数の要素のみ取り出す
array = [1,4,7,9,10];
const even = array.find((element) => {
    return element % 2 === 0;
});
console.log(even);

// 出力結果
=> 4

filterメソッド

条件に合致する要素を配列の中から取り出すメソッド。
findメソッドとの違いは、条件に合致する全ての要素を取り出して新しい配列を作る点。

基本構文

配列.filter((element,index,array)=> {
    // 検索条件
});

element...配列内の要素が入る。
index...インデックス番号が入る。
array...filterを実行している配列そのものが入る。

例

// arrayの中から偶数の要素のみ取り出す
array = [1,4,7,9,10];
const even = array.filter((element) => {
    return element % 2 === 0;
});
console.log(even);

// 出力結果
=> [4, 10]

mapメソッド

配列内の全ての要素に対して処理を行い、その戻り値から新しい配列を生成するメソッド。

基本構文

配列.map((element,index,array) => {
    // 各要素に実行する処理
});

element...配列内の要素が入る。
index...インデックス番号が入る。
array...mapを実行している配列そのものが入る。

例

array = [1,2,3,4]
// 配列全ての要素を10倍して、新しい配列を作る。
const multiplyByTen = array.map((element) => {
    return element * 10;
});
console.log(multiplyByTen);

// 出力結果
=> [10, 20, 30, 40]

コールバック関数

コールバック関数とは？

親関数に引数として渡され、親関数の中で特定のタイミングで呼び出しがされる関数のこと。コールバック関数を用いることで、関数実行の流れを制御したり、非同期処理を行ったりすることができる。

基本構文

const callbackFunction = () => {
    // コールバックの処理
}

const myFunction = (callback) => {
    // 特定の処理
    callback();  // コールバック関数の呼び出し
}

myFunction(callbackFunction);

具体的な使用例

// ④callback();の記述でsayGoodbye関数が実行され、"Goodbye!"が出力される。
const sayGoodbye = () => {
    console.log("Goodbye!");
}

const greet = (name, callback) => {
    // ②greet関数が実行され、"Hello, Taro!"が出力される。
    console.log(`Hello, ${name}!`);
    // ③コールバック関数のsayGoodbye関数を呼び出す
    callback(); 
}

// ①greet関数に名前とコールバック関数(sayGoodBye)を渡す
greet("Taro", sayGoodbye);

処理の流れは以下のようになる。
①greet関数に"Taro"とコールバック関数を渡す。
②greet関数が実行され、"Hello, Taro!"が出力される。
③引数で受け取ったcallback関数をcallback();の記述で呼び出す
④callback関数を実行し、"Goodbye!"が出力される。

省略記法

関数の中身が1行、かつreturnするだけの場合は省略記法が使える。

{}とreturnを省略して記載することが可能。

省略前

array = [1,2,3,4,5]
const doubleNumber = array.map((num) => {
    return num * 2;
}

省略形

array = [1,2,3,4,5]
const doubleNumber = array.map((num) => num * 2);

キーとバリューが同じ場合は、キーのみ記述すればオブジェクトが作れる。

省略前

const changeObj = (array) => {
  return array.map((value, index) => {
    //キー名とバリュー名が同一のオブジェクト
    return {index: index, value: value};
  })
}
console.log(changeObj(['a', 'b', 'c']))

省略形

const changeObj = (array) => {
  return array.map((value, index) => {
    // {キー名, バリュー名}の形式で省略が可能。
    return {index, value};
  })
}
console.log(changeObj(['a', 'b', 'c']))