728x90
1. 함수
- 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것
- 매개변수(인수, 반환값) : 함수 내부로 입력을 전달받는 변수
- 함수 정의를 통해 생성
2. 함수를 사용하는 이유
- 필요할 때 여러번 호출 가능, 코드의 재사용
- 코드 중복을 억제하고 재사용성을 높임, 코드의 신뢰성
- 객체 타입의 값으로서 이름(식별자) 붙일 수 있음, 코드의 가독성
3. 함수 리터럴
- 함수는 객체 타입의 값
- 함수 리터럴은 function 키워드, 함수 이름, 매개 변수 목록, 함수 몸체로 구성
// 변수에 함수 리터럴을 할당, 값을 생성
var f = function add(x, y) {
return x + y;
};
- 함수는 호출할 수 있기 때문에 일반 객체와 다름
3. 함수의 정의
함수 선언문을 통한 정의
function add(x, y) {
return x + y;
}
// 함수 참조
// console.dir은 console.log와 달리 함수 객체의 프로퍼티까지 출력
console.dir(add);
// 함수 호출
console.log(add(2, 5)); //7
- 함수 선언문은 함수 이름을 생략할 수 없음 ❌
- 함수 선언문은 표현식이 아닌 문
// 기명 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석 됨
// 함수 선언문에서는 함수 이름 생략 불가 ❌
function foo() {
console.log('foo');
}
foo(); // foo
// 함수 리터럴을 피연산자로 사용하면 함수 선언문이 아닌 함수 리터럴 표현식으로 해석 됨
// 그룹 연산자의 피연산자는 값으로 평가될 수 있는 표현식이어야 함
(function bar() {
console.log('bar');
});
bar(); // ReferenceError: bar is not defined
- 단독으로 사용된 함수 리터럴에 에러가 발생한 이유
- 함수 리터럴에서 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자
- 함수 몸체 외부에서는 함수 이름으로 함수를 참조할 수 없으므로 몸체 외부에서 호출할 수 없음을 의미
- 함수를 가리키는 식별자가 없는 것
- 자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 식별자를 암묵적으로 생성하고 그곳에 함수 객체를 할당
- 함수 이름으로 호출하는 것이 아닌 함수 객체를 가리키는 식별자로 호출
함수 표현식
- 자바스크립트 함수는 일급 객체 (값처럼 변수에 할당 가능, 프로퍼티 값, 배열의 요소 모두 가능)
- 함수 리터럴의 함수 이름은 생략 가능 -> 익명함수
- 함수 호출 시 함수 이름이 아닌 함수 객체를 가리키는 식별자 사용
// 기명 함수 표현식
var add = function foo(x, y) {
return x + y;
};
// 함수 객체를 가리키는 식별자로 호출
console.log(add(2, 5)); // 7
// 함수 이름으로 호출하면 ReferenceError 발생
// 함수 이름은 함수 몸체 내부에서만 유효한 식별자!!!
console.log(foo(2, 5));
함수 생성 시점과 함수 호이스팅
// 함수 참조
console.dir(add); // f add(x,y)
console.dir(sub); // undefined (변수 호이스팅 발생)
// 함수 호출
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError : sub is not a function
// undefined가 저장되어 있기 떄문에 타입 에러 발생
// 함수 표현식으로 정의한 함수는 반드시 표현식 이후에 호출해야 함
// 함수 선언문
function add(x, y) {
return x + y;
}
// 함수 표현식
var sub = function (x, y) {
return x - y;
};
- 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출 가능 ⭕
- 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출 불가 ❌
- 함수 선언문도 코드가 한 줄 씩 실행되는 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행 됨
- 런타임에는 이미 함수 객체가 생성 되어 있으며 함수 이름과 동일한 식별자에 할당까지 완료한 상태
- 함수 호이스팅 : 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 것
- 함수 표현식이 런타임에 실행되지 않는 이유?
- 변수 선언은 호이스팅 되어 undefined로 초기화 됨
- but, 변수 할당문의 값은 팔당문이 실행되는 시점 런타임에 평가 되어 함수 객체가 됨
- 함수 표현식으로 함수를 정의하면 함수 호이스팅 아닌 변수 호이스팅 발생 (undefined 출력)
화살표 함수
- ES6에서 도입
- function 키워드 대신 화살표 => 사용해 좀 더 간략하게 선언 가능 (익명함수)
- 내부 동작도 간략화 되어 있어 기존 함수와 this 바인딩 방식이 다르고 프로퍼티가 없고 객체를 생성하지 않음
// 화살표 함수
const add = (x, y) => x + y;
console.log(add(2, 5)); // 7
5. 함수 호출
- 함수를 가리키는 식별자와 한 쌍의 소괄호인 함수 호출 연산자로 호출
매개변수와 인수
- 매개변수
- 함수 실행에 필요한 값을 함수 외부에서 함수 내부로 전달할 필요가 있는 경우 인수를 전달
- 일반 변수와 마찬가지로 undefined로 초기화 됨
- 함수 몸체 내부에서만 참조할 수 있음
- 함수 내부에서 변수와 동일하게 취급 됨
function add(x, y) {
console.log(x, y); // 2 5
return x + y;
}
add(2, 5);
// add 함수의 매개변수 x,y는 함수 몸체 내부에서만 참조 가능
console.log(x, y); // ReferenceError: x is not defined
인수 확인
- 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않음
- 자바스크립트는 동적 타입 언어. 매개변수 타입을 사전에 지정할 수 없음
- 적절한 인수가 전달되었는지 확인 필요 🔍
- 타입 스크립트가 필요한 이유
function add(x, y) {
if (typeof x !== 'number' || typeof y !== 'number') {
// 매개변수를 통해 전달된 인수의 타입이 부적절한 경우 에러를 발생 시킴
throw new TypeError('인수는 모두 숫자 값이어야 합니다.');
}
return x + y;
}
console.log(add(2)); // TypeError: 인수는 모두 숫자 값이어야 해
console.log(add('a', 'b')); // TypeError: 인수는 모두 숫자 값이어야 해
/// 단축 평가를 사용해 매개변수에 기본값 할당
function add(a, b, c) {
a = a || 0;
b = b || 0;
c = c || 0;
retrun
a + b + c;
}
console.log(add(1)); // 1
// ES6 매개변수 기본값 사용
function add(a = 0, b = 0, c = 0) {
return a + b + c;
}
매개변수의 최대 개수
- 명시적인 제한은 없으나 많아지면 전달해야할 인수의 순서를 고려
- 이상적인 매개변수는 0, 이상적인 함수는 한가지 일만 해야 하며 가급적 작게 만들어야 함
반환문
- 함수는 return 키워드와 표현식(반환값)으로 이뤄진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있음
- 생략할 수 있으나 undefined 가 반환 됨
- 줄바꿈 사용 시 세미콜론 자동 삽입 됨
- 함수 몸체 내부에서만 사용 가능
6. 참조에 의한 전달과 외부 상태의 변경
- 매개변수는 함수 몸체 내부에서 변수와 동일하게 취급되므로 값에 의한 전달, 참조에 의한 전달 방식을 따름
// 매개변수 primitive는 원시 값을 전달받고, 매개변수 obj는 객체를 전달받음
function changeVal(primitive, obj) {
primitive += 100;
obj.name = 'kim';
}
// 외부 상태
var num = 100;
var person = {name: 'Lee'};
console.log(num); // 100
console.log(person) // {name: "Lee"}
// 원시 값은 값 자체가 복사되어 전달되고 객체는 참조 값이 복사되어 전달 됨
changeVal(num, person);
// 원시 값은 원본이 훼손되지 않음
console.log(num); // 100
// 객체는 원본이 훼손 됨
console.log(person); // {name: "kim"}
- 원시 타입 인수는 값 자체가 복사되어 매개변수에 전달 됨. 값을 변경(재할당 통한 교체)해도 원본 훼손 되지 않
- 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달 됨. 원본 객체가 변경 되는 부수 효과 발생
- 함수가 외부 상태를 변경 시 상태 변화 추적하기 어려움 -> 코드 복잡성 증가, 가독성 안좋아 짐
- 객체는 불변 객체로 만들어 사용. 복사본 생성의 비용이 들지만 원시 값처럼 변경 불가능한 값으로 동작하게 하는 것
- 객체의 상태 변경이 필요한 경우 객체의 방어적 복사, 깊은 복사 통해 새로운 객체 생성한 뒤 재할당 통해 교체 할 것
7. 다양한 함수의 형태
즉시 실행 함수
- 정의와 동시에 즉시 호출되는 함수
- 한 번만 호출 가능
- 반드시 그룹 연산자 (...)로 감싸야 함
// 익명 즉시 실행 함수
(function () {
var a = 3;
var b = 5;
return a + b;
}());
- 일반 함수처럼 값을 반환하고 인수 전달 가능
var res = (function () {
var a = 3;
var b = 5;
return a * b;
}());
console.log(res); // 15
// 인수 전달 가능
res = (function (a, b) {
return a * b;
}(3, 5));
console.log(res); // 15
재귀 함수
- 함수가 자기 자신을 호출하는 것
- 반복 처리를 위해 사용
- 무한 반복에 빠질 위험있어 사용 지양
- 반복문을 사용하는 것보다 재귀함수 사용하는 것이 더 이해하기 쉬울 때만 한정적으로 사용
function countdown(n) {
if (n < 0) return;
console.log(n);
countdown(n - 1); // 재귀호출
}
countdown(10);
콜백 함수
- 함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수
- 고차 함수 : 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수, 콜백 함수를 자신의 일부분으로 합성
- 비동기 처리의 핵심!!! ex) 이벤트 처리, Ajax 통신, 타이머 함수 등
- 배열 고차 함수에서도 사용 됨! ex) map, filter, reduce
// 외부에서 전달받은 f를 n만큼 반복 호출
function repeat(n, f) {
for (var i = 0; i < n; i++) {
f(i); // i를 전달하면서 f를 호출
}
}
var logAll = function (i) {
console.log(i);
}
// 반복 호출할 함수를 인수로 전달
repeat(5, logAll); // 0 1 2 3 4
var logOdds = function (i) {
if (i % 2) console.log(i);
};
// 반복 호출할 함수를 인수로 전달
repeat(5, logOdds);
- 콜백 함수가 고차 함수 내부에만 호출된다면 콜백 함수를 익명 함수 리터럴로 정의해 곧바로 고차함수에 전달하는 것이 일반적임
- 고차 함수가 호출 될 떄마다 콜백 함수가 생성 되는 단점이 있음
repeat(5, function (i) {
if (i % 2) console.log(i);
}); // 1 3
- 콜백 함수가 다른 곳에서도 호출할 필요 있거나 콜백 함수를 전달받는 함수가 자주 호출될 시 참수 외부에서 콜백 함수 정의
- 함수 참조만 고차 함수에 전달하는 것이 효율적
// logOdds 함수는 단 한번 만 생성됨
var logOdds = function (i) {
if (i % 2) console.log(i);
};
// 고차 함수에 함수 참조 전달
repeat(5, logOdds); // 1 3
순수 함수와 비순수 함수
- 순수 함수 : 어떤 외부의 상태에 의존하지 않고 변경하지 않는, 부수효과가 없는 함수
- 비순수 함수 : 외부 상태에 의존하고 외부 상태를 변경하는 부수효과가 있는 함수
- 순수 함수는 항상 동일한 인수 전달 -> 동일한 값 반환, 인수의 불변성 유지 외부 상태 변경 ❌
- 비순수 함수는 외부 상태(전역변수, 서버 데이터, 파일, Console, DOM)에 따라 반환값이 달라짐
// 이해 안감
// 순수 함수
var count = 0; // 현재 카운트를 나타내는 상태
// 순수 함수 increase는 동일한 인수가 전달되면 언제나 동일한 값을 반환.
// 오직 매개변수를 통해 함수 내부로 전달된 인수에게만 의존해 값 생성 후 반환
function increase(n) {
return ++n;
}
// 순수 함수가 반환한 결과값을 변수에 재할당해 상태를 변경
count = increase(count);
console.log(count); // 1
count = increase(count);
console.log(count); // 2
var count = 0; // 현재 카운트를 나타내는 상태: increase 함수에 의해 변화 됨
// 비순수 함수
function increase(count) {
return ++count; // 외부 상태에 의존하며 외부 상태 변경
}
// 비순수 함수는 외부 상태 변경하므로 상태 변화 추적 어려움
increase(count);
console.log(count); // 1
increase(count);
console.log(count); // 2
참고 : 모던 자바스크립트 Deep Dive
728x90
'TIL > JavaScript' 카테고리의 다른 글
[딥다이브] 17장 생성자 함수 (0) | 2022.05.09 |
---|---|
[딥다이브] 13장 스코프 (0) | 2022.04.30 |
[딥다이브] 11장 원시 값과 객체의 비교 (2) | 2022.04.27 |
[Vanilla JS 활용] DOM 제어 및 사용자 정보 획득 (0) | 2022.04.26 |
[딥다이브] 10장 객체 리터럴 (0) | 2022.04.26 |