JavaScript基礎反復処理とデータ型とリテラル編 #JavaScript

基礎の学び直しアウトプットとして残したいと思います。
改めて、基礎は大事だと思いました。

const let
関数 this スコープ
クラス
例外処理

など、まだまだあります。

昨今、TypeScriptの需要もかなり高まってきていることもあり、データ型についても学び直しました。
正直あんまり学んだ記憶もなくなんとなく知っていてなんとなく利用していたので、良い機会かと思いました。

下記に改めて学び大事だと思った内容を振り返りつつ書いていこうと思います。

データ型

プリにティブ型とオブジェクトの二つに分けられます。
プリにティブ型とは基本形になります。それ以外がオブジェクト（複合型）になります。

↓　基本形
文字列、数値、真偽値といった値の型

console.log(typeof "javascript") //string
console.log(typeof 1) //number
console.log(typeof Symbol("javascript")) //symbol
console.log(typeof undefined) //undefined
console.log(typeof null) //object
console.log(typeof ["配列"]) //object
console.log(typeof {"key":"value"}) //object
console.log(typeof function() {}) //function

リテラル

""で囲った範囲が文字列リテラルになります。


const text = "javascript"

真偽値
数値
文字列
null

テンプレートリテラル

const text = "javascript"

console.log(`ecmascript and ${text}`)

他にもnull オブジェクト配列正規表現のリテラルが存在します。

const valNull = null
const array = []
const object = {}

正規表現リテラルの例

const str = "ABCDEFG"
const result = str.match(/[a-c]/gi);
console.log({result})
const reg = /[a-c]/gi;
console.log(str.match(reg))
//gi 文字列全体に対してマッチングするか 大文字／小文字を区別しない

反復処理メソッド

全てを紹介はしきれませんが、おそらく最も使用される反復処理メソッドかと思います。
紹介していきます。


const array = ["a","b","c"]

上記の配列を使用し、あとのメソッドの使用例を書いていきます。

Array.forEach

引数の数で取得できる内容が異なります。
currentValue index arrayが引数として渡されます。
配列要素の先頭から順に反復処理されます。

いろいろな場面で使用できてしまうメソッドなので、他のメソッドを利用できないか用途をしぼって検討し、
もしなければforeachを使用することをおすすめします。

利用シーンは、配列要素の先頭から順に反復処理されるのみの場合が妥当かと思います。
他のメソッドたちは何かしら用途が絞られているので、用途にあったメソッドを選んだ方が良いかと思います。


array.forEach( (currentValue,index,array) => {
  console.log({currentValue,index,array})
  /**
   * {currentValue: 1, index: 0, array: Array[3]}
   * {currentValue: 2, index: 1, array: Array[3]}
   * {currentValue: 3, index: 2, array: Array[3]}
   */
})

Array.map

配列の各要素を加工したい場合に使用します。
返却された値からできた新しい配列です。

const newArray = array.map( (currentValue,index,array) => {
  return currentValue
})

console.log(newArray)  //[1,2,3]
console.log(array === newArray)  //false

Array.filter

配列から不要な値を削除したい場合に使用します。
返却されたtrueの値からできた新しい配列です。

const newArray = array.filter( (currentValue,index,array) => {
  return currentValue
})

console.log(newArray)
console.log(array === newArray)

Array.reduce

このメソッドは特殊。
配列から配列以外を含む任意の値を作成。
mapやfilterの機能を一気に利用したい場合に利用するのが妥当かと思います。
コールバック関数には、累積値などを渡します。第二引数には累積値の初期値をセットすることができます。
Array.prototype.reduce()について解説されているMDNになります。


const totalValue = array.reduce((accumulator, currentValue, index, array) => {
  // return {accumulator, currentValue, index, array}
  return accumulator + currentValue

},0);

console.log(totalValue)

⇩⇩⇩　MDN記載の内容を抜粋し、少々書き換えて記載しております。


const obj = [
  { name: 'Alice', age: 21 , genre: "anime" },
  { name: 'Alice', age: 21 },
  { name: 'Max', age: 20 },
  { name: 'Jane', age: 20 }
];

const groupBy = (objArray, prop) => {
  return objArray.reduce((accumulator, currentValue) => {
    console.log({accumulator,currentValue})

    let key = currentValue[prop]
    if (!accumulator[key]) {
      accumulator[key] = []
    }

    accumulator[key].push(currentValue)

    return accumulator
  }, {})
}

let groupedPeople = groupBy(obj, 'genre')
console.log(groupedPeople)

便利メソッドだと思いました。
少し複雑ではありますが、ワンラインでできるのであれば理解して使いこないしたいところです。

※累積値とは、単なる1回限りの「合計」ではなく、「合計」の累積値が「累計」です。項目別の小計を集めた全体を合計で複数日合計を集めると累計になります。累計と累積は同じ意味で使えます。

以上になります。
他、非同期処理についても載せていこうと思います。
長くなってしまったので分けます。

JavaScript基礎 反復処理とデータ型とリテラル編