01. 선언적 함수

변수에 함수를 저장하는 방법

{
    function func(){
        document.write("실행되었습니다.
"); } func(); }
결과 확인하기
실행되었습니다.

선언적 함수

function func(){}
실행문 : func();

02. 익명 함수

변수에 함수를 저장하는 방법입니다.

{
    const func = function(){
        document.write("실행되었습니다.
"); } func(); }
결과 확인하기
실행되었습니다.

익명 함수

const func = (){}
실행문 : func();

03. 매개변수 함수

매개변수는 함수나 메서드가 호출될 때 함수에 값을 전달하며, 이러한 값들이 함수 내부에서 사용됩니다.

{
    function func(str){
        document.write(str);
    }
    func("실행되었습니다.
"); }
결과 확인하기
실행되었습니다.

매개변수 함수

결과값을 실행문에 적어 매개변수(str)에 전달해주는 방식입니다.

04. 리턴값 함수

return : 반환. 결과를 반환하는 함수입니다.

{
    function func(){
        const str ="실행되었습니다.";
        return str;
    }
    document.write(func());
}
결과 확인하기
실행되었습니다.

05. 화살표 함수 : 선언적 함수

선언적 함수를 '=,=>'을 이용하여 함수를 간결하게 표현한 방법입니다.

{
    func = () => {
        document.write("실행되었습니다.
"); } func(); } // function func( ){ // document.write("실행되었습니다."); // };
결과 확인하기
실행되었습니다.

06. 화살표 함수 : 익명 함수

익명 함수를 '=, =>'을 이용하여 함수를 간결하게 표현한 방법입니다.

{
    const func = () => {
        document.write("실행되었습니다.
"); } func(); } // const func = function( ){ // document.write("실행되었습니다."); // };
결과 확인하기
실행되었습니다.

07. 화살표 함수 : 매개변수 함수

매개변수 함수를 화살표를 사용하여 간결하게 나타낸 식입니다.

{
    func = (str) => {
        document.write(str);
    }
    func("실행되었습니다. 
"); }
결과 확인하기
실행되었습니다.

08. 화살표 함수 : 리턴값 함수

리턴값 함수를 화살표를 사용하여 간결하게 나타낸 식입니다.

{
    func = () => {
        const str = "실행되었습니다 
"; return str; } document.write(func()); }
결과 확인하기
실행되었습니다.

09. 화살표 함수 : 익명함수 + 매개변수 + 리턴값

화살표 함수로 익명함수, 매개변수, 리턴값을 같이 사용하여 간결히 만들 수 있습니다.

const func = (str) => {
        return str;
}
document.write(func("실행되었습니다."));
결과 확인하기
실행되었습니다.

10. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략

9번에서 추가적으로 괄호를 생략하는 방법입니다.

const func = str => {
    return str;
}
document.write("실행되었습니다.");
결과 확인하기
실행되었습니다.

11. 화살표 함수 : 익명함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략

const func = str => str;
document.write("실행되었습니다.");
결과 확인하기
실행되었습니다.

12. 화살표 함수 : 선언적함수 + 매개변수 + 리턴값 + 괄호생략 + 리턴생략

func = str => str;
document.write("실행되었습니다.");
결과 확인하기
실행되었습니다.

13. 함수유형 : 함수와 매개변수를 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
func("1","함수","실행");
func("2","자바스크립트","실행");
func("3","리액트","실행");
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

14. 함수유형 : 함수와 변수를 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const youNum1 = 1;
const youNum2 = 2;
const youNum3 = 3;
const youStr1 = "함수";
const youStr2 = "자바스크립트";
const youStr3 = "리액트";
const youCom1 = "실행";

func(youNum1, youStr1, youCom1);
func(youNum2, youStr2, youCom1);
func(youNum3, youStr3, youCom1);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

15. 함수유형 : 함수와 배열을 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const num = [1, 2, 3];
const info = ["함수", "자바스크립트", "리액트"];
const str = ["실행"];

func(num[0], info[0], str[0]);
func(num[1], info[1], str[0]);
func(num[2], info[2], str[0]);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

16. 함수유형 : 함수와 객체를 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const info = {
    num1 : 1,
    name1 : "함수",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "리액트",
    word : "실행"
}

func(info.num1, info.name1, info.word);
func(info.num2, info.name2, info.word);
func(info.num3, info.name3, info.word);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

17. 함수유형 : 함수와 배열, 객체를 이용한 형태

function func(num, str1, str2){
    document.write(num + "." + str1 + "가 " + str2 + "되었습니다.<br>");
}
const info = [
    {
        num : 1,
        name : "함수",
        word : "실행"
    },
    {
        num : 2,
        name : "자바스크립트",
        word : "실행"
    },
    {
        num : 3,
        name : "리액트",
        word : "실행"
    }
]

func (info[0].num, info[0].name, info[0].word);
func (info[1].num, info[1].name, info[1].word);
func (info[2].num, info[2].name, info[2].word);
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

18. 함수유형 : 객체 안에 함수를 이용한 형태

const info = {
    num1 : 1,
    name1 : "함수",
    num2 : 2,
    name2 : "자바스크립트",
    num3 : 3,
    name3 : "리액트",
    word : "실행",
    result1 : function(){
        document.write(info.num1 + "." + info.name1 + "가 " + info.word + "되었습니다.
"); }, result2 : function(){ document.write(info.num2 + "." + info.name2 + "가 " + info.word + "되었습니다.
"); }, result3 : function(){ document.write(info.num3 + "." + info.name3 + "가 " + info.word + "되었습니다.
"); } } info.result1(); info.result2(); info.result3();
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.


19. 함수유형 : 객체 생성자 함수를 이용한 형태

function Func(num, name, word){
    this.num = num;
    this.name = name;
    this.word = word;

    this.result = function(){
        document.write(this.num + "." + this.name + "가 " + this.word + "되었습니다.
"); } } const info1 = new Func(1,"함수","실행"); const info2 = new Func(2,"자바스크립트","실행"); const info3 = new Func(3,"리액트","실행"); info1.result(); info2.result(); info3.result();
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

20. 함수유형 : 프로토타입 함수

function Func(num, name, word){
    this.num = num;
    this.name = name;
    this.word = word;
}

Func.prototype.result = function(){
    document.write(this.num + "." + this.name + "가 " + this.word + "되었습니다.<br>");
}

const info1 = new Func(1,"함수","실행");
const info2 = new Func(2,"자바스크립트","실행");
const info3 = new Func(3,"리액트","실행");

info1.result();
info2.result();
info3.result();
결과 확인하기
1.함수가 실행되었습니다.
2.자바스크립트가 실행되었습니다.
3.리액트가 실행되었습니다.

21. 함수유형 : 객체리터럴 함수

function Func(num, name, com){
    this.num = num;
    this.name = name;
    this.com = com;
};
Func.prototype = {
    result1 : function(){
        document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`); }, result2 : function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`); }, result3 : function(){ document.write(`${this.num}. ${this.name}가 ${this.com}되었습니다.
`); } } const info1 = new Func("101", "함수", "실행"); const info2 = new Func("201", "자바스크립트", "실행"); const info3 = new Func("301", "리액트", "실행"); info1.result1(); info2.result2(); info3.result3();
결과 확인하기
101. 함수가 실행되었습니다.
201. 함수가 실행되었습니다.
301. 함수가 실행되었습니다.

객체리터럴 함수

22. 함수종류 : 즉시 실행 함수

(function (){
    document.write("500. 함수가 실행되었습니다.
") })();
결과 확인하기
500. 함수가 실행되었습니다.

23. 함수종류 : 파라미터 함수

function func(str = "600. 함수가 실행되었습니다.
"){ document.write(str); } func();
결과 확인하기
600. 함수가 실행되었습니다.

24. 함수종류 : 아규먼트 함수

function func(str1, str2){
    document.write(arguments[0]);
    document.write(arguments[1]);
};
func("함수실행1", "함수실행2");
결과 확인하기
함수실행1
함수실행2

25. 함수종류 : 재귀 함수

재귀함수를 사용하는 방법

function func(num){
    if(num<=1){
        document.write("함수가 실행되었습니다.")
    } else {
        document.write("함수가 실행되었습니다.")
        func(num-1);
    }
};
func(10);

function animation(){
    document.write("애니메이션이 실행되었습니다.")

    requestAnimationFrame(animation)
}
animation();
결과 확인하기
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.
함수가 실행되었습니다.

26. 함수종류 : 콜백 함수

콜백함수를 사용하는 방법

function func(){
    document.write("2. 함수 실행")
}
function callback(str){
    document.write("1. 함수 실행")
    str();
}
callback(func);
결과 확인하기
1.함수실행 2.함수실행

콜백 함수