TIL - JavaScript - Functions

1. Functions Declarations(함수 선언)

function getReminder(parameter) {
    console.log('Water the plants');
}

2. Calling a Function(함수 호출)

• 함수를 선언하면 내부 코드를 실행하는 것이 아니라 함수의 존재를 선언할 뿐이다.
• 함수 내부의 코드는 함수가 호출될 때만 실행된다.
• 함수 호출 시 값이 바로 나오기 위해선 함수 안에 console.log()기능이 있어야 한다.

function sayThanks(){
  console.log('Thank you for your purchase! We appreciate your business');
  }
  sayThanks();
//Output: Thank you for your purchase! We appreciate your business

3. Parameters and Arguments(매개 변수 및 인수)

• 매개변수가 있는 함수를 호출할 때 함수 이름을 따르는 괄호 안에 값을 지정한다.

function sayThanks(name) {
  console.log('Thank you for your purchase '+ name +'! We appreciate your business.');
}
sayThanks('Cole');

4. Default Parameters(기본 매개 변수)

• 기본 default값을 설정하면 특정 매개변수가 없는 경우 default값이 나타난다.
• Parameter 값을 동일하게 설정할 수 있다.(두번째 예제 참고)

function makeShoppingList( item1 = 'milk', item2 = 'bread',  item3 = 'eggs')
{
  console.log(`Remember to buy ${item1}`);
  console.log(`Remember to buy ${item2}`);
  console.log(`Remember to buy ${item3}`);
}
makeShoppingList();
/*Output
Remember to buy milk
Remember to buy bread
Remember to buy eggs
*/
function makeShoppingList( item1 = 'foods', item2 = 'foods',  item3 = 'foods')
{
  console.log(`Remember to buy ${item1}`);
  console.log(`Remember to buy ${item2}`);
  console.log(`Remember to buy ${item3}`);
}
makeShoppingList('milk', 'eggs', 'bread');
/*Output
Remember to buy milk
Remember to buy eggs
Remember to buy bread
*/

5. Return

함수를 실행을 종료하고 주어진 값을 호출했던 지점으로 반환

function monitorCount(rows, columns){
  return rows*columns;
}
const numOfMonitors = monitorCount(5,4);
console.log(numOfMonitors);

undefined로 나오는 이유?
Return은 언제 쓰는가?

6. Helper Functions

function monitorCount(rows, columns) {
  return rows * columns;
};
function costOfMonitors(rows, columns){
 return monitorCount(rows, columns)* 200;
};
const totalCost = costOfMonitors(5,4);
console.log(totalCost);
//Output : 4000

7. Function Expressions

const plantNeedsWater = function (day) {
  if(day === 'Wednesday') {
    return true;
  } else{
    return false;
  }
  };
plantNeedsWater('Tuesday');
console.log(plantNeedsWater('Tuesday'));
//Output: false

8. Arrow Functions

키워드 함수를 입력하지 않고도 화살표를 통해 함수 입력이 가능
단 parameter는 반드시 있어야 한다!

const plantNeedsWater = function(day) {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};
//밑의 코드로 변환이 가능!
const plantNeedsWater = (day) => {
  if (day === 'Wednesday') {
    return true;
  } else {
    return false;
  }
};

9. Concise Body Arrow Functions

• Parameter의 수에 따라 다음과 같이 Arrow Functions 가능

Zero Parameters
const functionName = () => {};
One Parameter
const functionName = paraOne => {};
Two or more Parameters
const functionName = (paraOne, paraTwo) => {};

• implicit return
  1)single-line block일경우 {}필요하지 않음.
  2)return keyword제거 가능

1)
const squareNum = (num) => {
  return num * num;
};
//다음과 같이 변환 가능하다
 const squareNum = num => num * num;

2)
const plantNeedsWater = (day) => {
  return day === 'Wednesday' ? true : false;
};
//다음과 같이 변환 가능하다
const plantNeedsWater = day => 
  day === 'Wednesday' ? true : false;