함수
: 주어진 입력에 근거하여 어떤 처리를 실시한 뒤 그 결과를 돌려주는 구조
🔸 사용자 정의 함수를 정의하는 방법
1) function 명령을 정의하기
2) Function 생성자 경유로 정의하기
3) 함수 리터럴 표현으로 정의하기
4) 애로우 함수로 정의하기
1. function 명령을 정의하기
function 함수명(인수, ...) {
함수 안에서 실행되는 임의의 처리
return 반환값;
}◽ 함수명
① 식별자의 규칙에 맞춰서 정의
② 함수가 무슨 처리를 하고 있는지 이해할 수 있는 이름으로 정의
③ camelCase 기법으로 정의 (선두를 소문자, 단어의 구분을 대문자)
◽ 인수
: 함수의 동작을 결정하기 위한 파라미터
: 인수가 존재하지 않은 경우에도 함수의 뒤쪽 소괄호는 생략 불가능
: 가인수 - 인수를 받기 위한 변수(호출원으로부터 지정된 값을 받아들기 위해)
: 실인수 - 호출 측의 인수
◽ 반환값
: 함수가 처리한 결과 = 최종적으로 호출원에게 돌려주기 위한 값
: 함수 도중에 return 명령을 기술 했을 때, 그 이후는 처리가 실행되지 않음
: 반환값이 없는 함수는 retrun 명령을 생략 -> undefined를 반환함
function getTriangle(base, height) {
return base * height / 2;
}
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 결과 : 삼각형의 면적:52. Function 생성자 경유로 정의하기
: JavaScript에서 내장형 객체로 Function 객체가 있다.
: Function 생성자는 함수가 받는 가인수를 순서대로 늘어놓고 마지막에 함수의 본체를 지정하는 것이 기본이다.
: while/for 등의 반복 블록안, 빈번히 호출되는 함수 안에 사용하면 좋다.
var 변수명 = new Function(인수, ..., 함수의 본체);① var getTriangle = new function('base', 'height', 'return base * height / 2;');
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 결과 : 삼각형의 면적:5
② var getTriangle = function('base', 'height', 'return base * height / 2;'); // new 연산자 생략
③ var getTriangle = new function('base, height', 'return base * height / 2;'); // 가인수 부분을 한개의 인수로➡ function 명령을 사용하지 않고 굳이 Function 생성자를 이용해야할 만한 장점은 없지만 Function 생성자에는 인수나 함수 본체를 문자열로써 정의할 수 있다.
3. 함수 리터럴 표현으로 정의하기
: 리터럴로 표현할 수 있고, 함수 리터럴을 변수에 대입한다든지, 어떤 함수의 인수로서 건네준다든지, 혹인 반환값으로서 함수를 건네주는 것이 가능하다.
var getTriangle = function(base, height) {
return base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 결과 : 삼각형의 면적:5➡ 'function(base, height) {...}' 로 이름 없는 함수를 정의한 다음, 변수 triangle에 대입하고 있다.
4. 애로우 함수로 정의하기
: ES2015에 추가된 애로우 함수
: 함수 리터럴을 보다 간결하게 기술 할 수 있다.
(인수, ...) => { ... 함수 본체 ... }① let getTriangle = (base, height) => {
return base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 결과 : 삼각형의면적:5
② let getTriangle = (base, height) => base * height / 2;
③ let getCircle = radius => radius * radius * Math.PI;
④ let show = () => console.log('안녕하세요, 자바 스크립트!');① function 키워드 기술 하지 않고 =>로 인수와 함수 본체를 연결
② 본체가 한문장인 경우에 {...} 생략 가능, 문장의 반환값이 그대로 반환 값으로 간주되므로 return 생략 가능
③ 인수가 한개인 경우에는 인수를 감싸고 있는 괄호 생략 가능
④ 인수가 없는 경우에는 괄호를 생략할 수 없음
🔸 함수를 정의할 때 주의할 네가지 사항
1) return 명령은 도중에 개행하지 않는다
2) 함수는 데이터형의 하나다
3) function 명령은 정적인 구조를 선언한다
4) 함수 리터럴/Function 생성자는 실행할 때 판단된다
1. return 명령은 도중에 개행하지 않는다
: JavaScript에서 기본적으로 세미콜론으로 문장의 끝을 인식하지만 생략할 경우에도 적당히 앞뒤 문맥을 문장의 끝을 판단한다.
var getTriangle = function(base, height) {
return
base * height / 2;
};
console.log('삼각형의 면적:' + getTriangle(5, 2)); // 결과 : 삼각형의 면적:undefined✔ return;
base height / 2;
으로 인식되기 때문에 결과가 undefined로 나오고 base height / 2;은 무시되어 버림
➡ JavaScript는 문장의 도중에 개행할 수 있다 그러므로 연산자, 콤마 왼쪽 괄호의 직후 등 문장이 계속될 것이 명확한 장소에서만 개행하는 것이 안전
2. 함수는 데이터형의 하나다
var getTriangle = function(base, height) {
return base * height / 2;
};
console.log(getTriangle(5, 2)); // 결과 : 5
getTriangle = 0; ①
console.log(getTriangle); // 결과 : 0 ② ➡ getTriangle 함수를 정의 한다는 것은 'getTriangle'라 하는 변수에 함수형의 리터럴을 대입하는 것
: ①에서 변수 getTriangle에 수치형의 값을 넣어도 틀린게 아니고
수치형으로 고쳐 쓸 수 있는 변수를 참조하고 있는 ②의 코드도 올바르다
var getTriangle = function(base, height) {
return base * height / 2;
};
console.log(getTriangle); // 결과 : function(base, height) {
return base * height / 2;: 여기서도 getTriangle을 변수로 참조하고 있으므로 getTriangle에 대입된 함수 정의가 그대로 문자열로 출력되고 있다.(Function객체의 toString 메소드 호출되어 문자열 표현으로 변환된 것)
3. function 명령은 정적인 구조를 선언한다
console.log('삼각형의 면적:' + getTriangle(5, 2)); ①
function getTriangle(base, height) {
return base * height / 2;
}: 원래는 ① 시점에서 getTriangle 함수가 선언되지 않았기 때문에 에러가 되어야 하지만 실제로는 올바르게 getTriangle 함수가 실행된다.
➡ '정적인 구조' = 'function 명령은 코드를 해석/컴파일하는 타이밍에 함수를 등록한다. 따라서 실행할 때는 이미 코드 내에 구조의 일부분으로 존재하기에 에러가 안뜸
4. 함수 리터럴/Function 생성자는 실행할 때 판단된다
console.log('삼각형의 면적:' + getTriangle(5, 2)); ①
var getTriangle = function(base, height) {
return base * height / 2;
}: 에러 'getTriangle is not a function'가 뜬다
➡ function 명령과 다르게 함수 리터럴/Function 생성자는 실행 시(대입 시)에 판단된다. 따라서 함수 리터럴/Function 생성자로 함수를 정의하는 경우에는 '호출원의 코드보다 먼저 기술해야 할' 필요가 있다.
