[Javascript] 매개변수 ,중첩함수, 재귀함수, factorial, 즉시실행함수,IIFE

💡 함수의 매개변수 갯수를 넘어가는 인수

• 오류를 일으키지 않고 무시됨

function add(a, b) {

return a + b;

}

​

console.log(

add(1, 3),

add(1, 3, 5),

add(1, 3, 5, 7)

);

---

 

I. 기본값 매개변수 default parameter

👉 MDN 문서 보기

function add(a = 2, b = 4) {

console.log(`${a} + ${b}`);

return a + b;

}

​

console.log(

add(),

add(1),

add(1, 3)

);

---

 

II. arguments - 함수 내에서 사용가능한 지역 변수

👉 MDN 문서 보기

• 배열의 형태를 한 객체 - 배열은 아니지만 사실상 배열처럼 동작 (배열도 사실 객체지만...)
• 함수 호출 시 전달된 모든 인수들을 배열 형태로 가짐

function add(a, b) {

console.log('1.', arguments);

console.log('2.', arguments[0]);

console.log('3.', typeof arguments);

return a + b;

}

​

console.log(

'4.', add(1, 3, 5, 7)

);

 

function add(a, b) {

for (const arg of arguments) {

console.log(arg);

}

return a + b;

}

​

console.log(

add(1, 3, 5, 7)

);

• for ... of가 가능한 이유: iterable이기 때문 이후 다룸
• ⚠️ 화살표 함수에서는 arguments 사용 불가! 화살표 함수로 바꾸어 실행해 볼 것

 

function getAverage() {

let result = 0;

for (const num of arguments) {

result += num;

}

return result / arguments.length;

}

​

console.log(

getAverage(1, 4, 7),

getAverage(24, 31, 52, 80)

);

 

// 💡 타입에 안전한 버전

function getAverage() {

let result = 0, count = 0;

for (const num of arguments) {

if (typeof num !== 'number') continue;

result += num;

count++;

}

return result / count;

}

​

console.log(

getAverage(2, '가', 8, true, 5)

);

// ♻️ 새로고침 후 실행

const add = (a, b) => a + b;

const sub = (a, b) => a - b;

const mul = (a, b) => a * b;

const div = (a, b) => a / b;

​

function combineArms () {

return (x, y) => {

let result = x;

for (const arm of arguments) {

if (typeof arm !== 'function') continue;

result = arm(result, y);

}

return result;

}

}

​

const add_mul = combineArms(add, mul, 1, true);

const add_mul_sub = combineArms(add, mul, sub);

const add_mul_sub_div = combineArms(add, mul, sub, div);

​

// 💡 익명 함수 사용됨

const add_mul_sub_div_pow

= combineArms(add, mul, sub, div, (x, y) => x ** y);

 

console.log(

add_mul(8, 3),

add_mul_sub(8, 3),

add_mul_sub_div(8, 3),

add_mul_sub_div_pow(8, 3)

);

---

 

III. ...변수그룹명 - 나머지 변수 rest parameters

👉 MDN 문서 보기

• 특정 매개변수들 뒤에 정해지지 않은 수의 매개변수들을 받을 때
• 마지막 인자로만 사용 가능
• arguments와는 달리 실제 배열임

console.log(

'3.',

classIntro(3, '김민지', '영희', '철수', '보라')

); // 호이스팅

​

function classIntro (classNo, teacher, ...children) {

console.log('1.', children);

console.log('2.', arguments);

​

let childrenStr = '';

for (const child of children) {

if (childrenStr) childrenStr += ', ';

childrenStr += child;

}

return `${classNo}반의 선생님은 ${teacher}, `

+ `학생들은 ${childrenStr}입니다.`

}

 

const add = (a, b) => a + b;

const sub = (a, b) => a - b;

const mul = (a, b) => a * b;

const div = (a, b) => a / b;

​

function doMultiArms (x, y, ...arms) {

let result = x;

for (const arm of arms) {

if (typeof arm !== 'function') continue;

result = arm(result, y);

}

return result;

}

​

console.log(

doMultiArms(8, 3, add, mul, 1, true),

doMultiArms(8, 3, add, mul, sub),

doMultiArms(8, 3, add, mul, sub, div),

doMultiArms(8, 3, add, mul, sub, div, (x, y) => x ** y)

);

 

I. 중첩된 함수

function outer () {

const name = '바깥쪽'

console.log(name, '함수');

​

function inner () {

const name = '안쪽'

console.log(name, '함수');

}

inner();

}

​

outer();

 

function addMulSub (x, y) {

const add = (a, b) => a + b;

const sub = (a, b) => a - b;

const mul = (a, b) => a * b;

​

return sub(mul(add(x, y), y), y);

}

​

console.log(addMulSub(8, 3));

---

 

II. 재귀 함수 recursive function

function upto5 (x) {

console.log(x);

if (x < 5) {

upto5(x + 1);

} else {

console.log('- - -');

};

}

​

upto5(1);

upto5(3);

upto5(7);

• 스택이 넘치면 stack overflow - 오류 발생

💡 팩토리얼 factorial 재귀함수

function fact(x) {

return x === 0 ? 1 : x * fact(x - 1);

}

 

또는

function fact(a) {
 return !a ? 1 : a * fact(a-1) ; 
 }

​

console.log(

fact(1),

fact(2),

fact(3),

fact(4)

)

---

 

III. 즉시 실행 함수 IIFE

👉 MDN 문서 보기

• Immideately Invoked Function Expression
• 오늘날에는 잘 사용되지 않음 - 과거 코드 분석을 위해...

(function () {

console.log('IIFE');

})();

💡 무엇에 사용되었는가?

const initialMessage = (function () {

// ⚠️ var를 사용함에 주목

var month = 8;

var day = 15;

var temps = [28, 27, 27, 30, 32, 32, 30, 28];

var avgTemp = 0;

for (const temp of temps) {

avgTemp += temp

}

avgTemp /= temps.length;

​

return `${month}월 ${day}일 평균기온은 섭씨 ${avgTemp}도입니다.`;

})();

​

console.log(initialMessage);

console.log(month);

• 딱 한 번만 사용될 함수에
• 전역 변수들을 사용하지 않고, 복잡한 기능을 일회성으로 실행할 때
• 다른 코드들과의 변수명이나 상수명 충돌을 막기 위함 (특히 많은 코드들이 사용될 때)
• 오늘날에는 블록과 이후 배울 모듈의 사용으로 대체
  • 이전의 var는 블록 외에서 사용될 수 있었음(‼️)

let initialMessage;

​

{

const month = 8;

const day = 15;

const temps = [28, 27, 27, 30, 32, 32, 30, 28];

let avgTemp = 0;

for (const temp of temps) {

avgTemp += temp

}

avgTemp /= temps.length;

​

initialMessage = `${month}월 ${day}일 평균기온은 섭씨 ${avgTemp}도입니다.`;

};

​

console.log(initialMessage);

console.log(month); // 새로고침 후 const를 var로 바꾸고 실행해볼 것

---

 

IV. ⭐️ 불변성 immutability

let x = 1;

let y = {

name: '홍길동',

age: 15

}

let z = [1, 2, 3];

​

function changeValue (a, b, c) {

a++;

b.name = '전우치';

b.age++;

c[0]++;

​

console.log(a, b, c);

}

​

changeValue(x, y, z);

 

console.log(x, y, z);

원시 타입 : 인자로 들어간 함수 내에서의 변경에 영향 받지 않음

• 실제 값이 아니라 복사된 값이 들어갔기 때문

참조 타입 : 인자로 들어간 함수 내에서 요소가 변하면 실제로도 변함

• 복사된 값도 같은 객체나 배열을 가리키기 때문

 

⭐️ 함수에 주어진 인자를 변경하는 것은 좋지 않음

• ⚠️ 외부의 환경을 변경하는 함수는 위험!
• 이상적인 함수: 받은 값들만 처리하여 새 값을 반환