241024 JavaScript 함수

수달·2024년 10월 24일

함수

1. 함수

  • 하나의 특별한 목적을 가지고 코드를 실행하도록 만드는 문법

1.1 함수 선언문

  • functuin
  • 재활용성 높이기 위해서, 매개변수 (parameter)
function func(){}

1.2 함수 표현식

  • 값으로 평가될 수 있는 식

1.2.1 표현식
1.2.2 네이밍 함수(naming function)
1.2.3 익명 함수(anonymous function)

1.3 호출(call)

  • 함수의 이름과 소괄호()를 이용해 함수를 실행함
function sum(){}; 
sum(); // 호출

1.4 함수 -> 재활용성이 좋다

  • 애플리케이션 어디서든 호출해서 쓸 수 있다.

  • let (X)

  • const (O)
    관용적이다 -> 일반적으로 좀 많이 사용되는, 보편적으로

const gugudan = function () {
  for (i = 1; i < 10; i++) {
    console.log(`${i}단`);
    for (j = 1; j < 10; j++) {
      console.log(`${i} * ${j} = ${i * j}`);
    }
    console.log("----------");
  }
};

const getValue = () => ({name: "철수 "});
const getValue2 = () => [10];

function gugudan(dan) {
if (dan === 3) {
console.log("3단은 no");
return; // 함수를 중단하는 역할도 한다 -> undefined
}
for (let i = 1 ; i<=9 ; i++) {
console.log( ${dan} * ${i} = ${dan * i})
}
}

// 재사용성이 조금 아쉬움
const sum = (n1, n2, n3) => n1+n2+n3;

function sum() {
  // arguments, caller, name, length, prototype
  console.log(arguments);
} 
// arguments 유사배열개체

function sum() {
  let sum = 0;
  for (let  value of arguments) {
    sum += value;
  }
  return sum;             
} 

1.5 화살표 함수 (ES6)

function -> =>

const gugudan = function gugudan() => {};
const gugudan = () => {};

💫 바로 리턴하는 거면 중괄호 생략가능

const sum = (n1, n2) => n1 + n2;

const getValue = () => ({name: "철수 "});
const getValue2 = () => [10];

함수 선언문: 재활용성 높이기 위해서, 매개변수(parameter)

파라미터 > 인자 : 안 넣어진 파라미터의 값은 undefined로 됨

2. 매개변수 (인자/인수)

스프레드 연산자 (...)

  • 전개 연산자 또는 나머지 연산자
const sum = (a, b, ...args) => {
  console.dir(args);
};

console.log(sum(10,20,30));
console.log(sum(10,20,30,40));

3. 반환 값

4. 가변인자

function sum(){
  console.log(arguments[0] + arguments[1]);
}
sum(10,20);

5. 스코프 -> 식별자를 참조할 수 있는 범위

5.1 함수 스코프와 블록 스코프

  • 함수 스코프와 블록 스코프 -> 지역 스코프
  • 전역 스코프
  • 지역 스코프 -> 전역 스코프 ok
  • 전역 스코프 -> 지역 스코프 X

💫

  • 자바스크립트 : runtime 기반 언어 -> 실행할 때 모든 것이 결정되는 동적 언어
  • 타입스크립트 : static 기반 언어 -> 정적 언어
// 스코프
const a = 10;
function print() {
  //  함수에서만 유효한 범위 -> 함수 스코프 -> 지역 스코프
  // 블록 스코프 = 지역 스코프
  const b = 20;
  console.log(`함수 내부: ${a}, ${b}`);
}

print();
console.log(`함수 외부: ${a}, ${b}`)

const a = 10;

{
  // 블록 스코프 -> 지역 스코프
  const b = 20;
  console.log(`블록 내부: ${a}, ${b}, ${c}`);

  {
    // 지역 스코프
    const c =30; 
    console.log(`블록 내부: ${a}, ${b}, ${c}`) 
  }
  // 찾아 올라가는건 OK, 찾아 내려가는건 X
}

재귀 함수

  • 실무에서 쓰임, 다양함 X
  • 자기 자신을 호출하는 방식으로 동작
  • 두 가지 요소 (기저 사례/재귀 호출)
  • 기저 사례(base case) - 재귀 호출이 끝나는 조건이 명시되어 있는 코드
  • 재귀 호출 = 자기 자신을 다시 호출하는 함수
// 재귀
function fac2(n) {
  // 기저 사례
  if (n === 0 || n === 1) return 1;
  // 재귀 호출
  return n * fac2(n - 1);
}
console.log(fac2(5));

0개의 댓글