221101 JavaScript - 함수 (function)

자바스크립트 함수(Function)

오늘 내가 배운 것

1. 자바스크립트에서 함수는 왜 사용할까?

2. 함수의 선언과 호출 , 함수 호이스팅

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

4. return 

5. 콜 스택

 

1. 자바스크립트에서 함수는 왜 사용할까?

 

자바스크립트를 작성할 때 중복 코드를 피하기 위해서 함수를 사용하여 작성한다.

같은 과정을 거쳐야 하는 영역을 여러 번 반복해서 쓰게 되면 코드의 가독성이 떨어진다.

다르게 얘기하면 같은 코드를(같은 과정을) 1번의 작성(선언)으로 필요할 때마다 재사용(호출)할 수 있다.

 

 

2. 함수의 선언과 호출 , 함수 호이스팅

 

함수의 기본 문법은?

함수의 선언 방법과 호출 방법

// 함수 선언방법 
function 함수명 (){
	//내용
}


// 함수 호출 방법
함수명()

//함수 사용 예시
function showMessage(){
    console.log("hello,world ")
}

showMessage()

** 함수명은 개발자가 원하는 이름으로 정할 수 있다.

 단, 변수의 변수명을 정하는 것처럼 예약어, 특수문자, 첫 글자 숫자 등 주의사항들이 있다.

** 작성 규칙도 여러 가지가 있지만 카멜 표기법이 보편적이므로 카멜 표기법으로 사용할 예정이다.

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

  함수명을 작성할 때 보통 "동사"로 작성한다.

-showMessage

-getName

-setName

-checkUserid 

등등... 

 

코드 작성하면서 알게 모르게 썼던 함수

prompt를 사용하면서 전달받은 값의 데이터 타입을 숫자 타입으로 바꾸기 위해 사용했던

Number() , parseInt() 도 함수이고, 콘솔에 출력하면서 제일 많이 쓰였던 console.log() 도 함수였다.

 

함수의 호이스팅

https://baekspace.tistory.com/41

JavaScript - 변수와 상수, 호이스팅

변수 var의 호이스팅을 설명한 내용이 있었는데 내용은 비슷하다. function을 선언 전에 사용할 수 있다(undefined)

함수도 호이스팅이 된다.

함수의 대체를 위한 것은 아니지만 화살표 함수(에로우함수)는 호이스팅이 되지 않는다.

 

 

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

 

function showMessage (/*매개변수1*/, /*매개변수2*/){

}

showMessage(/*인자1*/,/*인자2*/)

매개변수 - 함수 선언 시 함수 안에서 사용 변수 

인자 - 함수 호출 시 사용변수

 

괄호 안에 쉼표(,)를 이용하여 여러 개의 변수를 줄 수 있다. 인자 1의 값과 매개변수 1의 값은 같은 결과를 보여주므로 위치를 맞게 잘 써야 한다.

 

EX))

// 함수 선언, 매개변수1 : 이름, 매개변수2 : 나이 //
function print(name , age){
	console.log("hello! " + name  + "!!"+ " age : " + age)
}

// 함수 호출, 인자1: 매개변수1 - James , 인자2 : 매개변수2 - 30 //
print("James", 30)

//함수를 쓰는 이유
print("Tom", 23)
print("Tim", 27)

 

만약 인자를 바꿔 쓰게 되면, 나이가 이름에 들어가고 이름이 나이에 들어가는 문제가 발생한다.

 

 

4. return 

 

함수를 사용할 때는 함수의 코드 블럭(스코프) 안에 return 을 작성해줘야 한다.

함수 내부에서 return 을 만나면 함수를 종료시켜준다.

return 뒤에 반환 값을 적을 수 있다. (안 적으면 undefined)

return을 코드 블럭 안에 안 쓰더라도 기본값으로 return이 적용된다. 

 

//기본 문법//

function showMessage (){
	console.log("Hello!")
	return //( 반환 값 )//
    	console.log("hello!")   //return에서 함수가 종료되었기 때문에 뒷 부분은 출력이 안된다.
}

//함수를 호출 했을 떄 함수의 값을 return 뒤에 값을 써준다.
function getSum (x, y){
    return x+y
}

**함수를 호출할 때 주의사항!!!!

console.log(a)

console.log(a())

// 명백히 다르다.. 함수를 호출 하기 위해선 반드시 ()를 잊지말자.


//예시//
function getSum (){
    console.log("hello")
    return 123
}
console.log(getSum)
console.log(getSum())

왼쪽 사진에 대한 결과가 오른쪽 사진인데

 

첫 번째 줄이 (getSum)에 대한 출력 값이고, 2~3번째 줄이 (getSum())에 대한 내용이다.

 

(getSum())은 함수(블럭) 안에 hello를 먼저 출력하고, 리턴을 만나 123이라는 값을 출력 후 함수가 종료되었다.

 

 

5. 콜 스택 (Call stack)

 

자바스크립트의 엔진은 크게 두 가지로 Heap 과 Call stack 영역으로 나뉘어 있다.

자바스크립트는 싱글 스레드 언어이다. ( "Call stack이 하나다" 라는 말로 표현할 수 있다.)

 

자바스크립트 실행구조

자바스크립트를 실행시키면 모든 코드를 검사를 하고 위에서부터 출력을 한다.

출력을 과정에서 함수를 만나면 함수의 데이터 타입에 따라 Heap 과 Call stack 으로 나뉘는데,

Call stack에 처리할 코드가 남아있다면 다음 코드를 실행하지 않고  Call stack을 모두 처리한 다음, 다음 줄의 코드를 진행한다. 

멀티 테스킹이 안되기 때문에 싱글스레드(Call stack이 하나다) 언어이고,

이 과정 때문에 에러 발생 시 그 시점 이후로 코드 실행이 안 되는 것이다...

 

데이터 타입

    원시 타입

        -숫자 (number)
        -문자 (string)
        -불리언 (boolean)
        -undefined
        -null
        -symbol ( es 6 타입 - 나중에 다시 배우겠음..)
    

    객체 타입

        -배열
        -객체
        -함수
        .....

출처: https://baekspace.tistory.com/45 [BAEK'space:티스토리]

221031 - JavaScript - prompt()함수, 지역변수, 전역변수, 조건문 if-else if문, 데이터타입, 배열

 

 

콜 스택은 데이터를 받아서 실행시키는 공간이다

실제로 바로 보여주는 코드를 저장했다가 실행이 되면서 콜 스택에서 빠져나가고 콘솔에 출력이 되는 방식이다.

Call stack에서 코드가 쌓일 때 맨 밑에서부터 쌓이고, 처리할 때는 맨 위에서부터 처리를 한다. (Last-In, First-Out)

 

 

재귀 함수와  콜 스택

자바스크립트 재귀 함수 피보나치 수

재귀 함수는 하나의 함수에서 자신을 다시 호출하여 작업을 수행하는 방식으로 주어진 문제를 푸는 방법이다.

재귀 함수로 피보나치 수열을 풀 수 있는데 함수 안에 다시 함수를 처리하는 과정에서 콜 스택 구조를 이용하는데,

//피보나치 수열에서 10번 째 오는 수 찾기//

function pi (x){
    if (x < 2){
        return x
    }
    return pi(x-1) + pi(x-2)
}
console.log(pi(10))

위 과정을 처리하려면 1을 넣은 숫자까지 올라가야 한다.

(10번째 수를 구하기 위해 9번째 수를 알아야 하고 9번째 수를 알기 위해 8번째 수를 알아야 하고...... 이런 방식이 콜 스택의 방식과 비슷하다.)