プログラミング未経験者の学習日記

私が学習した内容のまとめサイトです。

【JavaScript入門】 関数を使ってみよう!

関数とは?

複数の処理をまとめて名前をつけたもので、プログラミングでは同じような処理を繰り返し書くようになるが、このような場合に関数が使えると、こうした処理をまとめて書くことができ使い回しができるようになります。

基本的な構文

function 関数名() {

 //処理

}

※波括弧の中に処理を書くことができます。

関数を呼び出す方法

関数名を書いた後に「()」を付ければ OKです。

関数名();

引数を指定する

下記のように引数用の変数名を付けると、処理の中でそれを使うことができます。

function 関数名(引数) {

 //処理

}

   ※引数は「,」区切りでいくつでも使うことができます。

使用例は下記となります。

function hello(name) {

console.log("hello " + name);

}

hello("Tom"); → helloTomと出力されます。

hello("Bob"); → helloBobと出力されます。

「return」とは?

returnは関数内で処理をした結果を「戻り値」として返すことができます。関数は「return」を使わないと処理を行ったらそのまま終了となりますが、「return」を使うことで処理結果の値を返すことができ、その値を使ってさらに別の処理を続けることが出来るます。

function 関数名(引数) {

 //処理

return 返り値

}

使用例は下記となります。指定した「名前」を組み合わせて文字列を作成し、その文字列をreturnで返しています。

function hello(name) {
return "Hello、" + name + 'さん';
}

console.log( hello("太郎") );

ローカル変数

関数内で定義した変数をローカル変数といいます。ローカル変数はその関数の中でしか有効となりません。

function hello(name) {
var msg = "Hello、" + name;
return msg;
}

無名関数、匿名関数

関数はデータ型であるので、変数に入れることも可能で、下記のように書くことも可能です。関数名を省略できて関数名がないため、無名関数、匿名関数と呼ばれることがあります。また、この場合、式となっているため、末尾に「;」をつけるのを忘れないようにしましょう。

var msg = function(name) {
var msg = "Hello、" + name;
return msg;
} ;

即時関数

関数を呼び出す際、今までは「hello();」と書いてきたが、定義した後にすぐに呼び出したい場合は「(」「)」で囲い、末尾に「() ;」と入力することで呼び出すことができます。

(function hello(){
console.log("hello");
})() ;

引数を使うことも可能です。

(function hello(name){
console.log("hello" + name);
})("Bob") ;

関数名の省略も可能です。

(function(name){
console.log("hello" + name);
})("Bob") ;

また、自分が書いたプログラムの変数を、他の人のプログラムから影響を受けたり他の人の変数に影響を与えたりしないようにするため、即時関数を使用してローカル変数にする方法がよく使われます。例えばx = 10、y=20で合計値を出力するプログラムがあったとします。

var x = 10;
var y = 20;
console.log(x + y);

これを即時関数で囲ってあげることによりローカル変数とすることができます。

(function(){
var x = 10;
var y = 20;
console.log(x + y);})(); 

 他の人のプログラムも読み込みながらコードを書くようになると、こうした配慮も必要になってきます。