[JAY⌨️JS] 자바스크립트 함수 function 이해하기

1️⃣  함수, function 이란?

• 자바스크립트에서 function은 재사용 가능한 코드 블록을 의미.
• 아키텍처 파악, 유지 보수에도 유리!
• function 은 변수처럼 선언 가능.
• 입력값 parameter 을 받아 결과값을 출력 return 하는 방식.
• 보통 function(인자)라고 말하는데, parameter는 선언할 때, argument 는 실제 사용될 때의 용어. 파선아실! 암기.
• function은 다른 function의 (prarameter)로도 전달 가능.

 

 

2️⃣  자바스크립트의 호이스팅 Hoisting 과 함수 선언

• Hoisting은 변수와 함수 선언이 Scope의 맨 위로 옮겨지는 것.
• function 은 변수 var let const 와 마찬가지로 hoisting 된다.
  즉, 코드 순서상 선언되기 전에도 유효 하고 전역으로 영향을 끼칠 수 있다는 의미.
• 함수 선언문은 hoisting 되지만 함수 표현식은 hoisting되지 않는 것처럼 보이는데
  정확히 말하면 Temporal Dead Zone, 일시적 사각지대에 있기 때문에 안 되는 것처럼 보이는 현상을 말한다.
• 권장되는 방식이 있는 건 아니지만 되도록 hoisting의 영향을 최소화 하는 것이 유지보수 측면에서 좋음.

 

 

3️⃣  function 선언문

• function name() { return } 키워드를 사용해 선언.
• hoisting 발생.

add('기안',84) // hoisting
function add(x, y){
    return x + y;
}
// = 기안84


function delivery (a,b) {
    let food = '🍕pizza' 
    let result = `${food} ${a}개는 ${b}원`
    return result
}
delivery(1,10000) // = '🍕pizza 1개는 10000원'

 

 

4️⃣  function 표현식

• let name2 = function() { return } 키워드를 사용해 표현.
• let 키워드를 사용하여 function 을 변수에 할당.
• hoisting 발생하지 않음.

let add = function(x,y) {
    return x+y
}
add(100,100)  

// = 200

 

 

5️⃣  Callback function 콜백 함수 표현식

• function을 agument로 주고 내가 너를 나중에 실행시키겠다는 것.
• function을 나중에 불러줄게~ 콜백할게~ 라는 의미.
• hoisting 발생하지 않음.

//콜백함수
function bread(item, price) {
    return item + price;    
}

function coffee(item, price) {
    return item + price
}

function order(a,b) {
    return a('🥯Bagle',100) + b('☕Latte',300)
}

order(bread,coffee) // = '🥯Bagle100☕Latte300'

 

 

6️⃣  Arrow function 화살표 함수 표현식

• =>를 사용하여 함수를 간결하게 표현하는 방식.
• 일반적으로 단순한 함수를 구현할 때 사용.
• 아래 코드에서 arrow1 함수는 x를 제곱하여 반환하고, arrow2 함수는 x와 y를 더하여 반환.

//화살표함수 ~는! (손가락질) 이라는 행동을 상상하며 암기
let arrow1 = x => x**2 
let arrow2 = (x, y) => {
  return x + y;
};
arrow1(2);     // = 4
arrow2(10,10); // = 20


// 01. 콜백함수 생성
function callback(a, b, test) {
    let result = test(a,b);
    console.log(result)
};

//02. 신규 화살표함수 생성
let multiply = (c,d) => { return c * d };

//03. multiply 함수 콜백
callback(10,10,multiply);  // = 100

 

 

7️⃣  기명함수(named) 와 익명함수(anonymous)

• 기명함수는 이름이 있는 함수로 hoisting 가능, 디버깅에 용이.
• 익명함수는 이름이 없는 함수로 hoisting 불가, 한 번만 사용할 때 유용.
  변수에 할당되거나 다른 함수의 parameter로 사용.

// 기명함수
function namedFunction() {
  console.log("🔖i'm named function");
}
namedFunction();


// 익명함수 1
const anonymousFunction = function() {
  console.log("❓i'm anonymous function");
}
anonymousFunction();

// 익명함수 2 - 1회성으로 바로 실행
(function() {
    console.log('😎hello World')
})();

 

 

👩‍💻  요약!

• 자바스크립트에서 function은 재사용 가능한 코드 블록.
• function 은 변수처럼 선언 가능, 콜백 가능.
• 호이스팅 (hoisting)의 영향을 받으면 에러가 뜰 수 있으니 주의.
• JS에서 기본중의 기본! 자동완성 기능에 의존하는 것도 남의 코드 배끼는 것도 주의해야 한다 ...
  계속 타이핑해서 완벽하게 익숙해질 것!