함수(Function)와 메서드(Method)

<SeongHun />·2022년 4월 17일

JavaScript TIL 멋쟁이 사자처럼

JavaScript

목록 보기

6/12

오늘의 키워드📌

함수
- 호이스팅
- 익명 함수, 기명 함수
- 즉시 실행 함수
- 콜백 함수
메서드

1. 함수

1-1. 호이스팅(Hoisting)

함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

const a = 7

double()

// 함수 표현
const double = function () {
	console.log(a * 2)
}

// TypeError 발생

자바스크립트는 위에서 아래로 해석하기 때문에 double() 함수 호출이 함수 표현부 보다 위에 있으므로 타입에러가 발생하게 된다.

const a = 7

double()

// 함수 선언
function double() {
	console.log(a * 2)
}

// 14 출력

함수 표현이 아닌 함수 선언시에는 함수 선언부가 유효범위 최상단으로 끌어올려지는 호이스팅으로 인해 함수 호출이 함수 선언보다 위에 있어도 별다른 에러없이 실행 가능하다.

1-2. 익명 함수, 기명 함수

// 기명(이름이 있는) 함수
// 함수 선언
function hello() {
	console.log('Hello~');
}


// 익명(이름이 없는) 함수
// 함수 표현
let world = function () {
	console.log('World~');
}


// 함수 호출
hello();  // result: Hello~
world();  // result: World~

익명 함수는 이름이 없기 때문에 호출할 수 없으므로 데이터로서 활용하거나 변수에 저장해서 사용한다.

함수의 이름을 명시하면 함수를 선언한다고 한다.
이름이 없는 익명 함수를 변수에 할당하는 것은 함수를 표현한다고 한다.

1-3. 즉시 실행 함수

// 즉시실행함수
// IIFE, Immediately-Invoked Function Expression

const a = 7

function double() {
	console.log(a * 2)
}
double();  //result: 14

// 즉시 실행 함수 1
(function () {
	console.log(a * 2)
})();  //result: 14

// 즉시 실행 함수 2
(function () {
	console.log(a * 2)
}());  //result: 14

함수를 생성하자 마자 실행할 수 있는 즉시 실행 함수와 double() 함수를 자바스크립트 엔진이 구분할 수 있도록 ; 을 붙여주자. 붙이지 않는다면 자바스크립트 엔진은 double() 함수와 즉시 실행 함수를 명확하게 구분하지 못하기 때문에 타입에러가 발생하게 된다.

즉시 실행 함수는 ()(); 형태와 (()); 형태가 있다.

1-4. 콜백 함수

콜백(Callback) 함수란, 함수의 인수로 사용되는 함수를 뜻한다.

'이게 무슨 말이여?'

예를들어 setTimeout(함수, 시간) 함수에 들어가는 인수 중에 첫 번째 인수인 함수가 콜백에 해당하는 것!

'그럼.. 어디에 쓰이는 거지?'

function timeout() {
	setTimeout(() => {
		console.log('Hello!')
	}, 3000)
}
timeout()
console.log('Done!')

//result: Done!
//result: Hello!

위 예제를 살펴보면 timeout() 함수가 먼저 호출 되더라도 Done!이 먼저 출력이 되고 있는데, 이는 setTimeout 함수에 의해 3초 뒤에 Hello! 가 출력되기 때문이다.

그렇다면 Hello!가 먼저 출력되고나서 Done!이 출력될 수 있게 하려면 어떻게 해야할까?
이때 사용하는 것이 콜백 함수다!

function timeout(callback) {
  setTimeout(() => {
  	console.log('Hello!')
    callback()
  }, 3000)
}
timeout(() => {
  console.log('Done!')
})

//result: Hello!
//result: Done!

timeout() 함수에 인수로 새로운 화살표 함수를 넣어주는데 이때 새로운 화살표 함수가 바로 콜백 함수가 되는 것이다. 그리고 콜백 함수 내부에는 Done!을 출력해주고, timeout() 함수에 인수로 들어간 콜백 함수를 받아줄 매개변수 callback을 만들어 준 뒤 실행을 보장하고 싶은 곳에 함수를 호출 하듯이 callback()으로 작성해주자.

즉, 인수로 사용되는 함수가 콜백이고, 콜백은 실행 위치를 보장하는 용도로 많이 활용된다.
로직이 굉장히 복잡해서 처리하는데 오래 걸리는 함수에 콜백함수를 사용하면 처리가 다 끝난 후에 실행을 보장할 수 있기 때문이다.

2. 메서드

// 객체 데이터
const 멋사 = {
	name: '아기사자',
	age: 1,
	// 메소드(Method)
	getName: function () {
		return this.name;
	}
};

const hisName = 멋사.getName();
console.log(hisName); // result: 아기사자
// 혹은
console.log(멋사.getName()); // result: 아기사자