Javascript // 3일차 [함수]

목차

1. 함수 사용 이유

2. 함수 선언

    - 호이스팅

3. 함수 호출

4. 매개변수, 인자

5. 콜스택

6. 재귀함수

---

1. 함수란 ?

 

대부분 함수는 어떠한 최소단위의 동작을 만들 때 사용

또한 중복 코드를 피하기 위해서 사용.

 

기본 함수 형태.

function message () {
console.log("hello world")
}
message()

 

코드를 입력하고 저장하면  1. 브라우저가 코드를 읽고 실행 2. 브라우저는 html > css > js 순으로 로드, 코드를 실행

---

 

2. 함수 선언

 

function      message      (){}

예약어          함수 이름           

 

 

    - 호이스팅

{
var text = "javascript
}

console.log(text)

var 가 지역변수로 들어가 있으나 var는  ** js 로드할 때 선언 부분이 맨 위로 올라간 것

 

function 또한 같은 원리로 실행이 가능

 

showMessage()
function showMessage(){
    console.log("hello showMessage")
}

**하지만 호이스팅이 안 일어나게 개발을 해야 잘 하는 개발자다.

 tip 호이스팅 = 지역변수가 전역변수로 바뀐것 이라고 이해를 하는것도 편하다.

 

 

** 지역변수 전역변수

 

{}안에 써져있는 const와 let은 {}안에서만 사용이 가능하다.

하지만 바깥에 써있다면 {} 안에서도 쓸 수 있다.

 

## 전역변수 지역변수 활용

let result=0
for (let i = 1; i < 101; i++){
    result = result + i
}
console.log(result)

---

3. 함수 호출

함수 호출

함수명 () - 함수 호출
message ()

parseInt()
console.log() 도 함수를 호출하는 명령

console.log() = 이미 자바에서 제공해주는 함수를 호출 한 것 

모르겠으면 노란색 컬러가 붙으면 함수다! // ()가 뒤에 붙어 있으면 함수다.

---

 

4. 매개변수, 인자

 

매개변수 (parameter) 와 인자 (Argument)

 

매개변수 = 함수안에서 선언하는 변수. 
인자 = 함수 호출시 넣는 값
함수 선언 - 매개변수 **자리가 중요함
() 안에 변수명 만들듯이 하면 됨.

 

function showMessage(name, age) {
    console.log("hello" + name + "age"  +  ":" + age )
}

showMessage("ingoo", 32)

name, age는 매개변수 //

ingoo, 32는 인자값 //

인자 값이 매개변수에 들어감.

---

5. 콜스택

함수를 만들면 함수는 힙이라는 공간에 들어간다. 코드는 실행이 되었지만 힙이라는 공간에 넣었을 뿐 아무런 기능을 하지 않는다.
콜스택 영역 > 콜스택이 비워지면서 코드가 실행이 됨.  그러면서 콘솔 로그에 찍기
힙 = 실행은 되지만 로그엔 찍히지 않는 상태

js = 전체 코드를 함수로 묶어서 한 번 읽고 실행을 한 번 함. 
코드를 하나씩 잘게잘게 구분을 함 let function등 예약어를 힙 공간에 넣기 시작함.
console.log 등이 콜스택에서 실행을 함

콜스택은 위에서부터 쓰기 시작함

힙에 들어간 애들이 이미 실행이 되었고 어딘가에 저장이 되어 있다는 사실.

function a(){
    console.log('a 함수 호출')
    return 1
}

function b(){
    console.log('b 함수 호출')
    return 2
}

function c(){
    console.log("c 함수 호출")
    return 3
}

function d(){
    console.log("d 함수 호출")
    return 4
}

const x = a() // a함수호출 1
console.log(x) //a함수 호출 1
let y = b() + c() // b함수호출 2 c함수호출 5 
y = y + d() //d함수호출
console.log(y) // b함수 호출 c함수 호출 d함수 호출 9

1. 힙 공간에 function a ~ b 저장

2. const x = a 값 힙공간 저장

3. console.log(x)  콜스택에 들어감과 동시에 실행

4. let y = b() + c () 힙 공간에 저장

5  y = y + d()  d 함수 호출  힙 공간에 저장

6. console.log(y) 콜스택에 들어감과 동시에  실행

---

 

6. 재귀함수

 

function sum(n){
    if(n<=98){
        return 1
    }
    return n + sum(n - 1)
    // 100 + 99 + 98 ..... 진행
    // 리턴 n + sum이 먼저 실행이 됨. 연산이 끝날 때 까지 리턴이 실행되지않음
}

console.log(sum(100))

처리순서

 

1. sum 100을 처리해야지 콘솔로그가 처리됨
2. sum 100을 시작함 
3. if 값이 실행이 안됨( 100 <= 98  >>>> false)
4. reuturn 100 + sum(99)
5. 99를 호출 
6. sum 99 
7. ...

 

98 의 리턴 값이 1
return 98 + sum((98))  sum(98)은 1이기 때문에 
98 + 1 = 99의 값이 됨. 99의 값은 100

따라서 sum100의 값은 200

모르겠다.

 

return

함수 안에서만 사용하는 예약어, 디폴트로 이미 함수가 마지막에 들어가 있음
리턴은 기본적으로 함수 내부에서  함수를 종료시킴
함수를 호출했을 때 함수가 나타내는 데이터를 리턴 뒤에다가 붙임

---