[JS] 05. 자바스크립트의 심장, 함수(Function)

자바스크립트에서 함수는 단순히 명령어의 묶음을 넘어, 변수에 담거나 다른 함수의 인자로 전달할 수 있는 일급 객체로서 매우 강력한 힘을 가진다.

 

1. 함수의 선언과 표현 (호이스팅의 차이)

① 함수 선언문 (Function Declaration)

가장 기본적인 방식이다. 자바스크립트 엔진이 코드를 실행하기 전 함수 선언부를 최상단으로 끌어올리는 호이스팅(Hoisting)이 적용된다.

 

호이스팅 : 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(Import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상

 

 

② 함수 표현식 (Function Expression)

함수를 변수에 할당하는 방식이다. 호이스팅이 발생하지 않아 반드시 선언한 뒤에만 호출할 수 있다. (더 안전한 코딩이 가능하다.)

 

 

2. 현대적인 문법: 화살표 함수 (Arrow Function) - 람다식

ES6에서 도입된 방식으로, function 키워드를 생략하고 =>를 사용해 간결하게 작성한다.

 

 

3. 다른 함수를 돕는 콜백 함수 (Callback Function)

함수의 인자로 또 다른 함수를 넘겨주는 방식이다. 특정 일이 끝난 뒤에 실행! 이라고 예약하는 것과 같다.

 

 

왜 콜백 함수를 쓸까?

 

아래 코드 참조 (계산기 시스템)

 

C#에서 델리게이트를 써서 메서드를 유연하게 교체하듯, JS에서도 콜백을 쓰면 calculator라는 함수 하나로 더하기, 빼기, 곱하기를 모두 처리할 수 있는 확장성을 얻게 된다.

 

 

특히 나중에 비동기 작업(서버에서 데이터 가져오기 등)을 할 때, 데이터 가져오기가 끝나면 이 콜백 함수를 실행해줘라는 식으로 정말 많이 쓰인다.

 

 

 

함수를 이해할 때 가장 중요한 것은 데이터가 어디로 들어가서(매개변수), 어떻게 처리되고, 어디로 나오는가(return)이다.

1. 함수의 구성 요소 (Input & Output)

• 매개변수(Parameter): 함수를 정의할 때 외부에서 받아올 데이터를 담는 변수 이름이다.
• 인수(Argument): 함수를 실제로 호출할 때 매개변수에 던져주는 실제 값이다.
• 반환값(Return): 함수가 모든 작업을 마치고 밖으로 내뱉는 결과물이다. return이 실행되면 함수는 즉시 종료된다.

 

함수 표현식과 화살표 함수를 활용한 콜백 예제

 

 

 

계산기 시스템 (화살표 함수 중심)

 

 

매개변수 vs 인수 (헷갈림 주의!)

• 매개변수(Parameter): 함수 내부에서 쓰이는 함수의 설계도 속 변수 (위 코드의 a, b).
• 인수(Argument): 함수를 부를 때 넣는 실제 데이터 (위 코드의 10, 20).