JavaScript study :: 함수

   자바스크립트에서 함수를 만들 때 사용하는 함수 선언식과 함수 표현식. 함수의 호출도 똑같은 방식으로, 함수의 이름을 호출하거나 변수이름을 호출하면 일어난다. 그렇다면 이 두가지는 어떤 점이 다른 걸까?! 당연한 사실이지만 문법 작성법과, 호출할 수 있는 타이밍이 다르다. 자바스크립트는 코드가 위에서부터 아래로 순차적으로 실행되고, 즉시 결과를 반환하는 "인터프리터 언어"다. 하지만 함수 선언문은 함수 생성 전이여도 함수를 호출하여 실행할 수가 있다는데, 어떻게 가능한걸까?

   이번 포스팅에서는 함수 선언문과 함수 표현식, 그리고 추가로 화살표 함수에 대해 알아보고 호출 위치에 상관없이 함수가 실행될 수 있는 원리인 호이스팅까지 정리를 해보도록 하자.

 

1. 함수 선언식

- function 키워드를 이용해서 함수를 생성하는 방식

- 어디서든 호출이 가능하다. 심지어 함수를 정의하기 전 단계인, 위에서도 호출이 가능하다.

// 함수 선언식

showError();   // 호출 가능

function showError() {
	console.log("error");
}

showError();	// 호출 가능

 

2. 함수 표현식

 - 함수를 변수 이름에 담아서 표현하는 방식

- 함수 표현식으로 함수를 정의하면, 호이스팅이 일어나지 않는다. 

- 함수 표현식은 코드에 도달했을 때 함수가 생성이 된다. 따라서 함수 선언을 먼저 한 뒤에만 호출을 할 수 있다. 

// 함수 표현식

let showError() = function() {
	console.log("error");
}

showError();	// 아래에서 호출만 가능

 

3. 호이스팅

- 그렇다면 호이스팅은 뭘까?

ㅃㅃㅂ호이스팅 = 끌어올리기

 

- 함수 선언문에서 예를 들었던 코드처럼, 함수의 호출을 먼저 하고 정의를 나중에 했음에도 코드가 제대로 실행되는 것을 의미한다. 즉, 함수의 선언이 코드의 제일 맨 윗부분에서 일어난다는 의미다. 함수 표현식을 사용했을 때는 호이스팅이 발생하지 않고, 함수 선언문은 호이스팅이 발생하기 때문에 코드를 구현한 위치에 상관없이 함수의 호출이 가능하다. 조금 더 편하게 코딩하기 위해서는, 함수 선언문을 쓰는 게 좋다.

 

4. 화살표 함수

- 화살표를 이용해서 함수를 선언하는 방식

- function 키워드와 식별자를 제거해주고 => 를 넣어준다.

- 화살표함수로 변경하면 함수를 호출할 수 있는 방법이 없으니, 함수 표현식으로 한번 더 정리를 해준다.

1. 매개변수가 없는 함수의 경우

// 함수 선언식

function showError() {
	console.log("error");
}

// 화살표 함수
// 매개변수가 없으면 () 괄호로 표현
let showError = () => {
	console.log("error");
}

 

2. 매개변수가 1개인 함수의 경우

const sayHello = function(name) {
	const msg = `hello, ${name}`;
	console.log(msg);
};


// 화살표 함수
// 1개인 경우 () 괄호 생략 가능
const sayHello = name => {
	const msg = `hello, ${name}`;
	console.log(msg);
};

 

3. 매개변수가 2개인 함수

const add = function(num1, num2) {
  return num1 + num2;
};


// 화살표 함수
const add = (num1, num2) => {    
  return num1 + num2;
};


// 추가 작업
// 중괄호안에서 바로 리턴문을 사용하여 데이터를 반환하는 코드라면 중괄호와 return을 지울 수 있다.
const add = (num1, num2) => num1 + num2;

 

4. 객체를 반환하는 함수

const getObject = () => {
	return {
    	id : "뉴싹",
        age : 32
    }
}

// 화살표 함수 추가 작업

// 중괄호 바로 안의 코드가 return이므로 return과 중괄호를 삭제하고,
// 내부에 객체를 갖고있는 함수라는 걸 알 수 있도록 소괄호로 한번 감싸줘야한다.
const getObject = () => ({
    id : "뉴싹",
    age : 32
})

 

신기한 화살표 함수. 만드는 법도 중요하지만, 거꾸로 화살표 함수를 보고 풀어낼 수 있게끔 많은 연습을 해서 익숙해져야겠다.

오늘의 포스팅은 두개의 유튜브를 참고해서 정리했으므로 링크도 두개!

 

 

* 자바스크립트 참고한 유튜브 강의 : 코딩앙마

 

* 화살표 함수 참고한 유튜브 강의 : 수코딩