01. 선언적 함수

선언적 함수는 함수를 정의할 때 함수 이름과 함수의 구현 코드를 함께 작성하는 함수 정의 방식입니다. 선언적 함수는 함수가 호출되기 이전에 이미 정의되어 있기 때문에, 코드 내에서 언제든지 호출할 수 있습니다. 또한, 선언적 함수는 함수 호이스팅(hoisting)이 발생하기 때문에 함수를 먼저 선언하지 않아도 함수 호출이 가능합니다.

                      
function func(){
    document.write("선언적함수가 실행되었습니다?
");
}
func();
결과확인하기
100
200
javascript

02. 익명 함수

익명 함수는 이름 없이 정의된 함수입니다. 익명 함수는 일반적으로 콜백 함수나 클로저를 만들 때 사용됩니다. 익명 함수는 일회성으로 사용되기 때문에, 다른 곳에서 재사용할 수 없습니다. 그러나 익명 함수를 변수에 할당하여 해당 변수를 통해 재사용할 수 있습니다. 또한, 익명 함수는 다른 함수 내부에서 클로저를 만들기 위해 사용될 수 있습니다. 

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

익명함수가 실행되었습니다.

03. 매개변수 함수

매개변수 함수는 다른 함수의 인자로 전달되는 함수입니다. 매개변수 함수는 일반적으로 콜백 함수(callback function)나, 고차 함수(higher-order function)에서 사용됩니다.

                      
function func(str){
   document.write(str);
}
func("매개변수 함수가 실행되었습니다");

매개변수가 있는 함수의 형식

function 함수명(매개변수1, 매개변수2......){
document.wrtie(매개변수1, 매개변수2......)
}
함수명(매개변수1 값, 매개변수2 값......);

매개변수가 없는 함수의 형식

매개변수가 있는 함수의 경우 보통 매개변수의 개수가 정해져 있다.
그러나 경우에 따라서는 매개변수의 개수를 정할 수 없는 함수를 만들어야 하는 경우도 발생하는데,
이런 경우 함수에 전달되는 매개변수 값을 저장해주는 arguments 객체를 사용하여 함수를 만들 수 있다.

04. 리턴 함수

리턴 함수는 함수 내부에서 정의된 함수나 값 등을 반환하는 함수입니다.
리턴 함수를 사용하면 함수의 실행 결과를 변수에 할당하여, 나중에 다시 사용할 수 있습니다. 또한, 리턴 함수를 사용하여 클로저(closure)를 만들 수 있습니다. 클로저는 함수와 함수가 정의된 어휘적 환경(lexical environment)을 함께 기억하고 있기 때문에, 상태를 유지하고 관리할 수 있는 효과적인 방법입니다.

                      
function func(){
    const str = "함수가 실행되었습니다.
";
    return str;
}
document.write(func()) ;

리턴값 함수 합 구하기

                      
    function d(x, y, z){              // x=1, y=2, z=3의 값을 호출
        return x+y+z;                     // x=1, y=2, z=3의 값을 받아 결과를 반환해준다.
        };
        document.write(d(1,2,3));   // x=1, y=2, z=3의 값을 부여

결과값 : 6

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

화살표 함수는 함수를 더 간결하고 간단하게 작성할 수 있는 ES6(ECMAScript 2015)부터 추가된 새로운 함수 문법입니다. 화살표 함수는 function 키워드 대신 => 기호를 사용하여 함수를 정의합니다.

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

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

.

                      
const func = () => {
    document.write("실행되었습니다");
}
func();

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. 화살표 함수 : 익명 함수 + 매개변수 + 리턴값 + 괄호생략

.

                      
const func = str => { //(str)에서 괄호만 생략됨
    return str;
}
document.write(func("실행되었습니다"));

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

.

                      
const func = str => str; //대괄호와 return 생략됨
        
document.write(func("실행되었습니다"));

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

.

                      
func = str => str; //
        
document.write(func("실행되었습니다"));

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

.

                      
function func(num, str1, str2){
    //document.write(num +"."+str1+"가"+str2+"되었습니다."+"
");
    document.write(`${num}. ${str1}가 ${str2}되었습니다.
`);
}
func("1","함수","실행")
func("2","자바스크립트","실행")
func("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);

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

.

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

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

(가장 많이 쓰는 형태) 리액트 형태, 숫자는 i로 대체하여 map메서드로 활용 가능하다

                      
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)

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

.

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

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 + "되었습니다"+"<br>")
    }
    
} 
//인스턴스 생성
const info1 = new Func(1, "함수", "실행"); 
const info2 = new Func(2, "자바스크립트", "실행") ;
const info3 = new Func(3, "리액트","실행") ;
info1.result();

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 + "되었습니다"+"
"
    )
}
const info1 = new Func(1, "함수", "실행"); 
const info2 = new Func(2, "자바스크립트", "실행") ;
const info3 = new Func(3, "리액트","실행") ;

info1.result();
info2.result();
info3.result();