[JS Deep Dive] 12장 -함수 (1)

 

 

우리 함수는 많이 들어봤다. 

수학에서의 함수.. 파이썬에서의 함수... 

자바스크립트의 함수도 비슷한 역할을 수행한다. 

 

1. 함수

• 함수는 일련의 과정을 문 으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
• 이때 함수도 입력을 받아서 출력을 내보낸다.
• 매개변수 : 함수 내부로 입력을 전달받는 변수
• 인수 : 입력
• 반환값 : 출력
• 함수 정의 : 함수를 생성
• 함수 호출 : 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시하여 반환값 반환

이미지 출처: https://velog.io/@boyeon_jeong/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98

 

 

🤔 함수는 왜 사용할까 ~? 

결론적으로 말하면 " 코드의 재사용 " 때문이다. 

같은 코드를 중복해서 작성하는 것이 아니라 미리 정의된 함수를 재사용하기 위해서다! 

따라서 이렇게 코드의 재사ㅑ용이 일어나면 유지보수의 편의성을 높이고 실수를 줄여 코드의 신뢰성을 높일 뿐만 아니라 코드의 가독성도 높일 수 있다. 

 

 

2. 함수 리터럴

• 📌 함수는 객체다! 
• function 키워드, 함수 이름, 매개변수 목록, 함수 몸체로 구성되어있음
• 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다. 
• 또한 일반 객체에는 없는 함수 객체만의 고유한 프로퍼티를 가진다. 

 

 

3. 함수 정의

(1) 함수 선언문 

• 함수 리터럴과 형태 동일
• 함수 리터럴은 함수 이름을 생략할 수 있으나... 함수 선언문은 함수 이름을 생략할 수 없음
• 함수 선언문은 표현식이 아닌 문이다.!!
• 따라서 완료값 undefined 가 출력됨 
• 함수 선언문은 표현식이 아니라 문이므로 변수에 할당할 수 없다. 
• 함수 선언문이지만 함수 이름으로 호출되는 것이 아니라 사실은 식별자로 호출되는 것이다.
• 근데 변수에 할당이 되는 것처럼 보임...

=> 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고
거기에 함수 객체를 할당한다.
따라서 함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다. 


즉 함수 선언문으로 생성한 함수를 호출하는 것은 함수 이름 add 가 아니라 자바스크립트 엔진이 암묵적으로 생성한 식별자 add 

 

function add(x,y) {
	return x+y
}

 

(2) 함수 표현식

• 함수는 일급 객체(값의 성질을 갖는 객체) 이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 
• 함수 선언문은 "표현식이 아닌 문" 이고 함수 표현식은 "표현식인 문" 이다. 

var add = function (x,y) {
	return x+y
};

 

(3) function 생성자 함수

• 클로저를 생성하지 않는 등 함수 선언문이나 함수 표현식으로 생성한 함수와 다르게 동작

var add = new Function ('x', 'y', 'return x+y' )

 

(4) 화살표 함수

• function 키워드 대신 화살표 = > 를 사용해 좀 더 간략하게 함수 선언함
• 화살표 함수는 항상 익명함수로 정의 
• 선언 뿐만 아니라 동작도 간단함 

var add = (x,y) => x+y;

 

4. 반환문

• 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다.
• 반환문 이후에 다른 문이 존재한다면 그 문은 실행되지 않고 무시된다. 
• 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. 
• return 뒤에 반환값으로 사용할 표현식을 명시적으로 지정하지 않으면 undefined 반환한다.