Function

⭐️ 이전에도 함수에 대해서 알아보았는데, 이번엔 엘리의 드림코딩을 들으면서 알게된 부분들을 추가 하고자 한다. JS에서 Must know중 하나인 함수! 다시 한번 깊게 들어가보자.
Let's get started!

1) Function

-fundamental building block in the program.
-subprogram can be used multiple times.
-Performs a task or calculate a value.

2) Functional declaration

-function name (param1, param2){body...return;}
함수 선언문의 기본 문법이다.
-one function === one thing
하나의 함수는 하나의 일만 할 수 있다.
-naming: verb.
함수명은 명사인 noun의 형태가 아니라 동사 verb로 설정한다.
e.g. createCardAndPoiting -> createCard, createPoiting
-function is object in JS.

function printHello(){
  console.log('Hello');
}
printHello();

< Hello


function log(message){
  console.log(message);
}
log('hello@');
log(1234);


<hello@
1234

3) Parameters

-premitive parameters: passed by value
-object parameters(ex.const): passed by reference

function changeName(obj){    
obj.name = 'coder';    //changeName은 obj의 이름을 coder로 무조건 변경하는 함수
}

const ellie = {name: 'ellie'};
chageName(ellie);
console.log(ellie);

< {name: 'coder'}

*다만 obj parameter이므로 메모리 안 reference안에 name: 'ellie' 라는 오브젝트 값이 어딘가에 저장되고 변경

4) 배열(array) 출력하기 : rest parameter

 ES6에 추가된 부분이다.
만약 array를 출력하고 싶을 땐 parameter에 (...) 쓰면 된다.
args는 arrays의 약자이며 해당식은 for loop를 써서 반복하고 있다.

function printAll(...args){
	for(let i = 0; i < args.length; i++) {
     console.log(args[i]);
    }
}
printAll('dream','coding','ellie');

for loop를 보다 간단하게 쓰면 아래와 같은 방법이 있다.

function printAll(...args){
	for(let i = 0; i < args.length; i++) {
     console.log(args[i]);
    }

// 앞의 for loop와 동일한 내용!
**	for(const arg of args){
      console.log(arg);
    }
**
}
printAll('dream','coding','ellie');

5) local scope

우선 scope에 대한 정의를 보자면, scope란 변수에 접근할 수 있는 범위를 말한다.
그리고 scope는 1) global scope와 2) local scope로 두가지 타입이 있다.
Global Scope는 말 그대로 전역에 선언되어있어 어느 곳에서든지 해당 변수에 접근할 수 있다는 의미이고 Local Scope는 해당 지역(선언된 block안)에서만 접근할 수 있어 지역을 벗어난 곳에선 접근할 수 없다는 의미이다.
(*참고로 local scope은 '안에서는 밖을 볼 수 있지만 밖에서는 안을 볼 수 없다'고 생각하면 쉽다.)

local scope의 경우엔 block scope안에 정의된 변수로 블록 {}을 벗어난 곳에서 변수를 호출할 경우, 해당 변수는 not defined 되었다는 오류 메시지가 출력된다. 

아래는 함수안에 또다른 함수(중첩)가 들어갔다.
childMessage라는 변수가 자식으로 중첩되어있는데 이 경우에는 자식은 부모의 변수를 볼수도 그리고 호출 할 수도 있지만, 부모는 자식을 호출 할 수 없다. 😭 자식을 자식이라 부를 수 없달까...?!

6) arrow function

기본적으로 arrow function은

const simplePoint = function (){
  console.log('simplePring!');
};

// 화살표 함수로 바꾸려면 여기에서  function과 {}를 삭제해주면 된다.
const simplePrint = () => console.log('simpleprint!');
//계산하는 화살표함수의 예제
const add = (a,b) => a+b;

그런데 만약 arrow function 을 쓴 상태에서 함수안에 더 다양한 일들을 해야해서 {} 블록이 필요하다면?
블록을 넣는 대신 무조건 'return' 을 써야 한다!!

const simplePrint = () => console.log('simplePrint!');
const add = (a,b) => a + b ;
const simpleMultilpy = (a,b) **=>{**
**return a*b}**;

7) IIFE (Immediately Invoked Function Expression)

함수를 선언하고 호출할 때 따로 함수를 호출해줘야만 한다.
혹시 선언과 동시에 호출할 수 있는 방법이 있을까?
그럴땐 함수 전체를 괄호 () 로 묶고 바로 (); 처리해주면 실행 가능하다!

**(**function hello(){
console.log('IIFE');
}**)****();**    //();를 붙여서 바로 호출!

8)early return, early exit

이 부분은 추가적으로 현업으로 일할 때 알고있어야 할 스킬을 알려준 부분이다.
예를 들어 유저의 포인트가 10이상인 경우에만 무언가 업그레이드 되는 로직이 있다고 가정하자.
아래와 같이 if문으로 쓸 수 있겠지~?

function upgradeUser(user){
  if(user.point>10){
  //long upgrade logic...
  }

블록안에 로직을 많이 작성하게 되면 가독성이 떨어진다.
따라서 조건이 맞지 않을 때는 빠리 리턴을 해서 함수를 종료하도록 하는게 가독성도 높다.
좋은 케이스는 바로 아래!

function upgradeUser(user){
  if(user.point<=10){
  return;
}
//long upgrade logic

참고 : https://medium.com/@yeon22/javascript-%EC%8A%A4%EC%BD%94%ED%94%84-scope-%EB%9E%80-bc761cba1023
https://velog.io/@fromzoo/%ED%95%A8%EC%88%98%EC%8A%A4%EC%BD%94%ED%94%84-vs-%EB%B8%94%EB%A1%9D%EC%8A%A4%EC%BD%94%ED%94%84