자바스크립트 함수에 대해 알아보자!!

01.선언적 함수 (Declared Function)

함수 선언문을 사용하여 함수를 정의합니다. 함수 이름이 정의되어 있으며, 함수 호출 이전에 선언되어야 합니다.

function add(x, y) {
  return x + y;
}
add(2,3)

// 결과값
// 5

02.익명 함수 (Anonymous Function)

함수 표현식을 사용하여 함수를 정의합니다. 함수 이름이 없으며, 변수에 함수를 할당합니다. 함수 호출은 변수를 통해 이루어집니다.

const add = function(x, y) {
  return x + y;
};
add(3,5)
// 결과값
// 8

 

03.매개변수(Parameter)

함수 정의 시 함수 내부에서 사용할 변수를 선언합니다. 함수 호출 시 전달한 값들이 함수 내부의 매개변수에 할당됩니다.

function add(x, y) {
  return x + y;
}
console.log(add(2, 3));

// 결과값
// 5

04.리턴값 함수 (Function with return value)

함수가 결과 값을 반환하는 경우입니다. 함수 내부에서 계산된 결과값을 반환하여 다른 변수에 할당하거나 다른 함수의 인자로 전달할 수 있습니다.

function add(x, y) {
  return x + y;
}
const result = add(2, 3);
console.log(result); 

//결과값
// 5

05.화살표 함수(Arrow function)

ECMAScript(es6)에 추가된 내용으로 => 이용하여 함수를 간결하게 표현할 떄 사용합니다.

화살표 함수는 function 키워드를 생략하고 부등호 = 과 > 를 합쳐 코딩하며 항상 익명 함수 형식으로 표현합니다.

단일 명령문일 경우에는 함수의 중괄호{}와 return을 생략 할수 있습니다.

add = (x, y) => {
  return x + y;
};
add(3,5)
// 결과값
// 8

06.지역 변수(local variable)

지역 변수(local variable)란 함수 내에서 선언된 변수를 가리킵니다.

이러한 지역 변수는 변수가 선언된 함수 내에서만 유효하며, 함수가 종료되면 메모리에서 사라집니다.

함수의 매개변수 또한 함수내에서 정의되는 지역 변수처럼 동작합니다.

function localNum() {

    var num = 10; // 지역 변수 num에 숫자 10을 대입함.

    document.write("함수 내부에서 변수 num의 타입은 " + typeof num + "입니다.<br>"); // number

}

localNum();       // 함수 localNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 타입은 " + typeof num + "입니다."); // undefined

07.전역 변수(global variable)

함수의 외부에서 선언된 변수를 가리킵니다.

이러한 전역 변수는 프로그램의 어느 영역에서나 접근할 수 있으며, 웹 페이지가 닫혀야만 메모리에서 사라집니다.

var num = 10; // 전역 변수 num을 선언함.

function globalNum() {

    document.write("함수 내부에서 변수 num의 값은 " + num + "입니다.<br>"); // 10

    num = 20; // 전역 변수 num의 값을 함수 내부에서 변경함.

}

globalNum();  // 함수 globalNum()을 호출함.

document.write("함수의 호출이 끝난 뒤 변수 num의 값은 " + num + "입니다."); // 20

08.재귀 함수(Recursive Function)

함수가 자신을 다시 호출하는 구조로 만들어진 함수이다. 재귀함수는 종료조건이 있어야 하며, 종료조건을 설정해주지 않으면 무한 반복을 하게된다. 재귀함수로 작성이 되는 코드는 반복문으로도 작성할 수 있다.

function factorial(n) {
  if (n === 0) { // 종료 조건
    return 1;
  } else {
    return n * factorial(n - 1); // 재귀 호출
  }
}

console.log(factorial(5)); // 120

09.내장 함수(Built-in Function)

내장 함수는 프로그래밍 언어 자체에서 제공하는 함수로, 개발자가 별도의 구현 없이 바로 사용할 수 있는 함수입니다.

대부분의 프로그래밍 언어는 내장 함수를 제공하며, 이 함수들은 보통 매우 일반적인 기능을 수행합니다.

내장 함수들은 자바스크립트의 기본 기능을 확장하여 프로그래밍의 효율성과 유연성을 높여주는 역할을 합니다.

 

문자열 처리 함수

charAt(), charCodeAt(), concat(), indexOf(), replace(), slice(), split(), toLowerCase(), toUpperCase()

숫자 처리 함수

isNaN(), parseFloat(), parseInt(), toFixed()

배열 처리 함수

concat(), indexOf(), join(), push(), pop(), reverse(), shift(), slice(), sort(), splice(), unshift()

객체 처리 함수

hasOwnProperty(), isPrototypeOf(), keys()

타이머 함수

setTimeout(), setInterval(), clearTimeout(), clearInterval()

DOM(Document Object Model) 함수

getElementById(), getElementsByClassName(), getElementsByTagName(), createElement(), appendChild(), removeChild(), setAttribute(), removeAttribute(), addEventListener(), removeEventListener()

기타 함수

alert(), console.log(), confirm(), prompt(), encodeURI(), decodeURI(), encodeURIComponent(), decodeURIComponent()