関数関数[JavaScript]

function

パラメータ(prameter)に値を入力し、伝達因子(パラメータ)として値を受け入れて出力します.

簡単に言えば、タスクや計算値を関数と呼ぶ.

戻り値

がない場合は、未定義の出力が出力されます.

関数の名前は動詞で1つの関数だけを作るのが望ましい.
(e.x. printAllMessages, getLargestWord, getOddNum)

// function의 형식은 다음과 같다.
function functionName (prameter) {
 // function body
  
 return something;
 // function은 어떤값을 return해주지 않으면 'undefined'를 리턴한다.
  // 왜나하면 function은 어떤값을 입력받아 출력하는 object이기 때문이다.
}

赤い箱の中で、関数に戻らないので、aとbは付けません.

関数の表示

関数宣言式:関数宣言式は昇格できます.すなわち、関数宣言式は、宣言された位置の前に呼び出される.
≪関数式｜Function Expression｜oem_src≫:呼び出し時に関数式が生成されます.次の関数の使用では、「1.「functionは変数として割り当てることができる」の項を参照してください.

関数の使用

関数は変数として割り当てることができる.

const printHello = function () {
	console.log('Hello');
}
printHello() // 이런 방식으로 함수 호출이 가능하다. 이 때 함수가 실행이 된다. hoisting이 되지 않음.

// 다른 변수에 할당을 하여 다시 호출을 할 수도 있다.
const printAgain = printHello;
printAgain();

関数は、戻り値として割り当てられてもよい.

// 2. function은 return값으로도 할당이 가능하다.
// 점수에 등급을 매기고, 특정 조건에 맞을 시 +,- 기호를 붙이는 함수를 만들어 보자.
// function은 한가지 기능만을 갖는 것이 좋기 때문에 2개의 function을 만든다.

// 일의 자리가 3점이하 일때는 -를 붙이고, 8이상은 +가 붙는다.
function getSign(score) {
	const unitDigit = score % 10;
  	if ( unitDigit <= 3) {
    	unitDigit = '-';
    } else if (unitDigit >= 8) {
    	unitDigit = '+';
    } else {
    	unitDigit = '';
    }
  return unitDigit;
}

//  점수에 A,B,C..등의 등급을 매겨보자.
// 60점 미만인 경우 +,-등의 사인은 붙지 않는다고 하자.
function getGrade(score) {
  let grade;
  if (score > 100 || score < 0) {
  	return 'INVAILED SCORE';
  }
  if(score === 100) {
  	return 'A+';
  }
  if (score >= 90) {
  	grade = 'A';
  } else if (score >=80) {
  	grade = 'B';
  } else if (score >= 70) {
  	grade = 'C';
  } else if (score >= 60) {
  	grade = 'D';
  } else if (score < 60) {
  	grade = 'F';
  }
  
  if (grade !== 'F') {
  	grade = grade + getSign(score);
  } 
  
 	return grade;

}

関数はパラメータ伝達可能である.

Arrow function

矢印関数または色域関数と呼ばれます.
無名のanonymous関数を使用する場合のみ使用します!
(名前付き関数をnamedfunctionと呼びます.)

const printLoveyou = function() {
console.log('Love you');
};

// 위에 것을 arrow function을 이용하여 줄인다면
const printLoveyou = () => console.log('Love you');

// 다른 예를 들어 보자면 아래와 같다.
const sum = function(a,b) {
	return a + b;
}
const sum = (a , b) => a + b;

-Arrow関数を使用してエンクロージャを表示

// 예사 1
const sum = function(x) {
	return function(y) {
    	return x + y;
    }
} 
// 위의 클로저 함수를 에로우 함수를 이용해 표현해 보자.
// x와 y를 감싸고 있는 ()는 생략이 가능하다.
const sum = (x) => (y) => x + y;
sum(5)(20); // 25

// 예시 2
const htmlMaker = function(tag) {
	return function(textContent) {
    	return `<${tag}>${textContent}</${tag}>`;
    }
}
const htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`;
htmlMaker('div')('즐거운 코딩 공부') // <div>즐거운 코딩 공부</div>
const liMaker = htmlMaker('li');
liMaker('첫번째 아이템') // <li>첫번째 아이템</li>
liMaker('두번째 아이템') // <li>두번째 아이템</li>

IIFE

Immediately Invoked Function Expression

IIFEは、宣言と同時に直ちに呼び出される方法である.

関数全体を横方向にバンドルし、最後に呼び出しのように貼り付けます().

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

※参考
1.コデスタッツコーン
2.YouTube Elly5.Arrow関数は何ですか。