6時だョ!!全員集合!!

Rails・JavaScrictを中心にアウトプットします。

2021年10月28日 JavaScript (JS Primer) 文と式(1)

Arrow Function

// functionキーワードで関数を定義
function yanoZ(value) {
  return value * 2
}
console.log(yanoZ(1));

// 無名関数を変数名yanoAに代入
const yanoA = function(value) {
  return value * 2
};
console.log(yanoA(1)); // => 2

// 上の無名関数をアロー関数に置き換える。
const yanoA = (value) => {
  return value * 2
};
console.log(yanoA(1)); // => 2

// アロー関数の処理が1行の場合、ブロックを省略できる。
// 文の戻り値がそのまま戻り値とみなされるので、return命令も省略できる。

const yanoC = (value) => value * 2;
console.log(yanoC(1)); // => 2

// 引数が1つの場合、引数の()を省略できる。
const yanoD = value => value * 2;
console.log(yanoD(1)); // => 2
  • {}を省略すると文ではなくとして評価しようとします。式はreturn文を書かなくとも自動で値を返すので、return文を記載したままだとエラーになってしまいます。
const yanoC = (value) => { return value * 2; };
yanoC(1) //=> 2

const yanoD = (value) => return value * 2; 
yanoD(1) //=> SyntaxError: Unexpected token 'return'

const yanoE = (value) => value * 2; 
yanoE(1) //=> 2

confirmメソッドとは?

confirmとは、ウェブページ上に確認ダイアログボックスを表示させるのに活躍するメソッドなんです。確認ダイアログとは、ユーザーに確認を要求するために、一時的に表れる小さなウィンドウの事です。

  • 「OK」ボタンをクリックする → trueが返されます。
  • 「キャンセル」ボタンをクリックする → falseが返されます。
  • 確認ダイアログのボタンを押すことで返ってくる値により処理を分けることができます。
function ask(question, yes, no) {
  if (confirm(question)) yes()
  else no();
}

ask(
  "Do you agree?",
  () => { alert("You agreed."); },
  () => { alert("You canceled the execution."); }
);

コールバック関数

function 高階関数(コールバック関数) {
    コールバック関数();
}

const array = [1, 2, 3];
array.forEach(
    (value) => {console.log(value);} //=>forEachメソッドの引数として匿名関数が定義されているとき、forEachはコールバック関数を引数に持つ高階関数ということが出来る。
);

文と式

JavaScriptは、文(Statement)と式(Expression)から構成されています。

  • ()で囲んだものはです。()で囲わなくともとして評価されます。
  • 式は、値を評価してその結果を値を得ることが出来ます。ここで、得られた結果値は評価値と呼びます。
  • 式は値を変数に代入できます。
  • 関数呼び出しも式になります。
  • 数値などのリテラルも式です。
  • 三項演算子も式です。
  • 式=値と同義。
  • 式は何かを入れると自動で何かの値が返ってくるものです。(return不必要)
  • 式は文の一部に含めることが出来る(if文やfor文など)
const isTrue = true;
// isTrueという式がif文の中に出てくる
if (isTrue) {
}

式の例文

// 1という式の評価値を表示。
console.log(1); // => 1

// 1 + 1という式の評価値を表示
console.log(1 + 1); // => 2

// 式の評価値を変数に代入
const total = 1 + 1;

// 関数式の評価値(関数オブジェクト)を変数に代入
const fn = function() {
    return 1;
};

// fn() という式の評価値を表示
console.log(fn()); // => 1
  • console.logとは、値をコンソールに表示させるための命令文(関数)であり、単体では値を持ちません。そのため、今回のように(1)という式(値)を持たせてあげることでコンソールにその値を返すことが出来るようになるのです。

  • {}ブロックの中に書けるものをと呼びます。{}ブロックの中には文を複数書くことが出来ます。
  • 文の区切り文字として;(セミコロン)が使われます。これで、文と文を区切ることが出来ます。
  • 1つの処理を1つの文として書きます。
  • ソースコードとして書かれた上から順番に処理していくことで、プログラムが実行されます。(上から順番に文が処理されます。)
  • 文の一部に式を含めることが出来ますが、それは式になることはありません
  • 文は式ではないので、変数に代入することはできません。
  • 文は、値を自動で返してくれないのでreturn文を書いて戻り値を返す必要があります。return文を書かないと、文の処理結果を得ることが出来ません。
  • 文=手段

式文

式(Expression)は文(Statement)になれます。文となった式のことを式文と呼びます。 基本的に文が書ける場所には式を書けます。

// 式文であるためセミコロンをつけている
式;

ブロック文

{}で囲った部分をブロックと言います。ブロック内には、複数の文を書くことが出来ます。通常は、文の末尾にセミコロンを必須としますが、ブロックで終わる文の末尾には、セミコロンが不要です。

{
    文;
    文;
    文;
}   //=>ブロックで終わる文の末尾には、セミコロンが不要

参照

【JavaScript入門】confirmで「はい」「いいえ」のダイアログを出す

JavaScript Primer