(TIL) 4/1 JS(함수)

IT_JANG·2025년 4월 1일

함수

정의

  • 코드를 {} (블록)으로 묶어 작성하고 붙여진 이름을 호출해서 사용

익명 함수

  • 함수 이름 X (호출 불가)
  • 변수 대입, 매개 변수로 바로 전달에 사용
요소.addEventListener("click", function(){})

화살표 함수

  • 익명함수를 간단히 표기
// 기본 형태
() => {} // == function(){}

// 매개변수 1개 : () 생략 가능
e => {}

// 함수에 return 한 줄만 있을 경우 : return, {} 생략 가능
() => 1 + 2 // == () => {return 1+2;}

즉시 실행 함수

  • 익명 함수를 바로 수행하는 함수
  • 속도 아주 약간 빠름, 변수명 중복 문제 해결
const num1 = 100; // 전역 변수

(() => {
	const num1 = 200;  // 지역 변수
  console.log(num1); // 200
})()

콜백 함수 (문법)

  • 다른 함수를 인자로 전달하고 나중에 함수를 호출하는 방식
function hello(name) {
  console.log("Hello, " + name);
}

function func(callback) {
  const name = prompt("이름을 입력하세요:");
  callback(name); // 이 시점에 콜백 함수 실행!
}

func(hello);

// func를 호출하면서 hello 함수를 인자로 보냄
// -> func 내부에서 인자로 받은 hello를 호출

전체 형태

// 호출
함수명(전달인자);

// 기본 함수
function 함수명(매개변수) {}
function func(e) {}

// 익명 함수
function(매개변수){}
function(e){}

// 화살표 함수
(e) => {}

// 화살표 함수 + 변수
const 변수명 = (매개변수) => {} // function 함수명(매개변수) {}
const func = (e) => {}

메서드

reduce() : 배열 순회

매개변수

  • acc (accumulator) : 지금까지 누적된 값
  • curr (currentValue) : 현재 처리 중인 배열 요소의 값

형태

// 기본 형태
arr.reduce((acc, curr) => {
  return acc + curr;
}, 0);

// 합계 구하기
const numbers = [1, 2, 3, 4, 5];
const sum = numbers.reduce((acc, curr) => {
  return acc + curr;
}, 0);

console.log(sum); // 👉 15

// 문자열 합치기
const words = ['Hello', ' ', 'World', '!'];
const sentence = words.reduce((acc, curr) => acc + curr, ''); //return축약
console.log(sentence); // 👉 "Hello World!"

0개의 댓글