javascriptで使用される基本的な処理をまとめた

javascript

久しぶりにjavascriptを使用して、for文とか、if文とかどうやって書くんだっけ?と色々忘れていた為、備忘録としてjavascriptの基本的な書き方をまとめておきます。

javascriptの関数の書き方

基本的な関数の書き方

const sum = function(x, y) {
  let sum = x + y
  return sum
}

console.log(sum(5, 10)) //15が表示される。 

javascriptの基本の関数の書き方です。アロー関数で各場合は、下記のようになります。

const sum = (x, y) => {
  let sum = x + y
  return sum
}

console.log(sum(5, 10)) //15が表示される。 

アロー関数の方が見た目がすっきりするので、こちらで書かれていることが多いと思います。

複数の戻り値がある場合

・配列で返す場合

const calc = (x, y) => {
  let sum = x + y
  let sub = x - y
  let mul = x * y
  let div = x / y
  return [sum, sub, mul, div]
}

const result[sum_r, sub_r, mul_r, div_r] = calc(6, 2)
console.log(sum_r) // 8
console.log(sub_r) // 4
console.log(mul_r) // 12
console.log(div_r) // 3

・オブジェクトで返す場合。

const calc = (x, y) => {
  let sum = x + y
  let sub = x - y
  let mul = x * y
  let div = x / y
  return {sum_r: sum, sub_r, mul_r, div_r}
}

const result{sum_r, sub_r, mul_r, div_r} = calc(6, 2)
console.log(sum_r) // 8
console.log(sub_r) // 4
console.log(mul_r) // 12
console.log(div_r) // 3

// 返り値の引数名を変更することも可能
const result{sum_r: sum_result, sub_r: sub_result, mul_r: mul_result, div_r: div_result} = calc(6, 2)
console.log(sum_result) // 8
console.log(sub_result) // 4
console.log(mul_result) // 12
console.log(div_result) // 3

javascriptで使用されるメソッド

既存の配列から新たな配列を作り出す(map関数)

let items = [1, 2, 3]
const result = items.map((value) => {
  return value * 2
})

console.log(result) // [2, 4, 6]

配列の各要素に対して処理を実行する(foreach)

let items = [1, 2, 3]
const result = items.foreach((value) => {
  console.log(value*2)
})
// log
2
4
6

mapに似ていますが、mapは新たに配列を作り直してreturnするのに対してforeachはreturnはせず、各要素に対して処理を実行するのが特徴になっています。

javascriptで使用される文

条件分岐(if文)

基本構文

if (条件式1) {
  条件式1が成り立ったときの処理
}else if(条件式2) {
  条件式2が成り立ったときの処理
}else {
  上記の条件が成り立たなかったときの処理
}

条件式の書き方まとめ

// and条件で条件を指定する方法
条件式1 && 条件式2
// or条件で条件式を指定する方法
条件式1 || 条件式2
// 変数等の値が正しいときtrueにする
hensu === 1
// 変数等の値が正しくないときtrueにする
!(hensu === 1)

条件分岐(三項演算子)を使った方法

const type = age > 18 ? adult : child
// age>18の場合、type=adult、それ以外の時type=childとなる。

const 変数 = 条件式 ? <trueのときに変数に入る結果> : <falseの時に変数に入る結果>

javascriptで使用されるテクニック一覧

文字列の中に変数を入れる方法

console.log(`string${hensu}`)

バッククォート(shift + @)で囲んだのち、変数を${}で囲むことで文字列の中に変数を入れることができます。

オブジェクトや配列でスプレッド演算子を使用する。

const obj = { a: 1, b: 2 }
const obj2 = { ...obj, c: 3 } // objの値が展開される
console.log(obj2) // { a: 1, b: 2, c: 3 }

まとめ

javascriptでよく使う記法などをまとめてみました!

忘れたときの備忘録として活用していただけたらと思います!

コメント

タイトルとURLをコピーしました