[220419] JS function

📢 실강

함수 (functions)

new Function()

생성자 함수 호출로 함수로 만드는 법!
근데 자주 안 씀.

 const sum = new Function('a','b','console.log(a+b)') //클래스(객체)
//서버에서 가져올땐 json으로 밖에 안됌
sum(2,4)

반환과 종료

return
undefined

return 키워드를 사용하면 반환하고 함수 종료!

return 이 없다면 undefined 나옴

function sum (a ,b) {
  return console.log(a + b) //retuen 이 없으면 undefined 가 나옴
  console.log(123) //나오지 않음 
}

선언과 표현

매개변수 패턴

• 기본값 설정

  function sum (a= 1 , b = 3 ) { return a+b } console.log(sum(4)) // 기본값이 없다면 NaN

• 구조 분해 할당 (Destructuring assignment)

  const user = { name: 'Heropy', age: 85 } function getName({name, age}){ //name: email return [name ,age] } console.log(getName(user))

• 나머지 매개변수 (Rest parameter)
  - ...rest 는 배열데이터 

• function sum(...rest){ 
  return rest.reduce(function (acc, cur){ return acc + cur }) 
  // return rest.reduce((acc, cur) => acc + cur) } 
  console.log(1, 2, 3, 4) //10

• aguments 객체 : 모든 인수를 받아들이는 암시적인 변수

IIFE

Immediately-Invoked Function Expression
즉시 실행 함수 (표현)
익명함수에 주로 사용
;(익명함수)()
;(익명함수()) 권장

console.log(456) //;가 없다면 error

;(function (){
  console.log(123)
})()

호이스팅 Hosting

함수 선언에서만 발생
평가될때 선언부를 위로 끌어올리는 현상

콜백

콜백 함수 (callback function)
함수의 인수로 사용되는 함수

function abc(callback){
  callback()
}

abc(function(){
  console.log('ABC')
})

setTimeout(abc(), 1000)
// setTimeout(undefined, 1000)

//setTimeout 전역 함수
setTimeout(abc, 1000)

setTimeout(function(){
  console.log('ABC')
}, 1000)

function sum(a, b, cb){
  setTimeout(function (){
    cb (a + b)
  }, 1000)
}

sum(2, 5, function(res){
  console.log(res)
})

220421

화살표 함수

const hello = () => console.log('hello'); //출력안됌
const hello = message => `hello ${messages}`

function hello(){
   return 'hello~'
 }

 const hello = () => {
   return 'Hello~'
}

1. 리턴 문 한줄이면 중괄호 생략가능
2. 매개변수가 하나일대만 소괄호 생략가능
3. 객체 데이터를 리턴없이 반환할땐 소괄호로 감싼다.

this

• 일반 함수와 화살표 함수의 차이점
• 전역 객체

1. 일반 함수에서의 This
   호출되는 위치에서 정의

const heropy = {
  name: 'heropy',
  age: 85,
  phone: '01012345678',
  isVaile: true,
  getName: function() {
    return [this.name, this.age]
  }
}

console.log(heropy.getName())

const heropy = {
  name: 'heropy',
  age: 85,
  phone: '01012345678',
  isVaile: true,
  getName: function() {
    return [this.name, this.age]
  }
}
const amy = {
  name: 'Amy',
  age: 22
}
console.log(heropy.getName.call(amy))

1. 화살표 함수
   선언된 위치에서 정의
   화삺표 함수를 감싸고 있는 함수가 this가 됌(lecical scope)

const heropy = {
  name: 'heropy',
  age: 85,
  phone: '01012345678',
  isVaile: true,
  getName: () => {
    return [this.name, this.age]
  }
}
const amy = {
  name: 'Amy',
  age: 22
}
console.log(heropy.getName.call(amy))

function kmjin () {
  this.name = 'wrapper'
  this.age = 99
  const heropy = {
    name: 'heropy',
    age: 85,
    phone: '01012345678',
    isVaile: true,
    getName: () => {
      return [this.name, this.age]
    }
  }
  const amy = {
    name: 'Amy',
    age: 22
  }
  console.log(heropy.getName.call(amy))
}
kmjin()

const userA = {
  isVaild: true,
  age: 85,
  getAge: function () {
    return this.age
  }
}
const userB = {
  isVaild: false,
  age: 22,
  getAge: function () {
    return this.age
  }
}

console.log(userB.getAge.apply(userA))
//call apply 호출용 
// 다른 객체의 기능을 빌릴떄
//bind 연결용

const userA = {
  isVaild: true,
  age: 85,
  getAge: function () {
    setTimeout(function(){
      console.log(this.age)
    })
  }
}

userA.getAge() //undefined

const userA = {
  isVaild: true,
  age: 85,
  getAge: function () {
    setTimeout(() => {
      console.log(this.age)
    })
  }
}

userA.getAge() //85