함수의 실행 순서를 잘 알고 있어야 조금 더 자유롭게 활용을 할 수 있다.
함수는 선언하고 끝나는 것이 아니라 호출을 했을 때 실행이 되기 때문에 실행의 순서를 알고 있어야한다.
1번 문제
1 function sayHello(){
2 console.log('Hello');
3 console.log('Welcome to Seoul!');
4 }
5
6 console.log('함수 호출 전');
7 sayHello();
8 console.log('함수 호출 후');1번부터 3번까지는 sayHello라는 함수를 정의하는 줄로, 정의한다고 바로 실행되는 것은 아니므로 특별히 어떤 일이 일어나지는 않는다.
6번 줄에서 '함수 호출 전'이라는 문자열을 출력한다.
7번 줄에서는 sayHello함수를 호출했다. 호출하면 1번줄부터 sayHello라는 함수를 찾게되고 한줄씩 실행하게 된다. 2번줄 'Hello'를 출력하고 3번줄 'Welcome to Seoul!'을 출력한다. 모든 함수를 실행하고나면 다시 함수를 호출했던 7번줄로 돌아오게되고 함수를 호출하는 역할을 다했기 때문에 8번줄로 넘어간다.
8번 줄에서 '함수 호출 후'라는 문자열을 출력한다. 그 다음줄은 없기 때문에 프로그램이 종료된다.
결과적으로 콘솔창에는 아래와 같은 결과가 나오게 된다.
함수 호출 전
Hello
Welcome to Seoul!
함수 호출 후 2번 문제
1 function square(x){
2 return x * x;
3 };
4
5 console.log('함수 호출 전');
6 console.log(square(5));
7 console.log('함수 호출 후');1번줄부터 3번줄까지는 square라는 함수를 정의하는 줄이다.
5번줄에서는 '함수 호출 전'이라는 문자가 출력된다.
6번줄에서는 square함수가 한번 호출되고 파라미터로 숫자 5를 전달해주었다. 1번줄로 올라가서 함수 square에 파라미터 5가 전달되어서 실행된다.
function square(5){
return 5 * 5;
}; 즉 25를 리턴하게 되고 6번줄은 console.log(25);로 바뀌게 된다. 콘솔에 25를 출력하는 것으로 역할을 다한다.
7번줄은 '함수 호출 후'라는 문자열을 출력하고 프로그램은 종료된다.
결과적으로 콘솔창에는 아래와 같은 결과가 나오게 된다.
함수 호출 전
25
함수 호출 후 3번 문제
1 function square(x){
2 return x * x;
3 };
4
5 console.log('함수 호출 전');
6 console.log(square(3) + square(4));
7 console.log('함수 호출 후');1번줄부터 3번줄까지는 square라는 함수를 정의하는 줄이다.
5번줄에서는 '함수 호출 전'이라는 문자가 출력된다.
6번줄에서는 square함수가 한번 호출되고 파라미터로 숫자 3을 전달해주었다. 1번줄로 올라가서 함수 square에 파라미터 3이 전달되어서 실행된다.
function square(3){
return 3 * 3;
}; 즉 9를 리턴하게 되고 6번줄은 console.log(9 + square(4));로 바뀌게 된다. 두번째로 파라미터에 4를 전달해서 16을 리턴하게 되어서 console.log(9 + 16); 즉 console.log(25);를 출력한다.
7번줄에서는 '함수 호출 후'라는 문자를 출력하게 되고 프로그램은 종료된다.
결과적으로 콘솔창에는 아래와 같은 결과가 나오게 된다.
함수 호출 전
25
함수 호출 후 실습 과제
예시 코드
console.log('해리포터(이)가 출석했습니다.');
console.log('헤르미온느(이)가 출석했습니다.');
console.log('론(이)가 출석했습니다.');
console.log('말포이(이)가 출석했습니다.');
console.log('지니(이)가 출석했습니다.');
실행 결과
해리포터(이)가 출석했습니다.
헤르미온느(이)가 출석했습니다.
론(이)가 출석했습니다.
말포이(이)가 출석했습니다.
지니(이)가 출석했습니다.// 여기에 logParticipant 함수를 써주세요.
// 코드를 작성해 주세요.
function logParticipant(name){
console.log(`${name}(이)가 출석했습니다.`);
}
// 테스트 코드
logParticipant('해리포터');
logParticipant('헤르미온느');
logParticipant('론');
logParticipant('말포이');
logParticipant('지니');return문 이해하기
1. 어떤 값을 되돌려주는 output의 역할
1 function square(x){
2 return x * x;
3 }
4
5 console.log(square(3)); //9 2. 함수의 실행을 중단하는 역할
함수 내부에서 return키워드가 나오면 그 함수는 중단된다.
1 function square(x){
2 console.log('return 전');
3 return x * x;
4 console.log('return 후');
5 };
6
7 console.log('함수 호출 전');
8 console.log(square(3));
9 console.log('함수 호출 후');1번줄에서 5번줄까지는 특별한 동작이 없는 함수 선언과 줄바꿈이다.
7번줄부터 '함수 호출 전'이라는 문자열을 출력하게 된다.
8번줄에서 square함수를 호출하고 파라미터로 3을 전달해준다. 1번줄로 올라가서 함수가 실행이 된다. 함수 내부에서 제일 윗줄인 2번째 줄의 'return 전'이라는 문자열이 출력된다. 그 다음으로 3번줄의 계산 결과인 9가 리턴된다. 리턴문을 통해서 함수 호출 부분에 어떤 값을 되돌려주고나면 그대로 함수의 실행이 중단되기 때문에 4번줄은 실행되지 않는다. 4번줄같은 코드를 'dead code'라고 한다.
9번줄인 '함수 호출 후'라는 문자열을 출력하게 된다.
결과적으로 콘솔창에는 아래와 같은 결과가 나오게 된다.
함수 호출 전
return 전
9
함수 호출 후 return과 console.log의 차이
리턴은 함수를 실행하고 어떤 값을 돌려주는 것이고 console.log는 콘솔창에 어떤 값을 출력해주는 함수이다.
function printSquare(x){
console.log(x * x);
}
printSquare(3); printSquare라는 함수가 호출되고 파라미터 3을 전달해주고 계산 결과인 9가 출력된다.
function getSquare(x){
return x * x;
}
getSquare(3); getSquare라는 함수가 호출되고 파라미터 3을 전달해주면 계산 결과는 9가 된다. 리턴문이 실행되었으니 getSquare함수는 종료된다. 그런데 이 경우 함수 호출부분이 9로 대체되기만했지 그 다음 동작에 대해서는 작성된 코드가 없다. 결국 프로그램은 이대로 종료가 되므로 아무것도 출력이 되지 않는다.
console.log(getSquare(3)); 이렇게 콘솔로 감싸게 되면 console.log(9)가 되어서 9가 출력된다.
console.log(printSquare(3)); 이 경우는 어떻게 처리될까?
처음 printSquare(3)을 실행해서 9를 출력하고 종료가 된다. 그런데 이번에는 printSquare를 실행하고 console.log라는 함수도 실행해야 한다. printSquare라는 함수에는 리턴문이 작성되어있지 않다. 리턴문이 없는 함수를 실행하면 함수 호출 부분은 'Undefined'값을 리턴받게 된다. undefined는 처음부터 아무런 값도 할당되지 않았다는 것을 알려주는 값이었다.
함수를 선언할때 리턴문을 따로 작성하지 않으면 undefined값을 리턴한다는 점을 기억해두자.
