250227 TIL #620 JavaScript 함수

김춘복·2025년 2월 27일
0

TIL : Today I Learned

목록 보기
623/627

Today I Learned

오늘은 javascript의 함수에 대해서 정리해봤다.


JavaScript 함수

함수

  • 특정 작업을 수행하는 코드 블록으로, 필요할 때마다 호출하여 실행할 수 있음
  • JavaScript에서 함수는 1급 객체(First-class object)로 취급되어 변수에 할당하거나, 다른 함수의 인수로 전달하거나, 함수에서 반환할 수 있다!!

함수 선언 방법

  • 기본 문법
function 함수명(매개변수1, 매개변수2, ...) {
  // 함수 본문
  return 반환값;  // 반환할게 없으면 생략 가능
}
  • javascript에서는 function 사용
  • return 문이 없는 함수는 undefined를 반환함.

종류

선언적 함수 (Function Declaration)

가장 기본적인 함수 선언 방식

function add(a, b) {
  return a + b;
}

let result = add(3, 4); // 7

함수 표현식 (Function Expression)

함수를 변수에 할당하는 방식. 함수 이름이 없이 변수에 할당 가능

let displayPI = function() {
  console.log("PI = 3.14");
};

displayPI(); // "PI = 3.14" 출력

자동 호출 함수 (IIFE)

정의(선언)와 동시에 자동으로 실행되는 함수

(function() {
  alert("자동 실행");
})();

화살표 함수 (Arrow Function)

ES6에서 도입된 간결한 함수 표현 방식

const add = (a, b) => a + b;
console.log(add(5, 3)); // 8

매개변수와 인자

기본 사용법

num1num2는 매개변수이고, 함수 호출 시 전달되는 54는 인자(argument)

function addNumbers(num1, num2) {
  let sum = num1 + num2;
  console.log(`Sum: ${sum}`);
}

addNumbers(5, 4); // "Sum: 9" 출력

기본값 매개변수

ES6부터는 매개변수에 기본값을 설정 가능
기본값 매개변수는 값이 전달되지 않거나 undefined가 전달될 때 사용

function multiply(a, b = 1) {
  return a * b;
}

console.log(multiply(5, 2)); // 10
console.log(multiply(5)); // 5 (b는 기본값 1 사용)
console.log(multiply(5, undefined)); // 5 (undefined 전달 시 기본값 사용)

나머지 매개변수

함수에 전달되는 여러 인자를 배열로 받을 수 있음

function sum(...numbers) {
  return numbers.reduce((total, num) => total + num, 0);
}

console.log(sum(1, 2, 3, 4)); // 10

클로저 (Closure)

함수가 자신이 생성된 환경(렉시컬 스코프)을 기억하는 특성

  • 여기서 count 함수는 createCount 함수의 렉시컬 스코프에 있는 c 변수를 참조하여 값을 증가
function createCount() {
  let c = 0;
  return function count() {
    c += 1;
    return c;
  };
}

const count = createCount();
console.log(count()); // 1
console.log(count()); // 2
console.log(count()); // 3

생성자

객체를 생성하는 함수.
함수 이름의 첫 글자를 대문자로 작성하는 것이 관례
new 키워드와 함께 사용하여 객체를 생성

function Person(name, age) {
  this.name = name;
  this.age = age;
}

let person = new Person("John Smith", 30);
console.log(person.name); // "John Smith"
console.log(person.age); // 30
profile
Backend Dev / Data Engineer

0개의 댓글

관련 채용 정보