📖 오늘 학습 뽀인트!
-
JavaScript 함수
1-1 호이스팅
1-2 재귀함수
1-3 call by value, reference -
구조 분해 할당, 스프레드 문법
2-1 스프레드 문법
2-2 구조 분해 할당
1. JavaScript 함수
🕵️♀️함수란?
입력, 출력, 기능을 하나로 묶어 재사용 할 수 있도록 만드는 것이다.
유사한 동작을 하는 코드가 여러 곳에서 필요할 때 사용하는 기능이다.
함수를 사용하는 이유는 재사용성, 아키텍처 파악, 유지보수 용이 등이 있다.
1-1 호이스팅
console.log(add1(10, 20)); // 30
console.log(add2(10, 20)); // 30
console.log(mul1); // undefined
function add1(x, y) {
return x + y;
}
function add2(x, y) {
return x + y;
}
var mul1 = function (a, b) {
return a * b;
}🕵️♀️함수 호이스팅이란?
대부분의 언어는 코드를 위에서 아래로 실행한다. 위 소스코드 add1, add2 함수들이 선언되기 이전에 호출하였으나, 함수 호이스팅으로 인해 결과가 출력되었다. 호이스팅은 선언문을 스코프 맨 위로 올려 선언문이 소스코드가 순차적으로 실행되는 런타임 이전 단계에서 먼저 실행되는 것이다.
❓
console.log(mul1)은 왜 undefined가 출력되었을까?
위에 호이스팅 정의에서 설명했듯이 런타임 이전 단계에 선언문이 먼저 실행되는 것이 호이스팅이다. 호이스팅시var키워드 값 안에는 undefined가 할당된다. 즉, mul1은 undefined 상태이고 런타임 이후 코드가 실행되면서 undefined가function(a, b)함수로 재할당되는 것이다.
❓ 그렇다면 const, let은 호이스팅이 안 일어날까?
일어난다. 자바스크립트의 모든 선언은 호이스팅이 일어난다. 다만, let, const, class를 이용한 선언문은 호이스팅이 되었지만 안 된 것처럼 동작된다. const와 let 의 경우, 호이스팅 되었으나 undefined 로 값이 할당되지 않았기 때문에 var 와 다르게 오류가 발생한다.
✍ JS 파일을 여러개 호출하여 사용 할 때, 각 JS 파일에서 var를 전역 변수로 사용하게 된다면 동일한 var 변수를 다른 JS파일에서 간섭이 가능하다. 즉, 다른 JS파일에서 변수 값이 변경될 수 있다.
1-2 재귀함수
function factorial(n){
if(n <= 1) { // 재귀 탈출
return n
}
return n * factorial(n-1) // 재귀
}
console.log(factorial(5)); // 120
// factorial(5) == 5 * factorial(4) == 5 * 24
// factorial(4) == 4 * factorial(3) == 4 * 6
// factorial(3) == 3 * factorial(2) == 3 * 2
// factorial(2) == 2 * factorial(1) == 2 * 1
// factorial(1) == 1🕵️♀️재귀함수란?
함수 내에 반환으로 자기 자신을 다시 호출하는 함수이다. 재귀 종료 조건문이 없다면 무한 루프에 빠지기 때문에 주의해야 한다. 동적 프로그래밍(DP)을 구현할 때 사용한다.
🕵️♀️동적 프로그래밍(DP)이란?
복잡한 문제를 작은 문제로 나누어 연산 속도와 메모리를 최대한으로 활용하기 위한 기법이다. 반복문 또는 재귀함수를 사용할 수 있는데 이 과정에서
한 번 연산을 통해 구한 결과값을 메모리에 저장해 두었다가 같은 식의 연산을 재호출하면 메모리에 저장한 값을 불러와 활용하는 것이 메모이제이션 기법이다. 보통 배열의 형태로 수행된다.
✍ 동적 프로그래밍 구현 방식
1) 탑 다운(Top-Down, 하향식) 방식: 가장 큰 문제부터 시작하여 작은 문제 순으로 답을 찾아가는 방식으로, 주로 재귀 함수 활용. 예) 피보나치
2) 바텀 업(Bottom-Up, 상향식) 방식: 가장 작은 문제의 답부터 찾아가는 방식으로, 주로 반복문 활용.
1-3 call by value, reference
var arr1=[1,2,3];
function a(n){
let temp=[4,5,6];
n=temp;
}
a(arr1)
console.log(arr1); // [1, 2, 3]
call by value는 값을 전달하는 것이고call by reference는 값이 들어있는 메모리 주소를 전달하는 것이다. 그리고 보통 배열과 객체는 call by reference로 주소가 전달된다.
위 소스코드에서 arr1은 call by value로 전달되었다. "이게 무슨 소리냐 배열은 원래 call by reference가 아니냐" 라고 할 수 있다. 하지만 자바스크립트에서는 call by reference인 것 처럼 보이지만 call by value 이다. 주소가 넘어가는 것이 아니라 주소가 "복사" 되어 넘어가는 것이다. 만약, 복사가 아닌 주소 자체가 넘어가는 일반적인 call by reference 라면 함수 내부 n=temp 이후 arr1 값이 [4, 5, 6]으로 변해야된다.
2. 구조 분해 할당과 스프레드 문법
2-1 스프레드 문법
let arr1 = [3, 5, 1];
let arr2 = [1, 2, 6];
console.log(Math.max(...arr1)); // 5
console.log(Math.max(3, 5, 1)); // 5
console.log(Math.max(...arr1, ...arr2)); // 6
console.log(Math.max(8, ...arr1, ...arr2, 10)); // 10🕵️♀️스프레드 문법이란?
하나로 뭉쳐 있는 여러 값들의 집합(배열)을 펼쳐서 개별적인 값들의 목록으로 만드는 문법이다.
위 소스코드처럼 배열 자체를 매개변수로 전달해야 하는 경우, 스프레드 문법(...)을 사용할 수 있다.
2-2 구조 분해 할당
let arr = [1, 2]
let [i, j] = arr;
console.log(i); // 1
console.log(j); // 2구조 분해 할당은 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법 구조이다.
let arr = [1, 2, 3, 4]
let [i, ,j, k] = arr;
// let [i, ...j] = arr;
console.log(i); // 1
console.log(j); // 3
console.log(k); // 4
//console.log(i); // 1
//console.log(j); // [2,3,4]
let [i, ,j, k]로 1번 index 값을 할당 받지 않을 수 있고,
let [i, ...j]스프레드 기법으로 0번 index 값을 제외한 나머지 값들을 다 할당할 수도 있다.
function a(...arr) { // arr은 배열의 이름이다.
for (let x of arr) sum += x;
return sum;
}
console.log(a(1, 2, 3)); // 6✍ 위 소스코드와 같이 함수에 객체나 배열을 전달해야 하는 경우와 객체나 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우에 사용할 수 있다.
