My Melody Kawaii

JAVASCRIPT

함수의 종류는 무엇이 있을까요?

younajeong 2023. 2. 27. 19:53

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자
728x90

함수란?

자바스크립트 프로그램은 단순히 하나의 동작이 아닌 여러가지 동작이 연결되어 실행을 합니다. 동작해야 할 목적대로 여러 개의 명령을 묶는 것을 '함수'라고 합니다. 소스를 함수로 분리해 놓으면 필요할 때마다 원하는 기능만 따로 실행 할 수 있고, 같은 기능이 필요한 다른곳에서 다시 사용 할 수 있습니다. 그러므로 복잡하게 처리할 기능이 많다면 기능별로 나누기 좋은 아주 효과적인 방법입니다. 처음에는 어색할 수 있는 단어겠지만 잘 외워 두신다면 자바스크립트를 할 때 유용하게 사용하실 수 있습니다! 그러면 함수의 종류를 살펴 보도록 하겠습니다.

 

 

01. 선언적 함수 

function func (){

//function이라는 예약어를 사용하고 함수 이름을 적고 소괄호와 중괄호를 적습니다.

	document.write("실행합니다.");
}

//실행문을 설정하여 실행시킵니다.

 

선언적 함수에 대해서

  • 선언적 함수는 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.
  • 변수나 함수를 선언하지 않고 호출 하였을 때는 에러가 발생하지만 var로 선언한 변수와 선언적 함수는 변수,함수 선언 이전에도 호출해도 에러가 발생하지 않습니다.
  • 이러한 자바스크립트 성질을 '끌어올리기' 호이스팅 이라고 합니다.

 

02. 익명 함수

const func = function (){

//함수 이름이 생략된 익명 함수입니다.

	document.write("실행하였습니다.");   
}
func();
//실행문을 설정하여 불러옵니다.

 

익명 함수에 대해서

  • 익명 함수는 변수에 함수 데이터를 저장하여 변수를 함수처럼 사용할 수 있도록 합니다.
  • 익명 함수는 변수 선언 이후에 호출해야 합니다.
  • 익명 함수 중에는 일회성으로 사용되는 즉시 실행 함수가 있습니다. 선언과 동시에 함수가 실행되며 함수명이 없기 때문에 재호출 할 수 없습니다.

 

03. 매개변수 함수

function func (str){
//변수를 전달 시키는 함수 입니다 첫번째로 변수를 적어주면

	document.write(str);
//마지막으로 변수 값을 실행합니다. 

}
func("실행되었습니다.");
//두번째로 실행되었습니다가 설정됩니다.

매개 변수에 대해서

  • 함수를 호출할 때 전달하는 변수를 '매개 변수'라고 합니다.
  • 매개 변수는 개수가 정해져 있지만 개수를 정할 수 없는 함수를 만들어야 하는 경우도 발생합니다 이런 경우 arguments객체를 이용하여 함수를 만드는 방법도 존재합니다.

 

04.  리턴 값 함수

function func (){
const str = "실행되었습니다."
return str;
//실행문은 아니지만 변수 안에 들어있는 결과를 의미합니다.
}
document.write(func());
//실행문안에 함수 값을 실행시켜줍니다.

 

리턴 값 함수에 대해서

  • 함수를 통해 저리된 결과를 반환 시켜주는 명령어 입니다.
  • 함수 안에서 return을 마나게 되면 해당 함수를 호출 한 곳으로 데이터를 반환 시키고 함수는 종료 가 됩니다.

 

05.  화살표  함수

//화살표 함수

//01. 선언적 함수

func = () => {
 //function을 생략후 '='와 '=>'를 추가하여 화살표 함수로 만들었습니다.
 
	document.write("실행되었습니다.");
}
func();

//02. 익명 함수

const func = () => {
//가운데에 있던 function을 생략 후 '=>'를 추가하여 화살표 함수로 만들었습니다.

	document.write("실행되었습니다.");
}
func();

//03. 매개변수함수
func = (str) => {
//앞에 있던 function을 생략후 '='와 '=>'를 추가하여 화살표 함수로 만들었습니다.
	documet.write(str);
}
func("실행되었습니다.");

//04. 리턴값 함수
func = () => {
//앞에 있던 function을 생략 후 '='와 '=>'를 추가하여 화살표 함수로 만들었습니다.
	const str = "실행되었습니다.";
    return str; 
}
document.write(func());

 

화살표 함수에 대해서

  • =>를 이용하여 함수를 간결하게 표현할 때 사용합니다.
  • 화살표 함수는 앞에 나왔던 선언적 함수, 익명함수, 매개변수 함수, 리턴 값 함수에 나와 있는 fuction을 생략하고 부등호 '='와 '>'를 합쳐 코딩한 함수의 형식입니다.
  • 단일  명령문일 경우에는 함수의 중괄호 { }와 return을 생략할 수 있습니다.