[JavaScript]⑧組み込み関数 変数のスコープ 匿名関数

• 組み込み関数とは
• 変数のスコープ

組み込み関数とは

JavaScriptがすでに備えている関数。

• parseInt▶文字列型の数字列を数値型の整数に変換
• parseFloat▶文字列型の数字列を数値型の実数に変換
• isNaN▶指定された値がNaNであるか調べる
• encodeURIComponent▶指定された文字列をURIエンコードする
• decodeURIComponent▶指定された文字列をURIデコードする

エンコード、デコード

• Web上で文字列を送信するとき、全角文字や一部記号はそのままでは送信できないため、送信可能な状態に変換(URLエンコード)する。
• 変換された文字列を戻す(URLデコード)
• JavaScriptで別のページにデータを送信するときは、URLエンコードが行われないため、encodeURIComponent関数を使ってエンコードする必要がある。

var encode = encodeURIComponent( '検索キーワード' );
console.log(encode);
var decode = decodeURIComponent( encode );
console.log(decode);
</script>

表示結果

• "%E6%A4%9C%E7%B4%A2%E3%82%AD%E3%83%BC%E3%83%AF%E3%83%BC%E3%83%89"
• "検索キーワード"

変数のスコープ

• 変数にはスコープ(有効範囲）がある
• スコープはその変数がスクリプトのどの範囲で利用できるかを示す

グローバルスコープ

• スクリプト全体で変数を参照できる
• 関数の外側で宣言した変数
• 宣言を省略した変数

ローカルスコープ

• ある関数の中でのみ変数を参照できる
• 関数の内側で宣言した関数
• 関数の引数

<script>
var num = 10; //変数の外側▶グローバル変数
function hoge(){
     str = 'あいうえお';     //宣言を省略▶グローバル変数
     var num = 20; //変数の内側▶ローカル変数
     console.log(num);
}
hoge();
console.log(num);
console.log(str);
</script>

関数の代入、匿名関数

• 関数は数値や文字列のように変数に入れて扱える
• 条件に応じてことなる関数を変数に設定したり、関数を引数として別の関数に渡したりできる

function sayHello(){
     console.log("こんにちは");
}
var f = sayHello; //代入時に丸括弧は不要
f();
</script>

関数式

• 関数の定義と変数への代入を同時に行う

var f = function(sayHello){
     console.log('こんにちは');
}
f();
</script>

匿名関数

• 関数式で関数名が省略できる

var f = function(){
     console.log('こんにちは');
}
f();

関数リテラル

• 関数についてリテラルを記述

var sum = function(x,y){
     return (x+y);
}
console.log(sum(2,3));
</script>

引数に関数リテラルを利用

<script>
function avg(x,y,z){
     return (x + y + z)/3;
}
var sum = function(x,y){
     return (x+y);
}
var average = avg(1,2,sum(1,2));
console.log(average);
</script>

即時関数

• 匿名関数の一種
• 1回しか呼び出しを行わない関数
• 定義と同時に実行

<script>
(function (choise) {
     console.log( choise + 'を選びました');
})( 'りんご' );
</script>

d.hatena.ne.jp