[자바스크립트] 함수 선언
함수
함수(function)
'x와 y사이에 값이 정해지면 따라서 y값이 정해진다는 관계'에서의 y값, 값을 묶어서 표현하기 위해 사용
특정 작업을 수행하기 위해 미리 설계(선언)된 프로그램의 한 블록, 필요 시마다 호출해 해당 작업 반복 가능
typeof로 확인할 수 있는 자료형, function 객체임
함수의 형태와 선언
1) 매개변수 : 함수 안에서 사용할 변수 값을 가져와 사용하기 위해 담는 공간
2) 리턴 : 함수에서 계산된 / 전달하고 싶은 결과값 전달
3) 인수 : 함수를 호출할 때 넣어주는 값
function 함수이름(매개변수1, 매개변수2..) {
함수 호출시, 실행되는 실행문장
return 돌려줄 값;
}1) 초과된 인수는 무시, 부족한 인수는 undefined
함수를 호출할 때, 함수 형식에 맞춰서 인자를 넘기지 않아도 에러가 발생하지 않음 (어떤 타입 값이든 반환)
필요한 인자 수보다 부족하게 넘어간 경우 undefined 값이 할당 > 초과하는 인자는 무시됨
자바스크립트 함수는 반드시 return값이 존재하며, return값이 없을 대는 기본 반환값인 undefined가 반환
function fun(arg1,arg2){
console.log(arg1, arg2);
}
fun(); // undefined undefined
fun(1); // 1 undefined
fun(1,2); // 1 2
fun(1,2,3) // 1 22) argument 객체 사용하기
함수 호출 시 실제 인자값을 가지는 객체
함수가 실행되면 그 안에는 arguments라는 특별한 지역변수가 자동 생성
arguments는 배열의 형태를 가지고 있어(유사배열) , 넘어온 인자를 하나씩 접근 가능
-> 함수 코드를 작성할 때, 런타임 시에 호출된 인자 개수를 확인하고 동작을 다르게 해줘야 함 3
3) 함수 호출 및 함수 참조
함수 호출 : 함수 식별자 뒤에 괄호를 쓰면 함수 본문을 실행, 함수를 호출한 표현식 = 반환값
함수 참조 : 함수 식별자 뒤에 괄호가 없다면 함수는 실행되지 않음
사용자 정의 함수
사용자가 직접 만들어서 사용하는 함수
1) 명시적 함수 2) 함수표현식 3) 화살표 함수
1) 명시적 함수 (함수선언문)
<head>에 미리 함수를 정의하고, <body>에서 호출
일반적인 프로그래밍 언어에서 함수 선언과 비슷한 형식 e.g. function {}
선언된 함수는 나중에 사용을 위해 저장되며 call이 될 때 실행
코드의 구현 위치와 관계없이 자바스크립트의 특징인 *호이스팅에 영향을 받음
선언과 호출 순서에 따라서 정상적으로 함수가 실행되지 않을 수 있음
alert(foo());
// Alerts 5.
// 코드가 실행되기 전(선언 전)에 호출되도 정상 동작
function foo() { return 5; }
2) 표현식 함수
변수값에 함수 표현을 담아 놓은 형태 (유연한 자바스크립트 언어 특징을 활용)
함수 표현식은 변수 안의 값을 할당하고 있기 때문에 값을 할당하기 전에는 사용 불가
함수 표현식이 변수에 저장되면 변수는 함수처럼 사용 가능 (정해진 공간에서만 함수 표현식을 사용할 수 있음)
변수에 저장된 함수는 함수 이름이 아닌 변수 이름을 통해 호출
함수 선언식보다 깔끔하고 가독성 높은 코딩이 가능
alert(foo()); // 에러 발생! foo 함수는 아직 로드안됨
var foo = function() { return 5; }- 익명 함수표현 : 함수 앞에 식별자가 주어지지 않음 e.g. function() {}
- 기명 함수표현 : 함수의 식별자가 존재함 e.g. function test() {}
* 함수표현식 장점 : 클로져로 사용 or 콜백으로 사용
- 클로저 : 함수가 종료되도 렉시컬 스코프의 index와 같은 정보를 유지함
- 콜백 : 인자 전달 (중간 임시변수에 할당필요 없이 직접 전달가능)
3) 화살표 함수
함수 표현식을 간단히 생성하는 방법
function 대신에 => 를 사용
let 변수이름 = (매개변수1, 매개변수2) => {실행할 문장;}
<참고>
* 함수 위치 작성법
1) <body>아래 쪽의 <script>
<head>에 작성하는 script는 함수의 선언 > 페이지 실행 시 바로 실행하는 스크립트
화면이 다 구성(선언)된 다음에 실행될 수 있도록 <body> 아래쪽에 작성
2) <head>의 <script src="">를 이용한 js파일
* 호이스팅
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위({})의 최상단에서 선언
var 변수 선언 + 함수선언문에서만 호이스팅이 일어남
함수선언문과 함수표현식에서 다르게 동작하기 때문에 구분이 필요함
* 클로저
자바스크립트는 싱글 스레드 기반의 언어 / 프로토타입 기반의 동적 언어 / 렉시컬 스코프를 따름
-> 내부함수가 선언도니 순간 저장된 외부함수의 참조 정보를 이용함
(상위 스코프의 정보가 선언된 함수의 참조 프로퍼티로 저장)