함수심화
콜백함수
- 함수에 매개변수로 전달되어 실행되는 함수를 의미
function sum(x, y, 콜백함수) {
콜백함수(x + y);
return x + y;
}
function documentWriter(s) {
document.write('콜백함수', s); // 콜백함수 30
}
sum (10, 20, documentWriter);
- map 사용을 통한 콜백함수
let arr = [1, 2, 3, 4, 5];
arr.map(제곱)
function 제곱(x) {
return x ** 2;
}
arr.map(x => x ** 2); // [1, 4, 9, 16, 25]
- forEach 사용을 통한 콜백함수
let arr = [1, 2, 3, 4, 5];
arr.forEach(e => console.log(e**2));
function 제곱(x) {
console.log(x**2); // [1, 4, 9, 16, 25]
}
함수의 호이스팅
- 호이스팅
◽ 변수나 함수 선언문이 해당 스코프의 최상단으로 끌어올려지는 현상
◽ 코드에서 변수나 함수를 선언하기 전에 해당 변수나 함수를 사용할 수 있는 것처럼 보이는 현상
- TDZ (Temporal Dead Zone)
◽ 코드상에 let, const로 선언된 변수와 상수는 TDZ 구역에 배치
-> 선언에 대한 초기화가 실행된 후에 TDZ에서 제거되어 사용가능한 상태가 됨
console.log(x); // undefined
console.log(y); // Error
console.log(z); // Error
var x = 1;
let y = 2;
const z = 3;
sayHi(); // "Hello, lions!"
function sayHi() {
console.log("Hello, lions!");
}
재귀함수
- 함수가 자기 자신을 호출하는 것을 의미
◽ 재귀함수는 무한히 반복될 수 있음
◽ 무한 반복을 제한하기 위해 함수의 종료조건을 체크해야 함
◽ 반복문으로 구현할 수 있다면 재귀함수로 모두 구현 가능
◽ 재귀함수로 구현 가능한 것은 반복문으로 대부분 구현 가능
- 팩토리얼 재귀함수
// 팩토리얼은 1부터 n까지의 곱을 구하는 함수를 의미
function factorial(n) {
if(n<=1) {
return 1;
}
return n * factorial(n-1);
}
// factorial(5) = 120 -> == 5 * factorial(4) == 5 * 24 (24는 factorial(4)의결과)
// factorial(4) = 24 -> == 4 * factorial(3) == 4 * 6 (6은 factorial(3)의결과)
// factorial(3) = 6 -> == 3 * factorial(2) == 3 * 2 (2는 factorial(2)의결과)
// factorial(2) = 2 -> == 2 * factorial(1) == 2 * 1 (1은 factorial(1)의결과)
// factorial(1) = 1 -> == 1
// sigma는 1부터 n까지의 합을 계산하는 함수를 의미
function sigma(n){
if(n <= 1) {
return n
}
return n + sigma(n-1)
}
// sigma(5) = 15 -> == 5 + sigma(4) == 5 + 10
// sigma(4) = 10 -> == 4 + sigma(3) == 4 + 6
// sigma(3) = 6 -> == 3 + sigma(2) == 3 + 3
// sigma(2) = 3 -> == 2 + sigma(1) == 2 + 1
// sigma(1) = 1 -> == 1
// 문자열 뒤집기
function reverse(text) {
if(text.length <= 1) {
return text
}
return reverse(text.slice(1)) + text[0]
}
// reverse('hello') == reverse('ello') + 'h' == 'olle' + 'h'
// reverse('ello') == reverse('llo') + 'e' == 'oll' + 'e'
// reverse('llo') == reverse('lo') + 'l' == 'ol' + 'l'
// reverse('lo') == reverse('o') + 'l' == 'o' + 'l'
// reverse('o') == 'o'
즉시 실행함수
- 즉시 실행하고 외부에서 컨트롤할 필요가 없는 함수
- function scope를 이용하기 때문에 메모리 효율적
- 익명 즉시 실행 함수
(function () {
let a = 1;
let b = 2;
return a + b;
})();
- 기명 즉시 실행 함수
(function foo() {
let a = 3;
let b = 5;
return a * b;
})();
foo(); // ReferenceError: foo is not defined
클로저 (Closure)
- 폐쇄된 공간 안에 데이터에 접근하기 위한 테크닉
- 외부 함수에 대한 접근 권한을 내부 함수에 위임함으로서 폐쇄된 공간 안의 데이터에 접근할 수 있도록 하는 테크닉
- 클로저를 사용하면 특정 변수나 함수를 외부에서 접근 할 수 없도록 숨길 수 있음
- private 변수와 메서드를 비슷하게 구현 가능
function makeAdder(x) {
var y = 1;
return function(z) {
y = 100;
return x + y + z;
};
}
var add5 = makeAdder(5);
var add10 = makeAdder(10);
//클로저에 x와 y의 환경이 저장됨
console.log(add5(2)); // 107 (x:5 + y:100 + z:2)
console.log(add10(2)); // 112 (x:10 + y:100 + z:2)
//함수 실행 시 클로저에 저장된 x, y값에 접근하여 값을 계산
//지역스코프에서 값을 찾고, 없으면 그 밖에 있는 스코프에서 찾고, 계속해서 찾아 올라가 전역 스코프까지 찾아보는 것을 스코프체이닝
function 제곱(x) {
return function(y) {
return y ** x;
}
}
var 제곱2 = 제곱(2);
var 제곱3 = 제곱(3);
제곱2(10)
제곱3(10)
생성자 함수 (Constructor)
- 사용자 정의 객체를 생성할 때 사용되는 함수
- 생성자 함수의 특징
◽ 일반 함수와 구분하기 위해 생성자 함수 이름 첫 글자는 대문자로 시작
◽ 반드시 'new' 연산자를 붙여 실행해야 함
◽ new 연산자는 생성자 함수의 this가 인스턴스를 바라보도록 만들어주는 역할을 함
let book = {
책이름: '뽀롱뽀롱 뽀로로',
책가격: 0,
저자: ['펭수', '루피'],
출판일: '2024.07.06'
};
function Book(책이름, 책가격, 저자, 출판일) {
this.책이름 = 책이름;
this.책가격 = 책가격;
this.저자 = 저자;
this.출판일 = 출판일;
}
let book1 = new Book('Python', 50000, ['뽀로로'], '2019-04-21');
let book2 = new Book('JavaScript', 32000, ['크롱'], '2013-12-27');
let book3 = new Book('React', 47000, ['로디'], '2009-11-21');
console.log(book1, book2, book3);
/*
Book {
책이름: 'Python',
책가격: 50000,
저자: [ '뽀로로' ],
출판일: '2019-04-21'
} Book {
책이름: 'JavaScript',
책가격: 32000,
저자: [ '크롱' ],
출판일: '2013-12-27'
} Book {
책이름: 'React',
책가격: 47000,
저자: [ '로디' ],
출판일: '2009-11-21'
}
*/
- 생성자 함수를 사용하는 이유
◽ 동일한 프로퍼티를 가지는 객체 생성
◽ prototype을 이용하여 메모리 효율을 높일 수 있음
'ESTsoft > 프론트엔드 오르미 1기' 카테고리의 다른 글
| [EST] 240717 JavaScript-09 (0) | 2024.07.31 |
|---|---|
| [EST] 240716 JavaScript-08 (3) | 2024.07.29 |
| [EST] 240712 JavaScript-06 (1) | 2024.07.25 |
| [EST] 240711 JavaScript-05 (0) | 2024.07.23 |
| [EST] 240710 JavaScript-04 (0) | 2024.07.15 |