[JavaScript] 일반 함수와 화살표 함수

일반함수와 화살표함수의 차이에는 함수 선언식, 함수 표현식, this의 차이가 있다.

함수 선언식

일반함수

function키워드와 함수이름을 사용하여 블럭 안에 함수 내용을 입력한다.

function hello(){
	console.log("Hey, what's up?")
}

hello(); // 함수 호출 결과 : Hey, what's up?

• function키워드로 선언한 함수식은 호이스팅이 된다.
  따라서, 함수 선언 전에 함수를 호출해도 호이스팅이 되기 때문에 콘솔 창에 위와 같은 결과값을 볼 수 있다.

hello2(); // 함수 호출 결과 : Hey, what's up? 2

function hello2(){
	console.log("Hey, what's up? 2")
}

함수 표현식

일반함수

함수 선언식은 함수 이름이 반드시 포함되어야하나, 함수 이름을 사용하지 않고 선언하려면 함수 표현식을 사용하면 된다.

const hello = function(){
	console.log("Hey, what's up?")
}

hello(); // 함수 호출 결과 : Hey, what's up?

hello라는 변수에 할당해서 변수 이름을 호출하면 해당 함수가 호출된다.
다만, 이렇게 변수에 함수를 할당하게되면, 함수 선언식과 다르게 호이스팅이 안된다

화살표함수

ES6에서 함수를 정의하는 또 다른 문법으로 화살표를 사용해서 함수를 선언해준다.
따라서 일반함수보다 더 간결하게 함수를 작성할 수 있다.

const hello2 = () => {
	console.log("Hey, what's up? 2")
}

hello2(); // 함수 호출 결과 : Hey, what's up? 2

• 화살표 함수는 return 키워드를 작성하지 않아도, 표현식으로 되어있는걸 자동으로 리턴해준다.

const hello2 = () => console.log("Hey, what's up? 2")

• 매개변수가 1개일 경우에는 ()로 감싸주거나 생략할 수 있다. 그러나 1개 이상이면 ()로 감싸줘야한다.

const greeting = (text) => console.log(text)

greeting("hey");

const greeting2 = text2 => console.log(text2);

greeting2("HIIII");

• 화살표 함수에서 객체 하나를 리턴할 경우에는, {}를 사용하지 않으면 혼란이 올 수 잇으니, 객체를 리턴할때는 ()로 감싸줘야한다.

const greeting = () => ({say: "hello"})

console.log(greeting()); // {say: "hello"}

this

일반 함수

일반 함수에서 this는 자신만의 this를 가지고 있다. 그래서 함수가 어디에 선언되어있는지는 상관 없으며, 함수가 어떻게 호출되었느지에 그 방법에 따라 값이 달라진다.

function profile(){
	console.log(this.name)
}

const personA = {
	name: "Olivia",
    profile: profile,
};

const personB = {
	name: "Violet",
    profile: profile,
}

personA.profile(); // Olivia
personB.profile(); // Violet

personA의 경우, personA를 통해 호출하는 것이니, this값은 personA 객체를 가르키게 된다.

화살표 함수

화살표 함수는 자신만의 this를 가지고 있지 않다.
따라서 함수 내부에서 this를 접근하게 되면 해당 함수를 감싸고 있는 상위 스코프에 올라가서 this를 찾은 뒤 그대로 가져와서 사용된다.
따라서 함수 호출 방법과는 상관 없고 함수 상위 스코프의 값을 그대로 가지고 오게 된다.

const profile = {
	name: "David",
    person: function() {
    	const arrowFunction = () => {
        	console.log(this);
        }
        arrowFunction();
    }
};

profile.person(); // {name: "David", person: f}

이말은 아래의 코드처럼 person: function(){console.log(this)}의 값과 같다.

const profile = {
	name: "David",
    person: function() {
    	console.log(this);
    	const arrowFunction = () => {
        	console.log(this);
        }
        arrowFunction();
    }
};

profile.person(); // {name: "David", person: f}

그렇다면 왜 값이 {name: "David", person: f}냐고?
person 함수는 profile.person()으로 person함수를 호출했기 때문에, {name: "David", person: f}게 출력되는 것이다.