JavaScript 기초2

1. function

---

1. function

[그림 1] function의 구조

함수는 JavaScript에서 기본적인 구성 블록 중 하나이다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야 한다. function 함수이름() {}의 문법으로 함수를 정의할 수 있고, return 문은 함수에 의해 반환된 값을 지정한다. 반환된 값은 함수 밖에서 사용할 수 있다.

 

함수 내에서 정의된 변수는 변수가 함수의 범위에서만 정의되어 있기 때문에, 함수 외부의 어느 곳에서든 액세스하는 것이 불가능하다. 그러나, 함수가 정의된 범위 내에서 정의된 모든 변수나 함수는 액세스할 수 있다. 즉, 전역함수는 모든 전역 변수를 액세스할 수 있다.

 

※ 함수를 선언하는 방법

(1) 명명 함수 선언 (named function declaration)

(2) 익명 함수 표현 (anonymous function expression)

(3) 명명 함수 표현 (named function expression)

(4) 화살표 함수 (arrow function)

 

(1) 명명 함수 선언 (named function declaration)

function hello() {
   // ...
}

가장 많이 쓰이는 방법이다. 함수의 이름이 hello이고, 호이스팅이 되기 때문에 어느 스코프에서든 호출이 가능하다.

 

(2) 익명 함수 표현 (anonymous function expression)

let hello = function() {
    // ...
}

이름이 없는 함수를 변수에 담은 방식이다. 이름이 없는 함수이지만, 자바스크립트 엔진이 이름을 변수명으로 추정하여 넣는다. 변수 할당은 호이스팅 되지 않으므로, 할당이 된 이후에만 실행 가능하다.

 

(3) 명명 함수 표현 (named function expression)

let hello = function webmaster() {
    // ...
}

익명 함수 표현과 거의 동일하지만, 다른 점은 함수 이름이 명확하게 선언되어 있어 자바스크립트 엔진에 의해 추론되지 않는다.

 

(4) 화살표 함수 (arrow function)

let hello = () => {
    // ...
}

최근 많이 쓰이고 있는 함수이다. 주요 특징으로는 constructor로 쓰일 수 없고, prototype을 가지고 있지 않는다. yield 키워드를 허용하지 않으므로 generator를 쓸 수 없다.

 

[그림 2] function 사용 예

명명 함수 선언을 통해 lee라는 이름의 함수를 선언했다. function 안에 result를 선언하여 return 값이 result가 되도록 했다. 이후 id1과 id2를 각각 lee함수에 'web7722', '홍길동'을 대입한 변수로 선언했다. console.log()에 id1과 id2가 포함되도록 해주었다. \n은 개행의 의미를 갖고 있다.

 

[그림 3] function 결과값

Hello world!라는 문구가 나온 뒤 \n에 의해 다음 행으로 행이 바뀌었고, id1과 id2에 대한 결과 값이 나타났다.