Function

여러번 재사용이 가능.

함수 선언

• one function = one thing ( 하나의 함수는 하나의 일만 하는게 좋다.)

• function name(param1,param2){body... return ..}```

• 함수의 이름은 동사로! ex) addItems,createItem ...
• function is Object!! - 변수 할당 가능, param으로 사용 가능

function print(){
 return console.log("Hello");
}

위의 함수는 의미없는 함수. 계속 같은 값만 반복되기 때문.

fucntion print(message){
  return console.log(message);
}

위와 같이 parameter를 활용하여 함수를 작성해 주면 좀 더 범용적으로 사용 가능하다!

• 다만 js에서는 function의 return값이 어떤 타입인지 불명확하다.
• 이같은 단점을 극복하기 위해 후에 반드시 Typescript를 배워보도록 하자!! ㅎㅎ (일단 pass..)

Parameter

• premetive parameter = value를 전달
• object parameter = reference를 전달

Object를 function의 parameter로 전달하게 되면 메모리에 변경된 값의 reference를 저장. reference는 해당 값을 가리키는 '주소' 라고 생각하자!

function changeName(obj){
  obj.name = 'monkey';
}

const animal = {name:'bird'};
changeName(animal);

console.log(animal.name);

Default Parameter

function example(name, age = 'unknown'){
  console.log(`${name} +은 ${age}살`);
}
example('olaf');

• ES6에 새롭게 추가된 문법으로, 파라미터값을 입력하지 않았을 경우 default값으로 들어갈 값을 정해 줄 수있다.
• olaf만 입력해 줘도 age 값은 unknown이 적용되어 출력된다.

Rest Parameters

function printAll(...args){
  for(let i; i<args.length;i--){
    console.log(arg[i]);
}
  
printAll('apple','mango','banana');

• 배열 형태로 인자를 전달 할 수 있다!

Early return early exit

좋은 코드 작성습관을 기르자!

• 값이 undefined 일때
• 값이 false 일때
• 값이 -1일때
• 조건이 맞지 않는 경우 빠르게 return

function badFunction(num){
  if(num.point > 10){
 	// blah blah   
  }
}

function goodFunction(num){
  if(num.point <=10){
    return;
  }
   // logic...
}
 

function expression

함수는 위에서 말한 바와 같이 변수로 지정하여 사용 할 수 있다.

const person = function(){
	console.log('check');
}
person(); //변수를 함수처럼 사용 가능!

function declaration과의 차이

function sum(num1,num2){
 return num1+num2 
}

요런 방식이 function declaration

• 요 방식은 hoisting이 발생한다. js엔진이 함수가 선언된 부분을 상단으로 올려버리기 때문. < 정의하기도 전에 호출이 가능 >
• 하지만 function expression 방식은 hoisting이 발생하지 않는다.

Callback function

function expression 방식을 사용해 원하는 함수 원하는 시점에 호출 가능

function quize(firstQuize,secondQuize,result){
  if(firstQuize === 'monkey'){
    secondQuize();
  }else{
    result();
  }
}

//anonymous function
const secondQuize = function(){
 console.log('yes') 
}
//named function
const result = function print(){
  console.log('탈락');
}

quize('monkey',secondQuize, result);
quize('wrong',secondQuize,result);

• named function을 사용할 경우 디버깅이나 재귀 함수를 사용할 때 주로 사용한다.

Arrow Fuction

함수를 더욱 간결하게 사용할 수 있다.

const example = function(){
  console.log('숫자출력');
}

//arrow function으로 변환
const example = ()=> console.log('숫자출력');

• arrow function은 항상 anonymous function
• return 값도 가능!

const sum = function(a,b){
 return a+b 
}

// arrow function
const sum = (a,b)=>a+b;

IIFE : 선언과 동시에 호출

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

함수 전체를 묶어주고() 사용하면 선언과 동시에 호출이 이루어 진다! 참고 ㅎㅎ