javascript :: function

지유·2024년 4월 22일

javascript

목록 보기

6/10

Function

함수(Function)는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.
함수 내부로 입력을 전달받는 변수를 매개변수(parameter) , 인수(argument) ,반환값(return value) 이라고 부른다.

🧸 함수 정의 : function definition

💡 함수 선언문

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

// 함수 호출
console.log(sum(1,1)) 

// 함수 재사용
let a = sum(1,1)
console.log(a); // 2

매개변수 (parameter) > x y
반환값 > x + y
인수 (arguments) > 1

✔️ 함수 이름을 생략 불가.
함수를 다른 식별자에 할당하여 사용할 경우, 식별자로 호출.

💡 함수 표현식

let sum = function(a,b){
  return a + b;
}

console.log(sum(1,1)) // 2

✔️ 함수 이름 생략 가능.
기명(이름이 있는) 함수이더라도, 함수 이름이 아닌 식별자로 호출.

🧸 함수 호이스팅 현상

const a = 7

double() // 14

function double() {
	console.log(a * 2)
}

✔️ 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상. 함수 선언문에만 해당.

🧸 화살표 함수 : ( ) ⇒ { }

const double = function (x) {
	return x * 2 }
console.log('double: ', double(7))

const doubleArrow = x => x * 2
console.log('doubleArrow', doubleArrow(7))

✔️ 화살표 함수를 사용하게되면 { }와 return 키워드를 생략 가능.

🧸 IIFE : 즉시실행함수

const a = 7;

(function() {
console.log(a * 2)
}());

✔️ ( ) 로 감싸줘야 정상적으로 작동.
함수 정의와 동시에 호출되는 함수로, 단 한번만 호출되며 다시 호출 불가.

🧸 타이머 함수

setTimeout() => {
	console.log('Jiyoung')
}, 3000)  // 3초 후에 콘솔 출력.

const h1El = document.querySelector('h1')
h1El.addEventListener('click',()=>{
	cleartimeout(timer);
})  // 3초 전에 클릭하면, 콘솔에 출력되지 않는다.

✔️ setTimeout (함수, 시간) : 일정 시간 후 함수 실행.
✔️ cleartimeout( ) : 설정된 timeout 함수를 종료.

const timer = setInterval(() => {
    console.log('jiyoung');
},3000);

const h1El = document.querySelector('h1');
h1El.addEventListener('click',()=>{
    clearInterval(timer);
})

✔️ setInterval (함수, 시간) : 시간 간격마다 함수 반복 실행.
✔️ clearInterval( ) : 설정된 interval 함수를 종료.

🧸 재귀 함수 : recursive function

// function countdown(n) {
//   for (let i = n; i >= 0; i--) console.log(i);
// }
// countdown(10);

function countdown(n) {
  if (n<0) return;
  console.log(n);
  countdown(n-1); // 재귀호출
}

countdown(10);

✔️ 재귀 호출 : 자기자신을 호출하는 행위. 반복되는 처리를 반복문 없이 구현 가능.

🧸 콜백 함수 : callback function

function repeat(n, f) {
  for (let i = 0; i < n; i++){
    f(i);}
}

const logAll = function(i) {
  console.log(i);
};

// 반복 호출할 함수를 인수로 전달.
repeat(5, logAll); // 0 1 2 3 4