home강의 홈으로
Section 4. 함수
Lesson 4. 함수 더 알아보기

I. 중첩된 함수

function outer () { const name = '바깥쪽' console.log(name, '함수'); function inner () { const name = '안쪽' console.log(name, '함수'); } inner(); } outer();

img


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);

img

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


💡 팩토리얼 factorial 재귀함수

function fact(x) { return x === 0 ? 1 : x * fact(x - 1); } console.log( fact(1), fact(2), fact(3), fact(4) )

img





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);

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

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

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

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

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

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

🤔얄코에게 질문하기질문은 반.드.시 이리로 보내주세요! ( 강의사이트 질문기능 ✖ )

강의에서 이해가 안 되거나 실습상 문제가 있는 부분,
설명이 잘못되었거나 미흡한 부분을 메일로 알려주세요!

답변드린 뒤 필요할 경우 본 페이지에
관련 내용을 추가/수정하도록 하겠습니다.

이메일 주소
yalco@yalco.kr
메일 제목 (반드시 아래 제목을 붙여넣어주세요!)
[질문] 제대로 파는 자바스크립트 (무료 파트) 4-4

🛑질문 전 필독!!

  • 구글링을 먼저 해 주세요. 들어오는 질문의 절반 이상은 구글에 검색해 보면 1분 이내로 답을 찾을 수 있는 내용들입니다.
  • 오류 메시지가 있을 경우 이를 구글에 복붙해서 검색해보면 대부분 짧은 시간 내 해결방법을 찾을 수 있습니다.
  • 강의 페이지에 추가사항 등 놓친 부분이 없는지 확인해주세요. 자주 들어오는 질문은 페이지에 추가사항으로 업데이트됩니다.
  • "유료파트의 강의페이지는 어디 있나요?" - 각 영상의 시작부분 검은 화면마다 해당 챕터의 강의페이지 링크가 있습니다.
  • 질문을 보내주실 때는 문제가 어떻게 발생했고 어떤 상황인지 등을 구체적으로 적어주세요. 스크린샷을 첨부해주시면 더욱 좋습니다.
🌏 Why not change the world?