본문 바로가기
  • 개발 삽질 블로그
프로그래밍/개발지식

[JavaScript]JS Function 함수

by 갹둥 2023. 10. 4.

함수 선언

function func1(num){
	return num * 10; 
}

function 키워드 사용

-함수의 인수로는 기본 타입, 문자열, 객체 전달 가능
-조건에 따른 함수 정의 가능

let fn;
if(condition == true){
	fn = function(num){
	return num * 100;
    }
}


함수 표현식

const greeting = function(name){
	return "hello, " + name;
}

참조 변수로 호출 가능


-함수는 호출될 때 스코프 내에 있어야 함

호이스팅

함수가 정의되기 전에 호출되어도 오류 없이 실행됨, JavaScript 인터프리터가 전체 함수 선언을 현재 스코프 최상단으로 끌어올림

const a = fn(2); // a = 4
function fn(number){
	return number * number;
}

 

위의 코드 실행 결과는 다음과 같음

function fn(number){
	return number * number;
}
const a = fn(2); // a = 4


*단 함수 호이스팅은 함수 선언에만 적용되고 함수 표현식에서는 사용할 수 없음
함수 표현식은 사용 전 정의해줘야함


재귀함수

function factorial(n){
	if(n==1) 
    	return 1;
	else 
    	return n * factorial(n-1);
}


함수 본문 내에서 자신을 호출하는 방법
1. 함수 이름
2. arguments.callee
3. 함수를 참조하는 변수( 표현식으로 쓰인 )

const foo = function bar(){
	//...
}

 

1. bar()
2. arguments.callee
3. foo()

 


클로저

함수를 일급 객체로 취급하는 함수형 프로그래밍에서 사용되는 중요한 특성
함수가 생성될 때 주변의 환경과 함께 갇히는 것
외부함수의 실행이 끝나서 외부함수가 소멸된 이후에도 내부함수가 외부함수의 변수에 접근할 수 있는 것

function outerFunction(){
	const a = 'Hello';
	function innerFunction(){
		console.log(a);
	}
	return innerFunction;
}
const inner = outerFunction();
inner(); // 'Hello'


디폴트 매개변수

ECMAScript 2015 이후 디폴트 매개변수 사용 가능, 매개변수가 넘어오지 않았을 경우 원래는 undefined인데 디폴트 매개변수로 디폴트 값 지정 가능

function mul(a, b=1){
	return a*b;
}
mul(12, 3) // 36
mul(2) // 2



나머지 매개변수

function mul(a, ...args){
	return args.map((x) => a * x ));
}
var arr = mul(2, 1, 2, 3, 4, 5, 6)
console.log(arr) // [2, 4, 6, 8, 10, 12]

...키워드 사용하여 정의, 여러 인자들을 배열처럼 사용 가능

화살표 함수

함수 표현식에 비해 짧고 간단하게 표현 가능

var list = [1, 2, 3, 4, 5];
list.forEach((e) => { 
	console.log(e);
});

const greeting = (name) => {
	console.log('Hello, ' + name);
}

greeting('GaEun Kim'); // Hello, GaEun Kim