CH04. 함수

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

• 함수 선언문

  : 일반적으로 함수에 이름이 붙어 있고(기명함수) 호이스팅 발생

	function hello() {}

• 함수 표현식

  : 함수에 이름을 붙이거나 익명 함수로 사용하고 호이스팅 불가능

	const hello = function () {}

-> 호출 방법은 동일: hello()

• 호이스팅

  : 함수 선언부가 유효범위 최상단으로 끌어올려지는 현상

hello()

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

-> hello함수가 호이스팅 되어 Hello 출력


*단, 함수 표현에서는 발생하지 않음

hello()

const hello = function () {
console.log('Hello')
}

-> 아직 hello 함수가 만들어지기 전이어서 에러발생

---

🔍반환 및 종료

return 키워드

• 함수 내부에서 함수 밖으로 데이터를 반환
• return 키워드 밑에 있는 코드는 동작하지 않음

function tbz() {
	return 'ksw'
}

console.log(tbz())   //함수 호출하여 실행값 반환

->ksw 출력

function tbz() {
	return 'ksw'
}

console.log(tbz)   //함수 자체를 반환

->f tbz() { return 'ksw' } 출력

function tbz() {
	return 'ksw'   //종료
	console.log('jcm')
}

console.log(tbz)

->f tbz() { return 'ksw' } 출력

function tbz() {
	return       //자동으로 undefined 반환
}

console.log(tbz())

-> undefined 출력

---

🔍매개변수 패턴

• 기본값

function sum(a, b = 1) {  //기본값 1 지정
	return a + b         // 매개변수 a에는 7전달, b에는 기본값 1할당
}

console.log(sum(7))

-> 실행결과: 8

• 구조분해할당

  • 객체

const user = {
  	name: 'ksw',
  	age: 25
}
 
 function getName({ name }) {    //구조분해
   	return name
 }

 function getAge({ age = '나이 정보가 없습니다'}){  //나이정보 없을시 출력할 기본값 지정
   	return age
 }

 console.log(getName(user))    
 console.log(getAge(user))     

-> 실행결과:
ksw
25

• 구조분해할당

  • 배열

const fruits = ['apple', 'banana', 'cherry']

function getSecondItem([, b]) {       //a에 apple, b에 banana 들어감(a자리 쉼표로 표시)
  return b      //b값을 반환
}

console.log(getSecondItem(fruits))   

-> 실행결과: banana

• 나머지 매개변수

function sum(a, b, ...rest){
  console.log(rest)
  //console.log(argument) //유사배열
}

console.log(sum(1, 2))    //1은 a, 2는 b로 들어가고 rest로 들어갈 값은 없음
console.log(sum(1, 2, 3, 4))    //1은 a, 2는 b로 들어가고 나머지 값은 rest로 들어감

-> 실행결과:
[]
[3, 4]

---

🔍화살표 함수

: ES6(ECMA2015) 문법으로 기존보다 간편한 함수 표현식

• 화살표 함수 미사용

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

• 화살표 함수 사용

const sum = (a, b) => {
  return a + b
}

패턴

const a = () => {}

const a = x => {}         //매개변수가 하나일 경우 소괄호 생략가능

const a = (x, y) => {}         //매개변수가 두개 이상일 경우 소괄호 생략 불가능

const a = x => {return x * x}         //로직 시작이 return키워드일 경우
const a = x => x * x                  //중괄호와 return키워드 생략가능

const a = () => { return {a: 1}}        //return키워드와 객체데이터가 있을경우
const a = () => ({a: 1})               //중괄호와 return키워드 생략 후 객체데이터는 소괄호로 묶기

---

🔍즉시실행함수(IIFE)

: 별도의 이름없이 익명함수로 내용을 만들고 바로 실행 가능

const a = 7

const double = () => {
  console.log(a * 2)
}
double()     //기존 함수 호출 방법

;(() => {    //즉시실행함수
  console.log(a * 2)     //14 출력
})()

• 외부의 변수를 다른이름으로 내부에서 사용가능, 코드의 난독화에 주로 사용

;((a, b) => {
  console.log(a.innerWidth)    //창의 넓이 확인
  console.log(b.body)          //문서의 body 확인
})(window, document)

패턴

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

---

🔍콜백

: 함수가 실행될때 인수로 들어가는 또 하나의 함수,
다른 함수가 호출될 때 다른 함수의 인수로 전달하며 다른 함수의 내부에서 호출가능

const a = callback => {      //callback 매개변수에 b함수가 들어감
  console.log('A')           //A출력
  callback()                 //b함수를 호출하여 B출력
}
const b = () => {
  console.log('B')
}

a(b)          //b함수 자체를 a함수의 인수로 넣어줌

-> 실행결과:
A
B

• 지연 실행

const sum = (a, b, c) => {   //sum함수의 세번째 인자(함수데이터)가 매개변수 c로 들어옴
  setTimeout(() => {   //실행지연함수 사용
    c(a + b)           //c함수 호출될때 a+b값이 들어옴
  }, 1000)            //1초 후 실행
}

sum(1, 2, (value) => {    //value를 감싼 소괄호 생략가능
    console.log(value)   //value가 c(a+b값)을 받아 3 출력
})

-> 실행결과: 3

---

🔍재귀

: 함수가 자기자신을 다시 내부에서 호출해서 사용하는 방법(조건이 없을시 무한반복)

let i = 0          
const a = () => {
  console.log('A')
  i += 1
  if (i<3) {        //멈출 수 있는 조건
    a()             //재귀 호출
  }
}

a()

-> 실행결과:
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 => {    //user 매개변수에 userD들어감
  if (user.parent) {             //userD의 parent 검사 -> userC(객채데이터)는 참이기에 조건 만족
    return getRootUser(user.parent //자기 자신을 호출 -> userC를 인수로 넣어 호출 -> 다시 userC가 if조건으로 감 -> 무한반복
  }
  return user  //userA인 경우 parent가 null값(거짓)이므로 if문 동작안하고 userA의 객체가 반환됨
}

console.log(getRootUser(userD))   //user A,B,C 모두 같은값 출력

-> 실행결과: {name: 'A', parent: null}

---

🔍호출 스케줄링

• setTimeout - clearTimeout 함수
  : 몇초 뒤 함수를 실행할 것인지-언제 종료할 것인지 스케줄링

• setInterval -clearInterval 함수
  : 몇초 마다 함수를 반복적으로 실행할 것인지 스케줄링

const hello = () => {
  console.log('Hello')
}
const timeout = setTimeout(hello, 2000)   //2초 뒤 실행으로 timeout 함수 스케줄링
const h1El = document.querySelector('h1') 
h1El.addEventListener('click', () => {    //h1태그 클릭시
  console.log('Clear!')
  clearTimeout(timeout)                  //timeout 함수 스케줄 종료
})

-> 실행결과:
2초안에 h1 눌렀을 시 Hello는 출력되지않고 Clear! 출력

---

🔍this

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

const user = {
  firstName: 'sw',
  lastName: 'k',
  age: 25,
  getFullName: function () {     //일반함수, :(콜론) function 생략가능
    return `${this.firstName} ${this.lastName}`  //this는 함수가 호출될 때 user 객체데이터가 됨
  }
}

console.log(user.getFullName())

실행결과: sw k

function user() {
  this.firstName = 'cm'
  this.lastName = 'j'
  
  return{
    firstName: 'sw',
  	lastName: 'k',
  	age: 25,
  	getFullName: () => {     //화살표함수 (일반함수로 바꿀시 sw k 출력)
    	return `${this.firstName} ${this.lastName}` 
    }
  }
}

const kyh = {
  firstName: 'yh',
  lastName: 'k'
}

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

실행결과: yh k

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

• 렉시컬: 함수가 동작할 수 있는 유효한 범위

function user() {
  this.firstName = 'cm'
  this.lastName = 'j'
  
  return{
    firstName: 'sw',
  	lastName: 'k',
  	age: 25,
  	getFullName: () => {     //화살표함수 (일반함수로 바꿀시 sw k 출력)
    	return `${this.firstName} ${this.lastName}` 
    }
  }
}

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

실행결과: cm j

🌱cf

firstName, lastName, age: 속성(property)
getFullName: method -> 어떤 특정한 속성의 함수(ex.함수데이터)를 할당
member: 속성과 method를 아우르는 단어