TIL # 97 : [JavaScript] Fundamentals (3) Functions

Index

1. Basic Syntax
2. Parameters and Arguments
3. Default Parameters
4. Helpter Functions
5. Function Expressions
6. Arrow Functions
7. Concise Body Arrow Functions

Basic Syntax:

function helloWorld() {
	console.log('You are about to greet the world!');
}

1. function keyword 선언하기
2. helloWorld()와 같은 indentifier 이름 정하기
3. function의 body이자 task 수행하는 statement block들을 {} 중괄호로 다 감싸기

Hoisting:

function을 선언하기 전에 call하기

console.log(helloWorld());
function helloWorld() {
	console.log('You are about to greet the world!');
}
// result : 'You are about to greet the world!'

Parameters and Arguments

• 함수를 선언할 때 매개 변수를 지정할 수 있다
• 매개 변수를 사용하면 함수가 입력을 받아들이고 입력을 사용하여 작업을 수행할 수 있다
• call할 때 함수에 전달되는 정보에 대해서는 매개 변수를 placeholder로 사용한다

function calculator(num1, num2) { // num1, num2는 parameters
	conosle.log(num1 + num2)
}

calculator(2, 3) // 2,3는 arguments

Default Parameters

• ES6에 추가된 feature
• 하수에 argument가 없거나 혹은 argument가 undefined일 때의 경우에 Default parameter에 값을 지정해준다

function callName(name='Minji') { // num1, num2는 parameters
	console.log(`Hey ${name}👻`)
}

callName('Erica') // Hey Erica!
callName() // Hey Minji!

Helper Functions

함수 안에 함수 선언하기.

function taxcalc(num){
  return ((num * 0.1) + num);
}

function dinnerTotalAmount(add){
	return taxcalc(add) + 100
}

console.log(dinnerTotalAmount(5)); // 105.5

Function Expressions

• Function Expression을 활용해 함수를 선언할 수 있다
• expression 안에 함수를 선언하려면 function keyword를 활용해야 한다
• Function Expression 특징 : function 이름 생략
• 이름 없는 function : anonymous function이라고 부른다

// 변수 선언
const getMulti = function(num1, num2) {
  const multi = num1 * num2;
  return multi
}

// 조건문 선언
const getMulti = function(num1, num2) {
  if (typeof num1 == 'number' && typeof num2 == 'number') {
  	return num1 * num2
  } else {
  	return 'Please input a number.'
  }
}

console.log(getMulti(3, 4))

1. const keyword와 함께 함수의 identifier 혹은 variable을 이름을 지정
2. 선언한 identifier 혹은 variable의 값을 function keyword으로 anonymous function을 parameters, 중괄호와 함께 선언한다.

function expression 호출하기:

변수이름(argument1, argument2)

⛔️ Function Expression은 hoisting 불가

Arrow Functions

ES6 : Fat Arrow Notation

• function keyword 없이 () =>을 활용해 함수 선언하기
• () 안에 parameter를 넣어야 한다

const rectangleArea = (width, height) => {
  let area = width * height;
  return area;
};

Concise Body Arrow Functions

1. parameter를 하나만 받는 함수는 괄호 안에 해당 parameter를 넣을 필요가 없다
2. 그러나 parameter를 0개 혹은 여러개를 받는 함수는 꼭 괄호 안에 넣어야 한다

// parameter 0개
const func = () => {};

// parameter 1개
const func = num1 => {};

// parameter 2개
const func = (num1, num2) => {};

3. single line block은 중괄호가 필요 없다. return keyword 없이 바로 해당 line에서 실행되는 값을 return 한다. 이를 implicit return이라고 한다

// single line block
const addFunc = num => num + num;

// multi line block
const addFunc = num => {
  result = num + num;
  return result;
}

⛔️ single line block은 return keyword가 없다!