[Javascript] 함수, 화살표 함수 (function, arrow function)

함수

 

함수의 개념 자체는 다른 언어의 함수와 같다.

자바스크립트에서 함수는 아래와 같이 생겼다.

 

Function

Console

 

전체적인 틀에선 매개변수와 리턴값이 존재한다.

보통 함수를 정의하는 것처럼 함수명, 매개변수, 리턴값, 실행문, 범위로 구성된다.

또한 함수의 매개변수에 기본 값을 정해줄 수도 있다.

 

아래는 익명함수라는 것인데 말그대로 이름이 없는 함수이다. 이때 noName은 변수명이지 함수명이 아니다.

함수 리터럴을 만들고 함수 리터럴의 주소 값을 변수에 저장하여 사용하는 방법이다.

추가적으로 익명함수에는 기본 값을 설정 할 수 없다.

 

함수 정의와 익명함수는 호이스팅에서 갈린다.

함수 정의는 자바스크립트 실행 시 최상단으로 끌여올리지는데 익명함수는 그렇지 못한다.

 

Hoisting

Console

두 함수 모두 정의되기 전에 호출을 했는데

 

console.log(test()) 는 undegined를,

console.log(test2) 는 에러를 띄운다.

 

 

화살표 함수

 

화살표 함수는 말그대료 화살표 처럼 생겼다. 화살표 함수 또한 익명함수이다.

아래의 예제을 통해 확인하겠다.

 

Arrow function

Console

해당 코드는 iterables 배열 내부의 모든 요소에 대해서 console.log(r + "is iterable!")을 실행시키라는 말이다.

이때 console.log()의 반복은 arrow function을 통해 구현된다.

 

해당 코드의 화살표 함수는 아래와 똑같은 기능을 수행한다.

 

Arrow function2

Console

 

콘솔의 출력값을 통해 두 함수 모두 같은 기능을 수행한다는 것을 알았다.

그런데 이때 화살표 함수를 사용한 코드가 훨씬 간결하고 보기가 좋다.

 

그래서 화살표 함수를 사용하는 것이다.

 

그리고 화살표 함수도 값을 반환할 수 있다.

 

화살표 함수 내용을 정의할 때 { 중괄호 }를 사용하지 않으면 연산 또는 실행의 결과가 바로 반환된다. (implicit return)

만약 실행문이 여러줄이라 중괄호를 사용하였다면 return 값을 꼭 명시해주어야 값을 반환한다. 

() => {
	statement1;
    statement2;
    return value; //중괄호 사용시 값 반환하려면 필수
}

중괄호를 사용하는 순간 자동으로 값 반환이 안된다.

이때 굳이 값을 바로 반환시키고 싶다면 중괄호를 다시 소괄호로 감싸주면 된다. 

const varName = () => ({
	statement1;
    statement2;
}) // 소괄호로 감싸주면 로직에 따라 결과값 반환

 

 

그리고 화살표 함수를 사용할 때 주의해야할 점이있다.

바로 this 키워드를 사용할 때이다.

화살표 함수에서 this는 항상 window 객체를 가르킨다.

 

바로 예제를 통해 설명하겠다.

 

Click event

Console

 

버튼을 클릭하면 this를 출력하는 코드이다.

 

해당 예제에서는 <button>click me </button>이 출력되었다. 특별한 문제 없이 이상적이게 잘 실행되었다.

 

그러나 이때 arrow function을 사용하면 버그가 생긴다.

 

Arrow function this

Console

콘솔에서는 window 객체가 출려되었다.

이처럼 arrow function에서 this는 항상 window 객체이다. 이는 bind 메소드 때문이라고 한다.

 

만약 window 객체에 접근하고 싶은게 아니라면, this를 사용할 때는 arrow function을 사용하지 않는 것이 좋다.