function(함수)
01. function-definition
01_function-declaration(함수 선언문)
함수 선언문에서는 함수의 이름을 생략할 수 없다.
function 함수이름(매개변수) {
하고싶은 일;
}
// 함수 호출
console.log(함수이름('매개변수'));
function hello(name) {
return `${name}님 안녕하세요`;
}
// 함수 호출
console.log(hello('홍길동'));
02_function-expression(함수표현식)
자바스크립트의 함수는 객체 타입의 값으로 값의 성질을 갖는 일급 객체이다.
- 함수 리터럴로 생성 한 함수 객체를 변수에 할당할 수 있다.
- 함수 표현식에서는 함수명을 생략할 수 있다.
- 호출 시 함수의 값을 담은 변수 명으로 호출한다
var hello = function (name) {
return `${name}님 안녕하세요`;
}
console.log(hello('홍길동'));
함수 표현식에서 함수명을 생략하지 않아도 문제는 없다.
단, 함수 호출은 식별자(함수의 값을 담은 변수 명)로 이루어지며 함수명으로는 호출할 수 없다.
var calc = function add(a, b) {
return a + b;
}
console.log(calc(10, 20));
//console.log(add(10, 20)); - ReferenceError: add is not defined03_function-hoisting(함수 호이스팅)
함수 호이스팅 : 함수 선언문이 코드의 선두로 끌어올려진 것 처럼 동작하는 것
함수 선언문 : 런타임 이전 자바스크립트 엔진에 의해 먼저 실행 된다.
따라서 함수 선언문 이전에 함수를 참조할 수 있고 호출할 수 있다.
함수 선언문이 코드의 선두로 끌어올려진 것 처럼 동작하는 것을 "함수 호이스팅"이라고 한다.
함수 표현식 : 변수 할당문 값은 할당문이 실행 되는 시점, 즉 런타임에 평가되므로 함수 표현식의 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.
함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조하고 호출해야 한다.
console.log(hello('홍길동'));
console.log(hi('홍길동')); // TypeError: hi is not a function
// 함수 선언문
function hello(name) {
return `${name}님 안녕하세요!`;
}
// 함수 표현식
var hi = function(name) {
return `${name} 안녕!`;
}
02. function-call
01_parameter-and-argument(매개변수와 인수)
매개변수와 인수
- 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관 된다.
- 매개변수는 함수 몸체 외부에서 참조할 수 없다.
function hello(name) {
return `${name}님 안녕하세요`;
}
//잘못된 호출
// console.log(name);
// 올바른 호출
var result = hello('홍길동');
console.log(result);
함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다.
인수가 부족해서 할당 되지 않은 매개변수의 값은 undefined이다.
result = hello(); //매개변수 없이 호출해도 오류나지 않음
console.log(result);
매개변수보다 인수가 더 많은 경우 초과된 인수는 무시된다.
result = hello('유관순', '신사임당'); //유관순만 나타낸다
console.log(result);초과된 매개변수인 신사임당은 arguments에 보관된다. 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관 된다.
function hello(name) {
// 모든 인수는 암묵적으로 arguments 객체의 프로퍼티로 보관 된다.
console.log(arguments);
return `${name}님 안녕하세요`;
}이런 문제 상황을 보완할 수 있도록 ES6에서
기본값을 줄 수 있는 기능이 추가되었다.
인수를 전달하지 않거나 undefined를 전달하면 매개변수 기본 값이 동작한다. (ES6 추가 문법)
function hi(name = '기본값')
function hi(name = '아무개') {
return `${name} 안녕~`;
}
result = hi('홍길동');
console.log(result);
result = hi(); // 기본값 아무개가 출력된다.
console.log(result);
02_return(반환문)
반환 타입이 있는 함수
- 반환문 이후의 문은 실행되지 않고 무시 된다.
function hello(name) {
// 반환문
return `${name}님 안녕하세요!`;
// 반환문 이후의 문은 실행되지 않고 무시 된다.
console.log(name);
}
console.log(hello('유관순'));
반환 타입이 없는 함수
- 반환 값을 명시적으로 지정하지 않으면 undefined 반환
- 반환 값이 없을 시 반환문 생략 가능하며 이 때도 암묵적으로 undefined 반환
function func() {
console.log('함수가 호출 되었습니다.');
return; //반환값 없음
}
console.log(func()); //undefined 반환03. arrow-function
arrow-function-basic-syntax(화살표 함수 기본 문법)
ES6에서 도입 된 화살표 함수는 function 키워드 대신 화살표를 사용해 보다 간략하게 함수를 선언하는 방법이다.
화살표 함수는 항상 익명함수로 정의하며 본문이 한 줄인 함수를 작성할 때 유용하다.(함수가 해야하는 일이 간단할 때 주로 사용한다.)
기존 function 정의
var message;
message = function() {
return 'hello world!';
};
console.log(message());
function 키워드 생략
message = () => {
return 'Arrow Function!';
};
console.log(message());명령문이 하나만 있을 경우 중괄호 생략 가능
함수 몸체 내부의 문이 값으로 평가 될 수 있는 표현식인 문이라면 암묵적으로 반환(return 생략 가능)
message = () => 'Arrow Functions are simple!';
console.log(message());매개변수가 있을 경우
message = (val1, val2) => 'Arrow ' + val1 + val2;
console.log(message('Function', '!'));
//출력값
// Arrow Function!
매개변수가 하나이면 소괄호를 생략
- 매개변수가 없거나 여러 개일 경우 생략 불가
message = val => "Arrow " + val;
console.log(message('Functions are GOOD!!!'));
//출력값
//Arrow Functions are GOOD!!!
