Javascript의 함수에대해 알아보자

안녕하세요 개발적금입니다.

 

오늘은 Javascript의 함수에대해서 조금 알아보겠습니다.

 

---

목차

 

1. 함수에 대해

 

2. 함수선언과 함수호출

 

3. 매개변수와 인자

 

4. 힙과 홀스택

 

5. return 에 대해

 

6. 재귀함수에 대해서

 

---

 

1. 함수에대해서..

 

함수(function)란? 작업을 수행하거나, 값을 계산하는 문장 집합 같은 자바스크립트 절차 라고 설명이 나와있네요

쉽게 생각하면 중복되는 코드들을 피하려

자주쓰는것들을 함수(function)안에 함수명을 지정하여 필요할때마다

호출하여 사용하는것입니다! 그럼 어떻게 사용할까요 함수는?

 

2. 함수선언 과 함수호출

 

javascript에는 function 즉 함수라는 예약어가 있습니다.

---

function showMessage(){

 console.log("Hello World!!")

 return;

}

 

console.log( showMessage() )

---

예약어 function(함수)에 showMessage라는 함수명을 지정해주고

호출이 되었을때는 showMessage안에 있는 내용들을 출력하게됩니다.

return이라는것은 여기서 끝내라! 라는 의미입니다. 

 

위에 코드를 해석해보면

function showMessage(){} 는 함수를 선언한것이고

 

showMessage() 는 함수를 호출한것입니다.

이런식으로 함수의 선언과 함수의 호출을 구현하는것입니다.

 

함수에대해 좀더 접근을 해볼까요?

---

let text = "javascript";

 

function msg(){

 console.log("Hello World" + text );

}

 

msg();

 

---

function msg(){

let text = "javascript";

 console.log("Hello World!" + text)};

 

---

위에 두개의코드는 다른점이 하나있습니다.

변수가 함수 밖에서 정의되었냐 ,  변수가 함수 내에서 지정되었냐..

밖에서 정의되었으면 말그대로 전역변수이고 , 안에서 지정되면 지역변수(안에서밖에못씀) 입니다..

 

그래서 위의 코드는 실행이 되지만 아래코드는 실행이 되않습니다..

 

3. 매개변수와 인자값

 

---

function showMessage(name){

 console.log("Hello " + name);

 }

 

let name = "Hong"

showMessage(name)';

---

여기서

매개변수는 함수를 정의할때 함수명() ()안에 들어가는것을 매개변수라고 하고

 

인자는 함수를 호출할때 ()안에 들어가는것을 인자값이라고 합니다.

 

인자값은 하나가 아닌 , 로 구분하여 몇개를 더 넣을수있다.

---

function showMessage2(name , age){

 console.log("Hello : " + name + " / age : " + age);

}

 

showMessage2("Hong" , 32);

 

인자값 Hong 과 32를 넣어서 함수를 호출시켰습니다

 

Hello : Hong / age : 32 이 출력이될것입니다.

---

 

4. 힙과 홀스택

 

자바스크랩트 엔진이 구동되면서 , 코드를 읽고 실행하는 과정에서 두가지 과정이

진행이되는데

 

1. 변수,함수(정보)등을 특정한 장소에 저장하는것 (Heap ,힙)

 

2. 실제 실행되고있는 코드를 트래킹하는작업. (홀스택)

 

힙 , Memory Heap이라고도 불리며 힙은 변수,함수저장,호출등의 작업이

발생하여 저장하는것을 말한다.

 

콜스택도 하나의 메모리 공간인데, 코드를 위에서 아래로 읽어내려가면서

수행할 작업들을 밑에서 하나씩 쌓고 , 메모리 힙에서 작업수행에 필요한것들을

찾아서 수행하는공간이다. 그리고 콜스택은 선입선출 구조 입니다.

 

 

5. return

 

함수 내에서 return이란 함수 실행을 종료하고 , 주어진 값을 함수 호출지점으로

반환합니다!

 

---

function a(){

console.log("a함수 호출");

return;

}

 

function b(){

c()

console.log("b함수 호출");

c()

return;

}

 

function c(){

console.log("c함수 호출");

return;

}

 

function d(){

a()

console.log("d함수 호출");

b()

return;

}

 

d();

---

예제를 통해 어떤 로직으로 알고리즘으로 흘러가는지 알아보겠습니다.

 

먼저 heap에는 function a() ~ function d()까지의 값들이 저장되겠네요

 

1. 처음에 d(); 함수를 호출하였습니다.

2. d();안에서 a(); 로 이동하였습니다

3. a();안에서 console.log가 출력이되고 return으로 a()가 끝이나고 호출시점으로 돌아갑니다

4. 함수호출시점 d()의 두번째줄 console.log가 출력이되고 , b()가 호출이됩니다.

5. b()에서 바로 c() 호출하여 c()안에 console.log가 출력이된후 return으로 함수종료 후 호출시점으로 돌아갑니다.

6. b()안에서 console.log를 출력하고 다시 c()로 가서 console.log를 출력한 후 return , return하여 맨처음 호출했었던

d()안에 4번째줄이 실행이 되며 함수가 마무리가됩니다.

 

실제출력

a 함수 호출

d 함수 호출

c 함수 호출

b 함수 호출

c 함수 호출

 

---

 

여담으로 대부분의 함수는 어떠한 최소한의 "동작"을 만들때 사용합니다.

찾아보면 함수는 동사이다.. 라고 표현을 합니다.

동사? 찾는다 먹는다 이동한다.. 이런 행위들을 뜻하죠

그래서 함수 네이밍을 할때는 앞에 대체적으로 동사형 표현을 집어넣습니다.

위에서 제가 썻던것처럼 showMessage , getName , setName , checkUserid , isUserid 등등..

개발자들끼리의 암묵적인 약속으로 서로 알아보기 쉽게 표현하는 방식입니다..

 

---

 

6. 재귀함수에 대해

 

재귀(Recursive) 란?

1. 자기자신을 호출하는 절차를 말한다.

2. 재귀 함수는 함수 정의 단계에서 자기 자신을 재참조하는 함수를 말한다.

3. 모든 반복문은 재귀로 표현할수 있고 그 반대도 적용이 된다.

 

재귀를 왜알아야 할까요? 보통의 경우에는 이 코드가 반복을 하는 코드인지 알아보기

힘든 단점이 있습니다. 그렇다고 반복문으로 구현하였을때 코드가 복잡해지는 경우도

있기 마련입니다. 이런경우 재귀함수로 구현하는것이 간단하고 이해하기도 쉽다.

 

재귀 함수 작성의 두가지 핵심 요소!!!!

 

1. 종료 조건(재귀가 멈추는 시점)

2. 다른 입력값..

 

이해를 돕기위해 1~100까지 의 숫자를 더하는 코드를 작성해보겠습니다.

 

1-1) for문을 이용하여 만들기

 

let result = 0;

for(let i = 1 ; i < 101 ; i++){

   result += i;

}

 

console.log(result);

 

2-1) 재귀함수를 이용하여 만들기

 

function sum(n){

   if( n <= 1 ){

      return 1; // 종료조건

    }

  return n + sum(n-1) // 다른입력값

}

 

console.log(sum(100));

 

---

두 코드 모두 결과값은 5050이 나오게됩니다.

하지만 코드가 구현되는 시간을 찍어보게되면 재귀함수를 사용한 코드가 1/2이 시간이 줄게됩니다.

 

for문은 이해하셨을거라 생각하고 재귀함수를 뜯어보겠습니다..

 

n을 매개변수로 받는 sum()함수를 선언하여서 매개변수가 조건문을 통해 1보다 작거나 같으면

return 1; 즉 함수를 종료하고 호출했던 시점으로 돌아가며 1을 반환하라는 뜻입니다.

1보다 크거나 같으면 조건문 밑에 return n + sum(n+1)을 실행하는데,

 

처음에 함수호출할때에 100이라는 인자를 넣었습니다.

100은 1보다 크기때문에 조건문이 실행이 안되고 밑에 return 100 + sum(99) 가 실행이됩니다.

다시 sum(99) -> 즉 n은 99이므로 1보다 크게되서 조건문이 발동하지않고 return 99 + sum(98)이 실행됩니다.

이렇게 쭉쭉 값이 나오다가 마지막 조건에서 n이 1일때 , return 1을 반환하며 100~1까지 더하게 됩니다..

 

---

 

이렇게 알아보았는데 저는 참 어렵네요 컴퓨터적인 사고가 잘안되는거같아서

이해하고 이해한부분을 말로 설명드리는데 

잘이해가 되셨을지 모르겠네요.

좀더 깊게 들어가실거면 피보나치 수열을 배워보시는걸 추천합니다!

그럼 감사합니다