함수

자바스크립트 함수

프로그램에서 반복적으로 사용되는 기능을 만들어 내기 위한 코드들의 집합으로 이해하면 된다.

---

01. 선언적 함수

선언적 함수는 가장 일반적인 형식의 함수로 함수를 선언할 때 이름을 붙여준다.

function func(){
     document.write("실행문");
}
func();

{
    function func(){
        document.write("함수가 실행되었습니다.1")
        //write = 브라우저객체이자 메소드이다
    }
    func();
}

결과 보기

함수가 실행되었습니다.1

---

02. 익명 함수

함수명 대신 변수명에 함수코드를 저장하는 방식이다.
즉 함수명에 이름을 지정하지 않는다. 대신 변수명을 지정해준다.

const func(){
     document.write("실행문");
}
func();

{
    const func = function(){      //함수 안에 이름이 없어서 익명함수 이다.
        document.write("함수가 실행되었습니다.2");
    }
    func();
}

결과 보기

함수가 실행되었습니다.2

---

03. 매개변수 함수

함수의 매개변수(parameter)란 함수를 호출할 때 인수로 전달된 값을 함수 내부에서 사용할 수 있게 해주는 변수이다.
이때 함수의 인수(argument)란 함수가 호출될 때 함수로 값을 전달해주는 변수를 가리킨다.

{
    function func(str){     //str = 변수 = 인자 = 매개변수
        document.write(str);
    }
    func("함수가 실행되었습니다.3"); // func안에 변수명을 지정할 수 있다.
}

결과 보기

함수가 실행되었습니다.3

---

04. 리턴값(return) 함수

함수가 어떠한 기능을 수행하고 그 결과를 호출한 곳으로 돌려주는 값을 리턴값이라고 한다.
또한 출력 명령어를 사용하지 않고 출력하기 위해서는 리턴값 함수를 사용해주면 된다.

{
    function func(){
        const str = "함수가 실행되었습니다.4"
        return str;
    }
    document.write(func());
    //객체로 데이터를 저장하는 방법 중 객체 속에 함수로 표현하는 방법과 같은 맥락이다.
    //다른 식에서도 리턴은 거의 생략한다. 리액트에서는 보통 리턴까지 사용하여 입력한다.
}

결과 보기

함수가 실행되었습니다.4

---

05. 화살표 함수 (선언적 함수)

ECMAscript6(es6)에 추가된 내용으로 " =>"를 이용하여 함수를 간결하게 표현할 때 사용한다.
function 키워드를 생략할 수 있으며 항상 익명 함수 형식으로 표현해야 한다. 이때 단일 명령문이라면 함수의 중괄호 {}와 return의 생략이 가능하다.

{
//화살표 함수(선언적 함수) 기본표현
func = () => {
document.write("함수가 실행되었습니다.5");
}
func();

//화살표 함수(선언적 함수) 한줄 표현
func = () => document.write("함수가 실행되었습니다.5"); //{}가 생략되어도 읽는다.

func();
}

결과 보기

함수가 실행되었습니다.5

자투리 지식 : ECMAscript6(es6)의 문법에는 화살표 함수, let, const가 있다.

---

06. 화살표 함수 (익명 함수)

화살표 함수에서 익명 함수는 const를 사용하여 표현해야 한다.

{
//화살표 함수 익명함수 기본 표현
const func = () => {
document.write("함수가 실행되었습니다.6");
}

//화살표 함수 익명함수 단일 표현
const func = () =>  document.write("함수가 실행되었습니다.6");

func();
}

결과 보기

함수가 실행되었습니다.6

---

07. 화살표 함수 (매개변수 함수)

화살표 함수에서 변수 선언을 해주어야 하지만 생략이 가능하다.

{
//화살표 함수 익명함수 기본 표현
const func = (str) => {
    document.write("함수가 실행되었습니다.6");
}

//화살표 함수 익명함수 단일 표현
const func = (str) =>  document.write("함수가 실행되었습니다.7");

func();
}

결과 보기

함수가 실행되었습니다.7

---

08. 화살표 함수 (리턴값 함수)

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

결과 보기

함수가 실행되었습니다.8