210406_함수(Function)

함수 (Function) - "작은 기능의 단위"

특별한 목적의 작업을 수행하도록(값을 계산하는 등) 설계된 독립적인 블록(안에 코드 집합)
함수도 object
-> 변수 할당 가능, 매개변수로 전달됨 가능, 함수 리턴 가능
이러한 특징때문에 자바스크립트의 함수는 일급 객체

일급시민(First-Class Citizen) : 다음을 충족하는 값
 1) 변수(variable)에 담을 수 있다.
 2) 함수의 인자(parameter)로 전달할 수 있다.
 3) 함수의 반환값(return value)으로 전달할 수 있다.
일급객체(First-Class-Object) : 일급시민의 조건을 충족하는 객체
일급함수(First-Class-Function) : 일급시민의 조건을 충족하는 함수

함수의 구성

function say(something) {
  return something;
}

• keyword - function
• name - say
• parameter - (something)
  enclosed in parentheses and separated by commas.
• body - { statements...return something;
  }
  enclosed in curly brackets, {...}

input - ouput(return 값)을 가진다
-> 항상 return으로 출력값을 내야한다. 하지 않았을 경우 출력값은 undefined

"함수를 선언한다" - 함수를 만드는 것

함수 선언 방법

* 함수 선언식 Function declarations

function getWidthSquare(width, height) {
 return width * height;
};

선언 전에 호출해도 정상동작. -> 호이스팅 Hoisting

* 함수 표현식 Function expressions

const getWidthSquare = function (width, height) { (<-익명함수를 할당해줍니다)
 return width * height;
};

Hoisting 불가능, 익명의 함수를 변수에 할당, 변수 이름 통해 호출

* 화살표 함수 Arrow functions

const getWidthSquare = width, height => width * height;

매개변수 지정 방법
()   // 매개변수가 없을 경우
(width) // 매개변수가 한 개인 경우(소괄호를 생략 가능)
(width, height)  // 매개변수가 여러 개인 경우(소괄호를 생략 불가)

함수 바디 지정 방법
x => width * height    // 본문 한줄의 구문인 경우 : 중괄호(curly bracket){}, return 생략 가능(소괄호가능)
x => {                //  본문 여러줄 구문인 경우 : 중괄호, return 사용
 var y = height;
 return x * y;
};

함수의 호출

매개변수(parameter) :A parameter is a named variable passed into a function 함수 선언할 때 소괄호 안에 넣어주는 변수, 함수 실행시 입력따라 바뀔수 있는 변수이지만 let등 키워드 없이 사용가능

function getWidthSquare(width, height) {
 return width * height;
};

전달인자(argument) : 함수를 호출할 때 전달해주는 값. value (primitive or object) passed as input to a function. 함수 호출시 매게변수에 할당되는 값

getWidthSquare(2, 3);

함수 호출되면 : 특별 보관함에 있던 함수 조회됨 ->함수 코드 바디에 저장된 매개변수(parameter)들 함수 호출 시 있던 전달인자(argument)로 바뀜 -> parameter 평가 완료후 함수코드 순차적실행 -> 호출된 장소로 돌아가 함수 호출코드는 return값으로 변함

object 전체를 arument로 이용 가능 -function에 넣을 수 있음
function 스스로 부를 수 있다. -그들도 object이기에 method 가짐 ex) apply() ..

<return / console.log 차이점>

return : a statement that allows a function to output a value back to where it was called.

console.log : a function in JavaScript which is used to print any kind of variables defined before in it or to just print any message that needs to be displayed to the user.

function logFun(){
    console.log('I log stuff')
}

function returnFun(){
    return 'I return stuff'
}

const test1 = logFun();        //// undefined
const test2 = returnFun();   ///////'I return stuff'

함수 정리 참고 블로그
MDN