JavaScriptにおける関数の基礎を勉強した

JavaScriptを勉強してる時に最初につまずいたのが関数。
最初はなんとなく読めたけど「え、人によって書き方が違う・・？」「アロー関数・・・？矢？え、矢？」ってなったのでちゃんとお勉強した

関数ってなに

function(関数)は色んな処理を一つにまとめて名前をつけたもの
例えばよく使う処理を関数にしておくことで、コードの再利用性が上がってスッキリする

##基本の関数
関数はいろいろな形があるがまずは基本の形
###基本的な書き方
関数を定義して、プログラム内で呼び出すことができる

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

hoge();

引数を利用した書き方

定義した関数に引数を渡すこともできる

function hoge(fruit,Number) {
  console.log('私は' + fruit + 'を' + Number + '個買った') ;
}

hoge('リンゴ',5);

コールバック

引数に関数を指定することもできる

function hoge2 (){
  console.log('hoge2が実行されました');  
}

function hoge1() {

  console.log('hoge1が実行されました');
  hoge2();
 
}

hoge1(hoge2);

この時、hoge1()にはhoge2の関数式が渡される

function hoge2 (){
  console.log('hoge2が実行されました');
  testだよ
}

function hoge1(result) {

  console.log('hoge1が実行されました');
  console.log(result);
  hoge2();

}

hoge1(hoge2);

console

hoge1が実行されました

ƒ hoge2 (){
  console.log('hoge2が実行されました');
  testだよ
}

hoge2が実行されました

###return(戻り値)
returnを利用することで、関数から戻り値を取得できる

function hoge1(num1,num2) {
  var answer;
  answer = num1 * num2 ;
  return answer;
}

console.log(hoge1(4,6));

##無名関数
無名関数は名前を定義しない関数(そのまんま)
関数名をつける手間が省かれるのがメリット

###無名関数の書き方
無名関数は変数に関数を代入して使用する

var result = function() {
  console.log("hello");
}

result();

###引数を利用した書き方
無名関数にも引数を渡すことができる

var hoge = function (fruit,Number) {
  return(('私は' + fruit + 'を' + Number + '個買った')) ;
}

var my = hoge('リンゴ',5);
console.log(my);

##即時関数
関数を定義すると同時に実行するための構文。
即時関数はスコープを汚染しないため、再利用しないような処理に使われる。

即時関数の書き方

無名関数をさらに()で覆うような書き方をする

var hoge = (function () {
  console.log("hello") ;
}());

###引数を利用した書き方
即時関数も引数を使用できる

var hoge = (function (fruit,Number) {
  return(('私は' + fruit + 'を' + Number + '個買った')) ;
}('リンゴ',5));

console.log(hoge);

アロー関数

ES2015から導入された書き方。
「=>」この矢みたいな書き方をすることで「function」を省略することができる

アロー関数の書き方

まずは普通の関数の書き方

var result = function() {
  console.log("hello");
}

result();

アロー関数を使うことでfunctionを省略できる

var result = () => {
  console.log("hello");
}

result();

さらに処理が１行の場合は{}を省略することができる

var result = () => console.log("hello");

result();

###引数を利用した書き方
アロー関数も当然引数を指定できる

var result = (idle) => console.log(idle);

result('坂道');

さらに引数がある場合のみ、()を省略することもできる

var result = idle => console.log(idle);

result('坂道');