[Javascript 알짜개념] 함수, 호이스팅, this

선언과 표현 그리고 호이스팅

 

함수 선언문 (호이스팅 ⭕️)

function hello(){}

 

함수 표현식 (호이스팅 ❌)

const hello = function(){}

 

호이스팅 : 함수의 선언부가 유효한 범위 안에서 제일 꼭대기에 끌어올려서 사용되어지는 방식 

 

hello()

function hello() {
  console.log('Hello~');
}

// 호출 먼저 하는 것은 말이 안 되지만, 출력에 문제 없음

 

---

 

즉시실행함수 (IIFE)

 

const a = 7;

(() => {
  console.log(a * 2)
})()

// 14

(() => {})() // (F)()
(function(){})() // (F)()
(function(){}()) // (F())
!function(){}()  // !F()
+function(){}()  // +F()

((a,b) => {
  console.log(a.innerWidth)
  console.log(b.body)
})(window, document)

// 외부 변수의 이름을 바꿔다가 쓰는 코드 난독화에 유용하게 쓰임

 

---

 

콜백함수 : 함수가 실행될 때  인수로 들어가는 또 하나의 함수

 

const a = () => {
  console.log('A')
}

const b = () => {
  console.log('B')
}

a(b)

 

---

 

재귀함수 : 함수가 자기 자신을 호출하는 함수

 

const a = () => {
  console.log('A')
  a()
}

a()

const userA = {name : 'A', parent: null}
const userB = {name : 'B', parent: userA}
const userC = {name : 'C', parent: userB}
const userD = {name : 'D', parent: userC}

const getRootUser = user => {
  if (user.parent) {
    return getRootUser(user.parent)
  }
  return user
}

console.log(getRootUser(userA))  // userA~D 순서대로 입력

// {name: 'A', parent: null} 만 계속 출력됨
// 재귀함수는 무한으로 반복 실행하면서 특정 조건을 거를 수 있는 방법으로 사용하기에 유용하다

 

---

 

this

일반함수

// 일반 함수의 this 는 호출 위치에서 정의

 

const user = {
  firstName : 'Heropy',
  lastName : 'Park',
  age : 85,
  getFullName : function(){
   return `${this.firstName} ${this.lastName}`
  }
}

console.log(user.getFullName())

// Heropy Park

 

 

화살표함수

// 화살표 함수의 this 는 자신이 선언된 함수(렉시컬) 범위에서 정의

// 만들어진 함수를 감싸는 범위!

 

function user() {
  this.firstName = 'Neo'
  this.lastName = 'Anderson'

  return {
   firstName : 'Heropy',
   lastName : 'Park',
   age : 85,
   getFullName () {
    return `${this.firstName} ${this.lastName}`
   }
  }
}

const lewis = {
  firstName: 'Lewis',
  lastName: 'Yang',
}

const u = user()
console.log(u.getFullName())
console.log(u.getFullName.call(lewis))

// Heropy Park
// Lewis Yang

 

getFullName 이 일반함수이기 때문에 다른 객체의 함수로도 사용할 수 있다는 것이 포인트!!

 

 

this 는 일반함수와 화살표함수의 사용을 적절하게 해야한다

ex.

const timer = {
  title: 'Timer!',
  timeout() {
    console.log(this.title)
    // 일반함수에서 화살표함수로 바꿔주면 잘 나옴
    setTimeout(function(){
      console.log(this.title)
    },1000)
  }
}

timer.timeout()

// Timer!
// undefined 

(함수 안에 함수가 있는데 this 를 사용할거라면 화살표 함수로 바꿔주면 
자신이 선언된 렉시컬 범위로 확장되기 때문에 유용함)

 

this 가 지금은 적극적으로 써본 적이 없어서 이 개념이 확 와닿지는 않고 암기식으로 습득했지만, 앞으로 많이 사용될 것 같기는 하다,,

함수를 선언할 때 어떤 방식으로 선언할지? 선언식 / 표현식 이것도 중요하지만

일반함수 혹은 화살표함수 어떤 것을 써야할지 용도에 따라 적절하게 선택해서 써줘야하는 것을 알게 되었다.