[Javascript] function

함수

자바스크립트를 다룰 때 함수는 정말 많이 사용되기도하면서 헷갈리기도 합니다.

 

이 글에서는 함수를 기초적인 개념부터 심화적인 개념까지 학습합니다.

---

함수 선언식

함수 선언식은 function이라는 키워드와 함께 작성합니다

function 작명(){
console.log('Hello!') // Hello!
}

작명() // 함수 실행

 

함수 선언과 실행은 다른 개념입니다.

 

함수를 선언만 하고 실행을 하지않는다면 선언된 함수는 스크립트 내에 보관만 되어있을겁니다.

 

함수 실행은 작명해둔 함수 옆에 ()만 넣으면되는데 이를 함수 호출이라 부릅니다.

 

함수는 변수를 사용하여 더 유기적으로 작동 되기도 합니다.

 

함수 내부에서 변수를 작성하여 함수를 사용할수도 있습니다.

 

이때 선언된 변수를 지역변수라고 합니다.

 

이때 변수는 { } 스코프 내에서만 활동하기 때문에 외부에서 사용할 수 없습니다.

function 안녕(){

const hi = hello

console.log(hi)

}


안녕() // hello

console.log( hi )  // X

---

 

외부에서 선언된 변수를 가져올 수도 있습니다.

 

스코프 외에서 선언된 변수를 전역 변수라고 합니다.

let user = 'kim'

function 안녕2(){

console.log(`hello ${user)`)

}

안녕2() // hello kim

 

그런데 전역에서 선언된 변수를 함수 내부에서 값을 바꾸면 어떻게 될까요?

let user = 'kim'

function 안녕2(){

user = 'park'

console.log(`hello ${user)`)

}

console.log(user) // 'kim' : 함수 실행 전에 사용됬기 때문에 kim이 나옵니다

안녕2() // 'hello park'

console.log(user) // 'park' : 함수 실행 후 사용됬기 때문에 park이 나옵니다.

 

이 처럼 전역에 선언된 변수는 함수에서 값이 바뀔 수 도 있습니다.

 

따라서, 외부에서 선언된 변수를 함수 내부로 가져오는건 지양하는것이 좋습니다.

---

그런데 변수처럼 고정된 값을 가져오는 것이 아니라 능동적으로 변하는 변수를 가져오려면 어떻게 해야할 까요??

 

함수의 ()사이에 넣어주면되는데 이걸 매개변수 혹은 파라미터 , 인자 라고 부릅니다.

function whoIs (name,job){

console.log(`${name} is ${job}`)

}

whoIs('jackson','singer') // jackson is singer

 

함수 호출과 동시에 매개변수 자리에 와야할 값이 'jackson'과 'singer'로 적혀있습니다.

 

이 자리에 오는 값을 인수라고 부릅니다.

 

인수에 무엇인가를 적으면 그 값은 함수의 매개변수의 값이 됩니다.

 

그런데 예를들어 같은 함수를 많이 작성해야하는데 인수의 두번째 값은 거의 고정값이어야합니다.

 

이럴때 매번 함수 실행할 때마다 두번째인수 적고 체크하기 귀찮지않을까요?

 

이럴때는 매개변수의 기본값을 지정해 주어야합니다.

 

이게 무슨소리인지 예시를 들어보겠습니다.

// 학생들의 MBTI 조사를 한 결과 학생들의 대다수는 ENFP인것으로 확인되었습니다.
// 학생들의 이름과 MBTI를 정리해 봅시다.


function researchMBTI(student,mbti = 'ENFP'){

console.log(`${student}의 MBTI는 ${mbti}야!)

}

researchMBTI('진수') // 진수의 MBTI는 ENFP야!

researchMBTI('승은','ISTJ') // 승은의 MBTI는 ISTJ야!

 

매개변수 옆에 =을 넣음으로서 기본값을 넣을 수 있었습니다.

 

만약 기본값이 없었다면 여기서 mbti의 값은 undefined로 반환되었을 것입니다.

 

그리고 매개변수가 얼만큼이나 들어올지 잘 모르는 경우가있습니다.

 

이럴때 사용되는게 arguments라는것이 있습니다.

function args(){
console.log(arguments)
}

args('hello','i','am',22,'yo')  // ['hello','i','am',22,'yo']

 

그러나 arguments는 화살표함수에서 사용을 못하고 진짜 배열을 뽑아주는게 아닌 유사배열을 뽑아줍니다.

 

그러므로 내가 함수를 만들어서 사용한다 할때는 rest문법을 써주는게 조금 더 효율적입니다.

---

 

그런데 이렇게 정해져있는 문자열이아닌 유동적인 계산이 필요한 함수라면 어떻게 사용되어야 할까요?

 

return이라는 함수의 값을 뱉어내주는 키워드가 있습니다.

 

보통 값을 뽑아내야하는 함수에 쓰이는 키워드입니다.

 

다음 예시를 통해 return을 사용한 함수와 사용하지 않은 함수의 값이 어떻게 반환되나 관찰해보겠습니다.

function pow(a,b){

 a ** b

}

pow(2,2)  // undefined

function pow2(a,b){

 return a ** b

}

pow2(2,2)  // 4

 

return은 값을 뱉어주는 역할을 하는데 그 값을 호출한 곳에 뱉어냅니다.

 

또한 함수는 return문을 만나면 그 즉시 함수가 종료되어버리기 때문에 반복문같은걸 돌릴때 주의해야합니다.

 

그리고 return 밑의 줄 부터는 모조리 무시해버리는 성질을 가지고 있습니다.

 

그렇기 때문에 꼭 값을 뱉어내야 하는곳에만 사용해야합니다.

---

함수표현식

리액트같은 곳에서 많이 사용되는 함수 표현식이라는게 있습니다.

 

자바스크립트에서 함수는 하나의 값이기 때문에 변수안에도 담깁니다.

 

이때 변수에 담는것과 동시에 함수를 선언해줍니다.

const sayHi = function(){

console.log('hello')

}; 

sayHi() // 'hello'

console.log(sayHi) // function(){console.log('hello')}

 

이렇게 함수 표현식을 사용할 때 함수를 실행하려면 마치 함수호출하듯 변수옆에 ()를 붙여쓰면 됩니다.

---

콜백함수

함수안에 함수를 넣는것이 콜백함수입니다.

 

콜백함수는 어떤 일이 끝났을 때 실행할 함수를 적으면 됩니다.

 

예시를 들어서 설명해보겠습니다.

// 익명함수를 콜백함수로 만들기

function checkAge(age){
if(age > 18){
function(){ console.log('성인입니다') }
}
else {console.log('성인이 아닙니다')}
}

checkAge(20)  // '성인입니다.


// 매개변수로 콜백함수 사용하기

function checkAge(age,yes,no){
if(age > 18) yes() 
else { no() }
}

function adult(){
console.log('성인입니다')
}

function kid(){
console.log('성인이 아닙니다')
}

checkAge(15,adult,kid) // '성인이 아닙니다'

---

재귀함수

재귀함수란 함수안에 자기 자신을 호출하는 함수입니다.

 

그런데 아무 제약없이 자기 자신을 계속 호출 시키면 멈춤없이 자기자신을 반복하기때문에,

 

조건문과 같이써 재귀탈출 조건을 만들어 주어야 합니다.

 

간단한 재귀함수를 만들어 보겠습니다.

function countDown(n) {
  if (n === 0) {
    console.log("땅!");
    return;
  } else {
    console.log(n);
    countDown(n - 1);
  }
}

countDown(3); /// 3 -> 2 -> 1 -> ' 땅!'

 

3 2 1 땅이 순서대로 나오네요!

 

위 예시처럼 재귀함수는 조건이 참이될때 조건을 탈출하게 만들 수 있습니다.

 

그렇다면 이 함수는 어떨까요

function sum(arr, i = 0) {
  if (i === arr.length) return 0;
  return arr[i] + sum(arr, i + 1);
}

console.log(sum([1, 2, 3, 4])); // 10

 

참값에가서 재귀함수가 정지했으니까 return은 0이 되어야하는거 아닐까요??

 

그런데 왜 10이 나와요?

 

그건 실행컨텍스트라는 것과 스택의 개념에대해 이해해야하는데,

 

스택이란 한면이 막힌 상자에 데이터를 집어넣는 것과 같아서 마지막에 저장된데이터가 먼저 나오는 형태의 구조를 말합니다.

 

실행컨텍스트는 함수,this값, 변수값같은 데이터를 담고있는 세부정보인데요.

 

이 실행컨텍스트는 호출이 되면 실행컨텍스트 스택이 생성되고 현재 실행중인 함수가 일시중지되면서

 

실행컨텍스트 스택에 쌓입니다. 최종적으로 조건이 참값일때 일시중지가 풀리면서 스택에 쌓인 데이터가 차례로 계산되는데요

 

위 함수의 실행 과정을 풀어서 사용한다면

arr[0] + ? // arr[0] + sum(arr, o + 1);
arr[1] + ? // arr[1] + sum(arr, 1 + 1);
arr[2] + ? // arr[2] + sum(arr, 2 + 1);
arr[3] + ? // arr[3] + sum(arr, 3 + 1); 조건 참 달성

// 일시 중지 풀림

4 + 0
3 + 4
2 + 7
1 + 9 == 10

 

조금 의아해보이긴 하는데 앞서 말한 실행컨텍스트와 스택의 개념을 이해했다면

 

조건이 참이 되자마자 일시정지되어있던 함수들이 다시 실행되면서 계산되는 형태임을 볼 수 잇습니다.