함수(Function)
프로그램에서 반복적으로 사용되는 기능을 만들기 위한 코드들의 집합
함수의 호출(실행루틴)
1. 함수를 호출한다.
2. 호출된 함수를 찾아 계산을 수행한다.
3. 함수 수행이 완료되면 원래의 루틴으로 돌아온다.
함수 리터럴
자바스크립트에서는 함수도 일반 객체처럼 값으로 취급된다.
객체 리터럴 방식으로 일반 객체를 생성할 수 있듯, 함수 리터럴을 사용해 함수를 생성할 수 있다.
* 리터럴(literal) : 소스 코드의 고정된 값. 변수의 값이 변하지 않는 데이터로 메모리 내의 위치값을 의미
// 함수 리터럴
function 함수명 (매개변수 리스트) {
..로직.. //함수 몸체
}| 유형 | 설명 |
| function 키워드 | 자바스크립트 함수 를 선언하기 위한 시작 키워드 |
| 함수명 | 함수를 구분하는 식별자 함수 몸체의 내부 코드에서 재귀적 호출 가능 |
| 매개변수 리스트 | 인수에 값을 넣으면, 매개변수(인자)가 지정한 순서대로 할당 |
| 함수 몸체 | 실제 함수가 호출 되었을 때 실행되는 코드 |
함수 종류
| 타입 | 설명 | 형식 | 호출 |
| 선언적 함수 | - 함수명이 존재하는 함수 - 함수 선언후 반복호출 가능 |
function 함수명(매개변수, 매개변수, ... ) {명령; 명령; ... } | 함수명(값,값, ... ); |
| 익명 함수 | - 함수명이 존재하지 않는 함수 - 함수 선언 직후 딱 한 번만 호출 가능 - 괄호안에 선언후 뒤에 값 붙여 호출! |
function(매개변수, 매개변수, ... ) {명령; 명령; ...} | (function(매개변수, 매개변수, ... ) {명령; 명령; ...})(값,값,...); |
| 리터럴 방식 익명 함수 (변수에 저장) |
- 자료형 = function - 함수를 저장하고 있는 변수로 함수변수를 이용하여 함수 호출 가능 - 함수변수에 함수를 저장하는 경우 함수명으로 함수호출 불가 > 함수변수명으로만 호출가능! |
var 변수명= function(매개변수, 매개변수, ... ) {명령; 명령; ...} | 변수명(); |
|
* 선언적함수와 리터럴방식익명함수의 차이점
→ 모든 함수 선언부는 위치와 상관없이 먼저 실행 → 선언함수의 선언부는 실행되어 함수호출 위치와 관계없이 실행가능
→ 변수함수에 선언된 익명함수는 명령부로 순차적 실행 >> 따라서 함수 선언전 호출이 불가능
|
|||
선언적 함수
함수를 선언할 때 이름을 붙여주는 함수
함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능
📝 선언적 함수 형태
function 함수명( ) {
// 실행문;
}
함수명( );
매개변수
함수 호출 시 인수로 전달된 값을 함수 내부에서 사용 가능하도록 해주는 변수
사용예시
매개변수 ▶ str
// ▶ 함수 선언
function func(str) {
document.write(str);
}
// ▶ 함수 호출 (인자 전달)
func("함수가 실행되었습니다."); // 함수가 실행되었습니다.리턴값
함수가 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값
사용예시
리턴값 ▶ 함수가 실행되었습니다.
// ▶ 함수 선언
function func() {
const str = "함수가 실행되었습니다.";
return str; // 실행문은 아니지만 결과값으로 저장됨
}
// ▶ 함수 호출 (리턴값이 있기에 값 받는다)
document.write(func()); // 도큐멘트 안에 실행문이 들어가는 형태, 리턴값이 있기에 가능함익명 함수
말 그대로 이름 없는 함수로 함수코드가 변수명에 저장된 형태
익명 함수는 재사용 하지 않는, 한번만 사용할 함수를 위한 개념으로, 따로 함수의 이름을 갖지 않는다.
익명함수는 이름을 var 변수로 지어서 사용합니다.
📝 익명 함수 형태
- 호출을 어떻게 할까요? 아래 참고!
function (매개변수1, 매개변수2) {
// 실행문;
}
📝 리터럴 방식 익명 함수(변수 저장) 형태
- 익명 함수는 변수에 함수를 저장합니다.
※ 변수에 저장하기 때문에 } 으로 함수가 종료가 된 후에 ; 을 붙여야 합니다. ※
var 변수명 = function (매개변수) {
// 실행문;
};
변수명(인수);즉시 실행 함수
함수 선언 따로, 호출 따로, 하지 않고 '함수 선언(호출)' 형태로, 바로 선언과 호출을 같이 하는 함수
기본적인 구조는 평소 쓰던 익명 함수에 ()를 묶어 인수까지 같이 쓰는 구조
📝 즉시 실행 함수 형태
(function (매개변수) {
// 실행문;
})(인수);화살표 함수
평소 함수 표현식보다 => 를 씀으로써 더 간단히 표현할 수 있는 표현방식
익명 함수에서 function 키워드를 삭제하고 => 를 쓰면 화살표 함수가 됩니다.
화살표함수는 익명 함수로만 사용 가능
📝 화살표 함수 형태
var 변수명 = (매개변수) => {
// 실행문;
};
변수명();// ▶ 매개변수 표현방식
() => {} // 매개변수가 없을 경우
x => {} // 매개변수가 1개일 경우
(x, y) => {} // 여러 개일 경우
// ▶ return 표현방식
(x, y) => { return x + y }
(x, y) => x + y // 한줄이라면 중괄호 생략 및 return 문장이 됨
사용예시
var addNumber = () => 3 + 5; // 매개변수 없음, 실행 문장 한개, 3 + 5를 return시킴
var addNumber = x => x + x; // 매개변수 하나, 실행 문장 한개, x + x를 return시킴
var addNumber = (x, y) => x + y; // 매개변수 두개이상, 실행 문장 한개, x + y를 return 시킴
// 매개변수 없음, 실행 문장 2개 이상, 5를 return시킴
var addNumber = () => {
console.log(3);
return 5;
};
// 매개변수 1개, 실행 문장 2개 이상, x를 return시킴
var addNumber = x => {
console.log(3);
return x;
}
// 매개변수 2개 이상, 실행 문장 2개 이상, x + y를 return 시킴
var addNumber = (x, y) => {
console.log(3);
return x + y;
}
1) 실행문장이 한 개 일 경우 ▶ { } 생략 / 해당 한 문장이 return 문장됨. (return 키워드 생략)
2) 실행문장이 두 개이상 일 경우 ▶ { } 생략 불가 / return할 문장이 있으면 return 키워드 생략 불가
( 매개변수가 한 개일 때 소괄호() 써도 상관 없음 )
함수 호출 this
- 어떤 객체를 가리키는 키워드
- JavaScript의 함수는 호출될 때 this를 암묵적으로 전달받음
- 함수가 어떻게 호출되었는지에 따라 동적으로 this에 객체가 결정
사용예시
- 화살표 함수는 호출의 위치와 상관없이 상위 스코프를 가리킴
- Lexical scope : 함수를 어디서 호출하는지가 아니라 어디에 선언하였는지에 따라 결정
// 전역 문맥에서의 this ▶ 브라우저 전역 객체인 window를 가리킴 (모든 객체의 최상위 객체)
console.log(this) // window
// 함수 문맥에서의 this
// 단순 호출 ▶ 전역 객체를 가리킴 (브라우저에서 전역은 window)
const func = function(){
console.log(this)
}
func() // window
// Method ▶ 메서드로 선언하고 호출한다면, 객체의 메서드이므로 해당 객체가 바인딩
cont ob = {
data : 1,
func() {
console.log(this) // ob
console.log(this.data) // 1
}
}
ob.func() // ob
// NESTed ▶ forEach의 콜백 함수에서 this가 메서드의 객체를 가리키지 못하고 전역 객체 window를 가리킴
// 이를 해결하기 위해 사용하는 것이 =>
const ob = {
numbers : [1],
func(){
console.log(this) // ob
this.numbers.forEach(function(num){
console.log(num) // 1
console.log(this) // window
})
}
}
ob.func()
// ★ 문제 해결을 위한 구성 방식
// 함수 내에서 함수 상황에서 화살표 함수를 쓰는 것을 권장
const ob = {
numbers : [1],
func(){
console.log(this) // ob
this.numbers.forEach((num) => {
console.log(num) // 1
console.log(this) // ob
})
}
}
ob.func()
