[CS Study] 화살표 함수와 일반 함수

개요

• 함수의 정의방식
• 일반 함수와의 차이점
  

---

함수의 정의 방식

함수의 정의 방식은 일반적으로 function keyword를 활용한 정의와 화살표 함수를 활용한 정의 2가지로 나뉘어진다 

 

Function keyword를 활용한 정의

• 함수 선언식
  
  • 함수를 선언하는 가장 기본적인 방법
  • 호이스팅(선언을 최상단으로 끌어올리는 행위)이 가능하다
  • 익명함수를 만들 수 없다 (함수의 이름이 필수)

main() // 호이스팅으로 가능함
function main() {
  console.log('hello')
}
main()

• 함수 표현식
  
  • 호이스팅이 되지 않는다 
  • 익명함수를 만들 수 있다

const main = function main() {
  console.log('hello')
}
// 네임드 함수

const main = function() {
  console.log('hello')
}
// 익명 함수
main()

 

화살표 함수

ES6에서 추가된 새로운 문법으로 기존 함수 표현식과 비교해 간결하게 사용이 가능하다.

 

사용법)

function fun() { // 일반함수
  ...
}
const arrFun = () => { // 화살표 함수
  ...
};

 

특징)

• {} 내부 코드가 한줄인 경우 {}와 return키워드를 생략할 수 있다
• 매개변수가 하나라면 ()를 생략할 수 있다
• 객체를 return하는 경우 문법의 혼란을 방지하기 위해 ()를 사용한다.

function add(a, b) {
  return a + b
}

function print(text) {
  console.log(text)
}

// 특징1
const add = (a, b) => a + b

// 특징2
const print = text => console.log(text)

// 특징3
const getObject = () => ({name: "아아아"})

 

 

---

일반함수와의 차이점

arguments의 유무

• 일반 함수에서는 arguments(명시하지 않아도 전달 받는 배열 형태의 객체)를 통해서 가변인자에 접근하는 방식이 접근이 가능하다
• 화살표 함수에서는 ...args(스프레드를 이용한 접근)을 통해서 가능하다

function main() {
  console.log(arguments[0])
}
main(1, 2, 3)

const main = () => console.log(arguments[0])
main(1, 2, 3) // error

const main = (...args) => console.log(args[0])
main(1, 2, 3) // 쌉 가능

 

this의 차이

• 일반 함수의 this는 함수의 선언 위치와 상관없이 호출 방법에 따라 달라진다
• 화살표 함수의 this는 함수를 선언한 위치에 따라 결정되며 상위 스코프의 this를 그대로 가져다 쓴다.

일반함수와 화살표함수

// 일반 함수는 호출하는 위치에 따라서 this의 값이 바뀐다.
const obj = {
  name: 'kang',
  main: function() {
    console.log(this)
  }
}

const obj2 = {
  name: 'kim',
  main: obj.main
}

obj.main() //obj 객체 일반함수 안의 this값은 함수를 호출한 객체가 된다 
obj2.main() // obj2 객체 this값이 바뀐다

// 화살표함수는 자신만의 this를 가지고 있지 않기에 외부에서 가져와서 사용을 한다
const obj = {
  name: 'kang',
  main: function () {
    console.log(this)
  },
  mainArrow: () => {
    console.log(this)
  }
}

const obj2 = {
  name: 'kim',
  main: function () {
    console.log(this)
  },
  mainArrow: () => {
    console.log(this)
  }
}

obj.mainArrow() //window
obj.mainArrow() // window obj와 달라지지 않았다.
// 우리가 만들어 준 객체에 접근하기 위해서는 화살표 함수가 아니라 일반 함수가 객체의 메서드에는 더 적합하다.

 

내부함수에서의 화살표함수의 this는 생성한 객체가 일반 함수는 window가 출력된다

// 일반함수
const obj = {
  name: 'kang',
  main: function () {
    const innerFunc = function () {
      console.log(this)
    }
    innerFunc()
  },
}

obj.main() //window가 된다
// 일반 함수의 this는 함수를 호출한 객체가 된다
// innerFunc는 어떠한 객체로부터 호출된 구조가 아니기에 window가 된다

const obj = {
  name: 'kang',
  main: function () {
    const innerFunc = () => {
      console.log(this)
    }
    innerFunc()
  },
}

obj.main() //obj 객체가 된다
화살표 함수를 감싸는 것은 main이다 main함수가 호출될때 객체는 obj로 정해져있기때문에 this가 obj가 된다.

 

 

화살표함수는 자신만의 this가 없어서 bind를 통한 this값의 고정이 불가능하다

const obj = {
  name: 'kang',
  main: function () {
    const innerFunc = function () {
      console.log(this)
    }.bind({hi: 'hi'})
    innerFunc()
  },
}

obj.main() //{hi: "hi"}

const obj = {
  name: 'kang',
  main: function () {
    const innerFunc = () => {
      console.log(this)
    }.bind({hi: 'hi'})
    innerFunc()
  },
}

obj.main() // obj 객체

 

콜백함수로 보는 일반 함수와 화살표 함수의 this 차이

const obj = {
  name: 'kang',
  main: function () {
    setTimeout(function() {
      console.log(this)
    }, 1000)
  },
}

obj.main() // window 출력 됨
// 콜백함수는 setTimeout의 내부적인 구현사항에 달려있기에 this 또한 내부 구현사항에 달려있다

const obj = {
  name: 'kang',
  main: function () {
    setTimeout(()=> {
      console.log(this)
    }, 1000)
  },
}
obj.main() // obj 객체가 나온다
// main함수 안의 this와도 같은 값이므로 객체를 반환한다.

 

 

https://www.youtube.com/watch?v=mfaQOlc73pU

https://www.youtube.com/watch?v=j6VkGimAs-E