n.関数

宣言

関数宣言も護衛オブジェクトです.(関数式ではありません)

function calculate(num1, num2) {
  return num1 + num2;
}

// 함수 호출
calculate(1, 2);

🔖 return文を実行すると関数実行を終了し、return文がない場合はundefinedを返します.

パラメータオブジェクト

関数にargumentsオブジェクトが存在します.
Argumentsオブジェクトは、関数を呼び出すときに渡される要素を配列として集合する配列に似たオブジェクトです.

function printArguments() {
  for (const arg of arguments) {
    console.log(arg);
  }
}

printArguments('Young', 'Mark', 'Koby');

各種関数の形式

javascriptでは、関数は値とみなされるため、さまざまな形で使用できます.

関数式

const sayHi = function() {
  console.log('Hi');
};

オブジェクトのメソッド

const dog = {
  bark() {
    console.log('멍멍');
  }
}

コールバック関数

他の関数パラメータに渡される関数は、特定の条件を満たすときに実行されます.

myBtn.addEventListener('click', function() {
  console.log('button is clicked');
});

高次関数

戻り関数

function myFunction() {
  return function() {
    console.log('Hi');
  };
}

myFunction()();  // Hi
const sayHi = myFunction();
sayHi();  // Hi

JavaScriptでは、関数
  変数または他のデータ構造に割り当てることができます.
  他の関数に渡すことができるパラメータ.
  他の関数の戻り値でもかまいません.
👉🏻 プログラミングでは,このような特徴を持つ関数を1級関数と呼ぶ.

パラメータ

パラメータ付き関数が値なしで呼び出される場合、そのパラメータはundefinedである.

function sayHi(name) {
  console.log(`안녕하세요 ${name}님!`);
}

sayHi();  // 안녕하세요 undefined님!

外部パラメータ(ES 2015)

パラメータは順番に対応するため、undefinedが値がないか渡されていない場合は、指定したデフォルト値を使用することを最後尾で宣言する必要があります.

// example1
function sayHello(name, nationality='한국') {
  console.log(`안녕하세요 ${name}님! 국적은 ${nationality}입니다.`);
}

sayHello(null);  // 안녕하세요 null님! 국적은 한국입니다.


// example2
function defaultTest(x, y = x + 3) {
  console.log(x + y);
}

defaultTest(3, undefined);  // 9

Rest Parameter (ES2015)

不規則に渡される項目については,パラメータの前に3つの句点を配列として加えることで処理できる.
最後に発表すべきだ.

function printArguments(first, second, ...args) {
  console.log(`우승: ${first}`);
  console.log(`준우승: ${second}`);
  for (const arg of args) {
    console.log(`참가자: ${arg}`);
  }
}
printArguments('Bmo', 'Young', 'Mark', 'Koby');

Arrow Function (ES2015)

名前のない匿名関数、argumentsオブジェクトがなく、thisが指す値は通常の関数とは異なります.
矢印関数のthisは、位相ミラーのthisを指す.

// 매개변수가 하나면 소괄호 생략 가능하다.
const getTwice = num => num * 2;


// return 문이 객체라면 소괄호로 감싸주면 된다
const bmo = () => ({name: 'bmo'});

this

デフォルトでは、thisはグローバルオブジェクトにバインドされます.
この関数の呼び出し方法によっては、thisにバインドされたオブジェクトが異なります.

グローバルオブジェクト

console.log(this);  // window

function myFunc() {
  console.log(this);  // window
}

const btn = document.querySelector('.btn');
btn.addEventListener('click', function() {
  const arr = [1, 2, 3];
  arr.forEach(function() {
    console.log(this);  // window
  });
});

メソッドを呼び出すオブジェクト

const obj = {
  data: {
    title: 'JS',
    func() {
      console.log(this.title);
    },
  },
};

obj.data.func();  // JS

新しく作成されたオブジェクト

function User(data) {
  this.data = data;
}

const user1 = new User('JS');
console.log(user1.data);  // JS

🔖 コンストラクション関数:オブジェクトを作成するための関数

e.currentTarget

const btn = document.querySelector('.btn');
btn.addEventListener('click', function(e) {
  console.log(this);  // e.currentTarget
});

インスタント実行関数

関数定義と同時に実行される関数

(function foo() {
  console.log("Hello Foo");
}());

(function food() {
  console.log("Hello Food");
})();

(() => console.log('hello world'))();

初めて呼ぶしかないので、これ以上呼ぶことはできません.これらの特性を利用して,1回目のみ実行する初期化処理などに利用できる.
また、変数名や関数名の競合を防止するために、即時実行関数でコードを定義することもできます.

さいきかんすう

じこよびだししかんすう

function factorial(n) {
  if (n < 2) {
    return 1;
  } else {
    return factorial(n - 1) * n;
  }
}