JavaScript

JavaScript-함수

도도.__. 2023. 7. 11. 16:25

함수(Function)

  • 함수 : 처리해야 할 과제에 따라 기능별로 여러 명령을 묶어 놓은 것.
  • 자바스크립트는 소스를 해석할 때 함수 선언 부분을 가장 먼저 해석한다. -> 선언한 위치와 상관없이 함수를 실행할 수 있다.
  •  장점
    • 시작과 끝을 명확하게 구분할 수 있다.
    • 같은 기능이 필요할 때마다 해당 함수를 실행할 수 있다.
  • 함수 선언 : 함수가 어떤 명령을 처리해야 하는지 미리 알려주는 것.
  • 함수 실행 : 선언한 함수를 가져와 사용하는 것.

여러 번 사용할 수 있는 함수

  • 함수의 '재사용성' : 입력을 바꿔 여러 번 사용할 수 있는 함수의 성질.
  • 매개변수(parameter) : 함수를 정의할 때 사용되는 변수.
  • 인수(argument) : 함수가 호출될 때 매개변수에 실제로 담기는 값.
  • function 함수이름 (매개변수) { 실행 코드 }
function addNum(a,b) { //함수 정의
	var sum = a + b;
    alert(sum);
}
addNum(4,6); //함수 실행 출력=>10

함수 표현식

  • 함수 자체가 식(expresstion)이기 때문에 함수를 변수에 할당하거나 다른 함수의 매개변수로 사용할 수 있다. 콜백 함수 또는 함수를 값으로 다루어야 할 때 사용된다.
    • 콜백 함수 : 다른 함수의 인자로 전달되어 나중에 호출되는 함수
  • 1회성으로 만들어졌기 때문에 불필요한 메모리를 아낄 수 있다.
  • 익명 함수, 즉시 실행 함수, 화살표 함수
//콜백함수 : 다른 함수의 인자로 전달되어 나중에 호출되는 함수
function calculate(a, b, operation) {
  return operation(a, b);
}

var add = function(x, y) {
  return x + y;
};

var multiply = function(x, y) {
  return x * y;
};

console.log(calculate(2, 3, add)); // 출력=> 5
console.log(calculate(2, 3, multiply)); // 출력=> 6
//calculate 함수 내에서 operation 매개변수로 전달된 함수가 실행되어 결과를 반환한다.

함수 선언식 vs 함수 표현식

  • 함수 선언식은 호스팅(hosting)이 발생하여 스코프 내 어디에서든지 호출할 수 있다.(=함수가 정의되기 전에도 호출할 수 있다.)
  • 함수 표현식은 호스팅이 발생하지 않으며 변수에 할당되어 선언된 이후에만 호출할 수 있다.
//함수 선언식
function addNum(a,b) {
	var sum = a + b;
    alert(sum);
}
addNum(4,6);

//함수 표현식
var add = function(a,b) {
	return a + b;
}
var sum = add(4+6);
sum;
 

JavaScript-스코프(scope), 호이스팅(hoisting), var, let, constant

스코프(scope) 변수를 선언하고 변수가 적용되는 범위. 지역 변수, 전역 변수 지역 변수/로컬 변수(local variable) : 한 함수 안에서만 사용할 수 있는 함수. 전역 변수/글로벌 변수(global variable) : 소스

dodo5517.tistory.com

익명 함수

  • 익명 함수 : 이름이 없는 함수.
var add = function(a,b) { //함수 이름이 없음
	return a + b;
}

즉시 실행 함수

  • 함수를 정의함과 동시에 실행하는 함수
//첫 번째 방법
(function(){
	실행코드
}());

//두 번째 방법
(function(){
	실행코드
})();

//세 번째 방법
(
	function(){
		실행코드
	}
)();

//네 번째 방법
(
	function(){
		실행코드
	}
());
var result = (function(a, b) {
  return a + b;
}(4, 6));
alert(result);

화살표 함수

  • 익명 함수에만 사용할 수 있다.
var sum = function(a,b){
	return a+ b;
}
//화살표 함수
var sum = (a,b) => a + b; //중괄호 안에 식 하나뿐이므로 return 생략 가능

return문

  • 함숫값을 반환한다(return) = 함수를 실행한 후 그 결괏값을 함수 밖으로 넘긴다.
  • 반환 위치 = 함수를 호출한 위치


도슐랭스타
★★★☆☆ : 오...!
함수 표현식이 너무 생소하다..! 안 써봐서 그런 것 같다. 그래도 새로운 내용이 있어서 흥미롭다!