JavaScriptの基礎知識メモ1 #JavaScript

定数

再代入不可の変数

//再代入不可
const name = "sato"

グローバル変数

アクセス範囲の制限がない

var name = "sato"

if(name){
    var name = "soma"
    console.log("local",name) //soma
}

console.log("global",name) //soma

ローカル変数

ifやforの外からアクセス出来ない

let name = "sato"

if(name){
    let name = "soma"
    console.log("local",name) //soma
}

console.log("global",name) //sato

テンプレート文字列

文字連結を"+"を使わずに出来る

let name = sato
let text = hello

console.log(name + "," + text)

console.log(`${name},${text}`)

//結果は同じ

関数宣言

関数の巻き上げが可能

logs(soma) //この時点で呼び出し可能

function logs(name) {
    console.log(`Myname is ${name}`)
}

関数式

logs(soma) //この時点で呼び出し不可

const logs = function(name) {
    console.log(`Myname is ${name}`)
}

デフォルト引数

デフォルトの引数を設定できる

const logs = function(name="soma", text="hello") {
    console.log(`${soma}, ${hello}`)
}

const defaultArg = {
    name : {
        first : "sato",
        second : "soma"
    },
    fruits : {
        first : "strawberry"
    }
}

function logActive(data = defaultArg) {
    console.log(`${data.name.first} like ${data.fruits.first}`)
}

アロー関数

シンプルに関数を書くことができる
式を書いた場合はreturn不要で、式の評価値を返す
関数ブロックを書いた場合はreturnで値を返す
独自のスコープを持たず、内側と外側でスコープを保持する

スコープ : 変数や関数にアクセスできる範囲

const loadFunc = firstName => `${firstName} です`

const loadFunc2 = (firstName, fruits) => `${firstName} is ${fruits}`

オブジェクトを返却する場合

const loadObj = (firstName, lastName) => ({
    first : firstName,
    last : lastName
});

アロー関数のスコープ

この場合、settimeoutのコールバック内でthisをloadObjオブジェクトを期待して呼び出す時、アロー関数を使う。

const loadObj = {
    fruits : ["banana", "strawberry", "melon", "lemon"],
    print :function(delay = 1000) {
        settimeout(() => {
            console.log(this.fruits.join(", "))
        },delay)
    } 
}

コンパイルについて

新しい構文を全てのブラウザで対応前に使いたい時、古い構文に変換すればブラウザ実行が可能となる、これをコンパイルまたはトランスパイルと呼ぶ。
コンパイルするためのメジャーなツールにBabelがある。

オブジェクトと配列

デストラクチャリング

オブジェクトを変数や引数として代入する時に取捨選択できる機能

// 変数
const filter = {
    meet : "usi",
    name : "sato",
    drink : "Cola",
    fruits : ["banana", "strawberry", "melon", "lemon"]
}

const {meet, drink} = filter

// 引数 
// arg内のfirstNameを直に取ってきてる
const loadFunc = ({ firstName }) => {
    console.log(`${ firstName } is firstName`)
}

const loadFunc2 = ({ hobby : { game } }) => {
    console.log(`${ game } is god`)
}

const arg = {
    firstName : "sato",
    lastName : "ziro"
    hobby : {
        game : "switch",
        music : "bump"
    }
}

loadFunc(arg); //sato is firstName
loadFunc2(arg); //switch is god

配列のデストラクチャリング

//配列の最初をとって来れる
const [firstFruits] = ["banana", "strawberry", "melon", "lemon"]

// 指定の配列の箇所をとって来れる
const [, , thirdFruits] = ["banana", "strawberry", "melon", "lemon"]
// thirdFruits = "melon"

スプレッド構文

...で表される構文

// 配列の結合
const fruitsObj = ["banana", "strawberry", "melon", "lemon"]
const gameObj = ["dq", "ff", "kh", "pokemon"]

const mixObj = [...fruitsObj, ...gameObj]

// 先頭とそれ以外で分ける時
const [fisrt, ...other] = gameObj

非同期処理

Promise

保留中、成功、失敗のいずれかの状態が帰ってくる
.then()で結果を取れる

async/await

async関数内でawaitを使うとそこで同期的に動作させられる

インポート/エクスポート

ES2015

defaultを使った単一exportと個々のexportがある

func.js(exportする側のファイル)

export const message = text => `${text}`
export const alert = delay => settimeout(() => console.log(`警告`), delay)

class.js(exportする側のファイル)

export class ExpClass {
    constructor(text, length){
        this.text = text
        this.length = length
    }
    
    print(){
        console.log(`${this.text}の文字数は ${length}です`)
    }
}

index.js(importする側のファイル)

import {alert, message} from "./exp.js"
// {alert as A, message as B} のように別名でも可能

import smaple from "./class.js"
// 単一exportの時、名前は問われない

CommonJs

requireを使用

func.js(exportする側のファイル)

const message = text => `${text}`
const alert = delay => settimeout(() => console.log(`警告`), delay)

module.export = { message, alert }

index.js(importする側のファイル)

import {alert, message} = require("./func.js")
// {alert as A, message as B} のように別名でも可能