자바스크립트 함수

함수

함수는 프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합입니다.

 

분류	종류	설명
사용자 정의 함수	· 선언적 함수 · 익명 함수	프로그램에서 필요한 기능을 사용자가 직접 정의해서 사용하는 함수입니다.
내장함수	· 인코딩, 디코딩 함수 · 숫자 판별 함수 · 유·무한 값 판별 함수 · 숫자 변환 함수 · 문자 변환 함수 · 자바스크립트 코드 변경 함수	프로그램 개발에서 자주 사용되는 기능들을 자바스크립트 내부적으로 제공해 주는 함수입니다.

 

선언적 함수

• 선언적 함수는 function 키워드를 사용하여 선언되는 함수입니다.
• 함수 이름을 지정하고 중괄호{ } 안에 함수 코드를 작성하는 방식으로 정의됩니다.

선언적 함수의 형식
function 함수( ){
    document.write(값);
}
함수( );

참고

선언적 함수는 함수를 호출할 때 함수의 앞 또는 뒤에서 호출 가능합니다.

변수나 함수를 선언하지 않고 호출하였을 때는 에러가 발생해야 하는 것이 맞지만, var로 선언한 변수와 선언적 함수는 변수, 함수 선언 이전에 호출하여도 에러를 발생시키지 않습니다.

이러한 자바스크립트 성질을 '끌어올리기' 호이스팅(Hoisting)이라고 합니다. 

 

익명 함수

• 자바스크립트에서 익명 함수(anonymous function)는 이름이 없는 함수를 말합니다.
• 함수를 선언할 때 함수 이름을 생략한 형태를 의미합니다.
• 익명 함수는 일반적으로 함수를 변수에 할당하거나, 콜백 함수로 사용될 때 많이 사용됩니다
• 익명 함수는 변수에 함수 데이터를 저장하여 변수를 마치 함수처럼 사용할 수 있도록 만들어 줍니다.
• 익명 함수는 변수 선언 이후에 호출해야 합니다.   
• 익명 함수는 코드를 간결하게 만들어 줄 수 있고, 함수 이름을 정하는 과정에서 생기는 실수나 충돌을 막아줄 수도 있습니다.

익명 함수의 형식
const 함수 = function( ){
    document.write(값);
}
함수( );

즉시 실행 함수

• 익명 함수 중에는 필요에 따라 일회성으로 사용되는 함수도 있습니다.
• '즉시 실행 함수'는 선언과 동시에 함수가 실행되며 함수명이 없기 때문에 재호출 할 수 없습니다.
• 보통 처음 한번만실행하는 초기화 코드에 사용됩니다.   

즉시 실행 함수의 형식
(function( ){
    document.write();
}) ( );

 

매개변수 함수 

• 함수 매개변수는 함수에 전달되는 값을 나타내며, 함수 내부에서 사용됩니다.
• 함수를 호출할 때, 매개변수를 인자로 전달하여 함수가 인자를 처리하고 결과를 반환할 수 있습니다.

  

매개변수 함수의 형식
function 함수명(매개변수1, 매개변수2....){
    document.write(매개변수1, 매개변수2....);
}
함수명(매개변수1 값, 매개변수2 값....);

 

리턴값(결과/끝) 함수

• 함수의 리턴값(return value)은 함수가 반환하는 값입니다.
• 함수는 입력값을 받아서 처리하고 결과를 반환할 수 있습니다.
• 함수를 정의할 때 return 키워드를 사용하여 리턴값을 지정할 수 있습니다.

리턴값(결과/끝) 함수의 형식
function 함수( ){
    const 키 = 값
    return 키;
}
document.write(함수( ));

리턴값(결과/끝) 함수 실행 순서

리턴값(결과/끝) 함수 실행 순서

 

화살표 함수 

• 화살표 함수는 위에 설명된 선언적 함수, 익명 함수, 매개변수 함수, 리턴값 함수를 '=>'을 이용하여 함수를 간결하게 표현할 떄 사용합니다.
• 화살표 함수는 function 키워드를 생략하고 부등호 '='과 '>'을 합쳐 코딩하며 항상 익명 함수 형식으로 표현합니다.
• 단일 명령문일 경우에는 함수의 중괄호 { }와 return을 생략할 수 있습니다. 

화살표 함수 : 선언적 함수
함수 = () => document.write(값);
함수();

화살표 함수 : 익명 함수
const 함수 = () => {
    document.write(값);
}
함수();

화살표 함수 : 매개변수 함수
함수 = (키) => {
    document.write(키);
}
함수(값);

화살표 함수 : 리턴값 함수
함수 = () => {
    const 키 = 값;
    return 키;
}
document.write(함수());

 

참고 홈페이지 

https://dongjin6539.github.io/web2023/javascript/javascript03.html