기본기부터시작하는 IT생활

함수란?

• 함수란 어떠한 기능을 위해 모인 코드의 집합이다. 함수는 여러번 재사용이 가능하고 개발자가 필요한 기능을 만들 수 있다는 점에서 개발에서 빼놓을 수 없는 필수적인 요소중에 하나이다. 이러한 함수를 선언하는 방법에는 여러방법이 있다. 함수에대해 간략히 설명하자면 함수는 자판기이다. 우리는 자판기에서 무언가를 사먹을때 돈을 넣고 물건을 받는다. 이때 돈이 매개변수이고 물건이 리턴값이다. 즉, 함수는 매개변수를 받고 코드를 실행하여 리턴값을 주는 하나의 집합인것이다. 이때 주의할점이 매개변수와 리턴값은 각각 필수적인 요소가 아닌 선택적 요소이다.  

함수 선언식

• 함수 선언식은 명시적으로 함수를 선언할 수 있다는 점에서 가장 접근하기 쉽다. 하지만 함수 선언식은 호이스팅 이라는 문제점을 가지고 있기때문에 아래에 나오는 함수 선언방법에 비해서는 덜 사용된다. 호이스팅에대해 간략히 설명하자면 인터프리터가 코드를 실행할때 변수,클래스 등을 맨위로 끌어올리는것을 의미한다. 보통 코드의 유지보수 및 가독성을 위해 호이스팅이 되는 함수선언식은 지양하는 편이다. 함수 선언식의 양식은 아래와 같다.

//함수 선언식의 구조
function 함수이름(매개변수){
	실행코드
    return 리턴값;	//해당 부분은 필수적이지 않음
}

//함수 작성 예시
function hello(){
	console.log("Hello");
}

//매개변수를 사용한 함수의 예시
function hello(name){
	console.log("입력된 이름: " + name);
}


//리턴값을 활용한 경우
function hello(){
	return "hello";
}

let words = hello();



//함수를 호출하는 법
hello();

함수 표현식

• 함수 표현식은 변수에 함수를 대입하는 모양의 함수 선언방식이다. 이는 호이스팅의 대상이 아니기 때문에 함수의 위치에따라 오류가 발생하기도 한다. 아래는 함수표현식의 예시와 주의점에대한 예제코드이다.

//함수 표현식의 구조
데이터타입 변수명 = function(매개변수){
	실행코드
}

//함수 표현식의 활용 예시
const hello = function(){
	console.log("Hello");
}


//매개변수를 활용한 경우
const hello = function(name) {
	console.log(name);
}


//리턴값을 활용한 경우
const hello = function(){
	return "hello";
}

let words = hello();


//함수 호출방법
hello();



//호이스팅에대한 주의점

//호출이 함수보다 위에 위치할경우
hello();	//오류

const hello = function(){
	console.log("Hello");
}

//호출이 함수보다 아래에 위치할경우

hello();	// "Hello" 출력

화살표 함수

• 화살표 함수는 함수표현식에서 조금더 간결화한 함수 선언방법이다. 근본적으로 함수표현식과 다르지 않으나 가동석이 떨어지므로 코딩을 처음 접한 사람이 본다면 이게 뭐지 라는 생각이 들것이다. 화살표 함수의 예제는 아래와 같다.

//화살표 함수의 예시
데이터타입 함수이름 = (매개변수) => {
	실행코드;
    return 리턴값;
}

//사용 에시
const hello = () => {
	console.log("hello");
}


//매개변수를 활용한 예시
const hello = (name) => {
	console.log(name);
}


//리턴값을 활용한 예시
const hello = () => {
	return "hello";
}

let words = hello();



//함수 호출 방법
hello();

위 세가지 방법이 함수를 선언하는 방법은 다 다르지만 함수를 호출하는 방법은 셋모두 동일하다.