로그인 바로가기 하위 메뉴 바로가기 본문 바로가기
난이도
심화

웹 프로그래밍(풀스택)

임시 이미지 [코스설계] Front-End 윤지수
http://www.boostcourse.org/web316/notice/2504
좋아요 4729 수강생 47512
아래의 글은 BOOSTER 서포터즈로 활동하고 mansesjh***이
작성한 부스트코스 후기입니다.
여러분들의 성원에 더 노력하는 부스트코스가 되겠습니다.
감사합니다.
******************************************
2)작성 날짜: 20/02/21

(본문 내용)

특정 함수 안에서 다른 함수가 호출되는 예제

function printName(firstname) { var myname = "jisu"; return `${myname} , ${firstname}`; } function run(_firstname) { firstname = _firstname || "Youn"; var result = printName(firstname); //printName함수를 호출하고 firstname의 값을 전달한다. console.log(result); } run('jihye'); run();

본 예제는 부스트코스 웹프로그래밍에 쓰이는 예제이다. 예제의 자바스크립트 문법은 ecmascript2015의 템플릿 리터럴 문법을 이용해 조금 수정하고 변수 이름을 약간 수정하였다.

예제를 살펴보면 printName 함수와 run 함수를 정의했다는 것을 알 수 있다. 그리고 run 함수를 호출시키는데 'jihye’라는 문자열을 넣어주는 경우와 안 넣어주는 경우 2번 호출 시켰다.

결과는 다음과 같다.

- 자바스크립트에서 함수는 호출 될 때 (정의될 때x) 호출 스택(callstack) 에 쌓이게 된다.

- 스택은 먼저 들어온 데이터가 가장 나중에 나가는, 즉 들어온 순서와 나가는 순서가 반대인 자료구조이다.

- 즉, 함수가 호출 될 때 메모리 공간에 스택의 구조로 쌓인다는 의미이다.

- 호출 스택에 쌓인다 == 메모리 공간의 일부를 차지한다

- 호출 스택에서 빠져나간다 == 할당된 메모리 공간에서 사라진다.


함수 설명

1. run 함수

● run 함수는 _firstname으로 함수를 호출시킬 때 넣어준 인자값을 받을 수 있다.

● 인자값이 있다면, 즉 _firstname이 참이면 _firstname의 값이 변수 firstname으로 들어가게 되고 들어오는 인자값이 없다면 _firstname은 undefined가 되고 자바스크립트에서 undefined은 거짓이므로 'Youn’이라는 값이 들어가게 된다.

firstname = _firstname || "Youn";

● printName함수를 호출하고 firstname의 값을 전달한다. 이후 printName 함수의 반환값을 변수 result에 넣는다.

var result = printName(firstname);

● result의 값을 출력한다.

console.log(result);

2. printName 함수

● printName 함수는 파라미터로 전달 받은 값을 myname이라는 변수와 함께 출력하는 함수이다.

● printName 함수는 run함수가 끝나지 않았지만 중간에 호츨되므로 호출 스택에 쌓이게 된다. (push)

● printName 함수는 'myname의 값, firstname의 값’을 반환하고 끝나게 된다.

● 함수의 실행이 끝나므로 printName 함수가 호출 스택에서 나가게 된다. (pop)


실행순서 설명

설명 기준 : run('jihye`)

1. run함수 호출

2. run함수가 호출 스택에 쌓인다. (push)

3. run함수의 인자에 'jihye’라는 유효한 값이 들어가므로 firstname은 'jihye’가 된다.

4. printName함수에 firstname을 전달하면서 호출된다. (push)

5. printName함수가 호출 스택에 쌓인다.

run함수는 실행이 완료되지 않았지만 중간에 printName함수가 호출되었으므로 호출 스택에는 run함수 위로 printName함수가 쌓이게 된다.

6. printName함수는 'myname값 , firstname’값을 반환하면서 함수가 종료되어 호출 스택에서 빠져나간다. (pop)

7. 호출 스택에는 run함수만 남은 상황이고, 자바스크립트 엔진은 printName함수가 호출된 지점 이후부터 다시 실행한다.

8. result변수에 printName함수의 반환값이 들어가게 된다.

9. console.log함수에 result의 값이 전돨되면서 호출된다. (push)

run함수는 실행이 완료되지 않았지만 중간에 console.log함수가 호출되었으므로 호출 스택에는 run함수 위로 console.log함수가 쌓이게 된다.

10. console.log함수는 호출되었으므로 실행되면서 result값을 출력한다.

11. console.log함수가 완료되어 호출 스택에서 빠져나간다. (pop)

12. 다시 호출 스택에는 run함수만 남은 상황이고, 자바스크립트 엔진은 console.log함수가 호출된 지점 이후부터 다시 실행하는데 코드 상 run함수가 끝나므로 run함수도 호출 스택에서 빠져나간다. (pop)


함수 호출시 주의 사항

● 함수를 연속적으로 계속 호출하면 call stack이 꽉 차버리면서 더 실행되지 못하고 오류가 발생한다.

● 브라우저에서는 대부분 지정된 횟수만큼만 call stack을 쌓게 미리 설정해둔 경우가 많다고 하므로 개발자는 이에 유의해서 로직을 작성해야 한다.


edwith의 부스트코스의 웹프로그래밍 강의를 수강하고 공부한 것을 적었습니다.

 


 ******************************************