こんにちは！　株式会社アルシエで教育に関するサポートをしている岸本です。

本日のテーマは「これは絶対知っておこう！JSの書き方」についてお伝えしていきます。

関数宣言とアロー関数

関数は、一連の処理をまとめ、再利用可能なコードを作成する事ができます。

以下のコードは、関数宣言とアロー関数のdoubleに引数を渡し２倍にして返す関数です。

// 関数宣言
function double(x) {
    return x * 2
}

// アロー関数
const double = (x) => {
    return x * 2
}

console.log(double(2)) // 4　

テンプレート文字列

テンプレート文字列とは、文字列を作成する方法です。

以下のコードでは、定数を含めた文字列を作成しています。`${}` で囲まれた中に、変数、定数を入れることでテンプレート文字列を作成できます。

const company =" ディアライフエージェンシー"
const place = "東京"

// 従来の書き方
console.log(company　+ "は" + place + "に本社があります" )
// ディアライフエージェンシーは東京に本社があります

//　テンプレート文字列
console.log(`${company}は${place}に本社があります`)
// ディアライフエージェンシーは東京に本社があります

分割代入　配列

以下のコードは、配列から値を取り出して、それぞれの変数に代入してます。

"ディアライフエージェンシー"をcompanyに、"東京"をplaceに代入してます。

place="東京"は、=を使う事で測定値を入れてます。

const [company,place] = [" ディアライフエージェンシー",  "東京"]
console.log(`${company}は${place}に本社があります`)
// ディアライフエージェンシーは東京に本社があります


const array =  [" ディアライフエージェンシー",  "東京"]
const [company,place] = array
console.log(`${company}は${place}に本社があります`)
// ディアライフエージェンシーは東京に本社があります


const [company,place = "東京"] = [" ディアライフエージェンシー" ]
console.log(`${company}は${place}に本社があります`)
// ディアライフエージェンシーは東京に本社があります

分割代入　オブジェクト

以下のコードは、オブジェクトから値を取り出して、それぞれの変数に代入してます。

"ディアライフエージェンシー"をcompany に、"東京"をplaceに代入してます。

即定値は、分割代入によって上書きされます。

const obj = {
    company:"ディアライフエージェンシー",
    place:"東京"
}
const {company,place} = obj
console.log(company) // ディアライフエージェンシー
console.log(place) // 東京


const obj = { company:"ディアライフエージェンシー"}
const {company,place = "東京"} = obj
console.log(`${company}は${place}に本社があります`)
// ディアライフエージェンシーは東京に本社があります


const obj = { company:"ディアライフエージェンシー",place:"東京"}
const {company="DLA",place = "東京"} = obj
console.log(`${company}は${place}に本社があります`)
// ディアライフエージェンシーは東京に本社があります

三項演算子

三項演算子は、条件によって異なる値を返す事ができます。

以下のコードでは、heightが170以上でtrue 以下であればfalseを返します。

const human　= height >= 170 ? true : false

// heightが170以上
console.log(human) // true

// heightが170以下
console.log(human) // false

残余引数

残余引数は、引数をまとめて取得できます。

以下のコードでは、...argsに12345の引数がまとめて取得してます。

引数に(a,b,c,d,e)と5つの値を入れなくていい事のメリットがあります。

const argument = (a,b) => {
    console.log(a,b) // [1,2]
}

const argument2 = (...args) => {
    console.log(args) // [1,2,3,4,5]
}

const argument3 = (a,b,...args) => {
    console.log(a) // 1
    console.log(b) // 2
    console.log(args) // [3,4,5]
}

argument(1,2) 　
argument2(1,2,3,4,5) 
argument3(1,2,3,4,5)

スプレット構文(配列の結合)

スプレット構文とは配列やオブジェクトを結合させる事ができます。

以下のコードでは、定数hamの配列を定数foo配列の1と2の間に挿入してます。

スプレット構文は、任意の位置で展開できます。

const ham = ["ハム","生ハム","ロースハム"]
const foo = [1,...ham,2]
console.log(foo)　// [ 1, 'ハム', '生ハム', 'ロースハム', 2 ]


const ham = ["ハム","生ハム","ロースハム"]
const foo = [1,2]
const combining = [...ham,...foo]
console.log(combining)　// [ 'ハム', '生ハム', 'ロースハム', 1, 2 ]

スプレット構文(オブジェクトの結合)

オブジェクトで結合する時、同じプロパティが被ると後ろのオブジェクトが優先されます。

const obj1 =　{company : "ディアライフエージェンシー"}
const obj2 =  {place : "東京"}
console.log({...obj1,...obj2}) //{ company: 'ディアライフエージェンシー', place: '東京' }


const obj1 =　{company : "ディアライフエージェンシー",place : "東京"}
const obj2 =  {company : "DLA",Established : 2018}
console.log({...obj1,...obj2})
// プロパティが被ると後のオブジェクトが優先される
//{ company: 'DLA', place: '東京', Established: 2018 }

破壊的メソッド🙅

破壊的メソッドを使用したときの、fooの値が予想しずらいです。

もとの配列を直接変化させるので注意です❕

const foo = [4,3,2,1]
const bar = foo.sort()
//　🙅元のfooまで配列の中身が変わっている
console.log(foo) // [ 1, 2, 3, 4 ]
console.log(bar) // [ 1, 2, 3, 4 ]

非破壊的メソッド🙆

非破壊的メソッドは、元の配列が変化しません。

[...foo]を使うことで、新しい配列を生成してます。

値が予想しやすいです！

const foo = [4,3,2,1]
const bar = [...foo].sort()
// 🙆fooの配列の中身が変わっていない
console.log(foo) // [ 4, 3, 2, 1 ]
console.log(bar) // [ 1, 2, 3, 4 ]

以上となりますが、この書き方はよく使われるので覚えておきましょう！

次回はTypescriptの記事です！