함수의 실행 순서
자바스크립트에서는 코드를 위에서 아래로 한 줄씩 차례대로 실행한다. 하지만 함수가 호출되면 실행 흐름이 잠시 멈추고, 함수 내부의 코드가 먼저 실행된다. 그런 다음 다시 원래 위치로 돌아와 남은 코드를 계속 실행하게 된다.
함수 정의와 실행 순서
다음 코드를 통해 함수 호출과 실행 순서를 살펴보자:
function sayHello() {
console.log("Hello");
console.log("Welcome to JavaScript!");
}
console.log("Before function call"); // 1
sayHello(); // 2: 함수 호출
console.log("After function call"); // 3
이 코드가 실행되면 다음과 같은 흐름으로 진행된다:
- 1번 줄에서
"Before function call"이 출력된다. - 2번 줄에서
sayHello()함수가 호출된다. 그러면 함수 내부의 코드가 실행된다:"Hello"가 출력된다."Welcome to JavaScript!"가 출력된다.
- 함수가 끝난 후 3번 줄로 돌아와
"After function call"이 출력된다.
결과적으로 출력 순서는 다음과 같다:
Before function call
Hello
Welcome to JavaScript!
After function call
이때 중요한 점은 함수가 호출되면 코드의 실행 흐름이 함수 내부로 이동했다가, 함수 실행이 끝나면 다시 호출된 위치로 돌아와 남은 코드가 실행된다는 것이다.
파라미터와 리턴값이 있는 함수
함수는 파라미터를 통해 값을 전달받고, 그 값을 연산하여 리턴할 수 있다. 이번에는 함수에 파라미터를 전달하고, 함수가 리턴값을 돌려주는 과정을 살펴보자.
function square(x) {
return x * x; // 리턴문: x의 제곱 값을 돌려줌
}
console.log("Before square function call"); // 1
console.log(square(5)); // 2: 25 출력
console.log("After square function call"); // 3
이 코드는 다음과 같은 흐름으로 실행된다:
- 1번 줄에서
"Before square function call"이 출력된다. - 2번 줄에서
square(5)가 호출된다. 이때, 파라미터로 5가 전달되어 함수 내부에서5 * 5가 계산된다. - 리턴문을 통해 계산 결과인 25가 함수 호출 부분으로 돌려진다.
console.log(square(5))는 25를 출력하고, 함수는 끝난다.- 다시 원래 위치로 돌아와 3번 줄에서
"After square function call"이 출력된다.
결과적으로 출력 순서는:
Before square function call
25
After square function call
리턴값을 이용한 함수 호출
함수는 여러 번 호출될 수 있으며, 리턴된 값은 다른 연산에 사용될 수 있다. 이제 함수가 호출되고, 리턴값이 또 다른 계산에 사용되는 경우를 살펴보자.
function square(x) {
return x * x;
}
console.log(square(3) + square(4)); // 9 + 16 = 25 출력
이 코드의 실행 순서는 다음과 같다:
- 먼저
square(3)이 호출되고, 9가 리턴된다. - 그다음
square(4)가 호출되고, 16이 리턴된다. - 마지막으로
9 + 16이 계산되어 25가 출력된다.
함수의 실행 순서 요약
- 함수 호출과 실행 순서: 함수가 호출되면 함수 내부의 코드가 먼저 실행되고, 함수가 끝난 후 다시 호출된 위치로 돌아가 남은 코드가 실행된다.
return문 제대로 이해하기
자바스크립트에서 리턴문(return)은 함수의 실행 결과를 호출한 곳으로 되돌려주는 역할을 한다. 리턴은 단순히 값을 반환하는 것 외에도 함수의 실행을 중단시키는 중요한 역할을 한다. 이번에는 리턴문의 두 가지 역할과 이를 활용한 예제를 살펴보자.
리턴값을 돌려주는 역할
리턴문은 함수에서 계산된 결과값을 돌려주는 역할을 한다. 예를 들어, 숫자를 제곱하는 함수에서 리턴문을 사용하여 연산 결과를 반환할 수 있다.
예시: 리턴문을 사용한 함수
function square(x) {
return x * x;
}
console.log(square(3)); // 9 출력
위 코드를 보면, square(3)이 호출되면서 3이 파라미터로 전달되고, 함수는 3의 제곱인 9를 리턴한다. 따라서 console.log(square(3))은 9를 출력하게 된다.
리턴문을 통한 함수 실행 중단
리턴문은 값을 돌려주는 역할 외에도, 함수의 실행을 중단하는 기능을 한다. 리턴문을 만나면 그 아래에 작성된 코드는 절대로 실행되지 않는다.
예시: 리턴문 이후의 코드가 실행되지 않음
function example() {
console.log("리턴문 이전 출력");
return 42;
console.log("이 코드는 실행되지 않습니다"); // 이 코드는 실행되지 않음
}
console.log(example()); // "리턴문 이전 출력" 후 42 리턴
이 코드에서 "리턴문 이전 출력"은 정상적으로 출력되지만, 리턴문 뒤의 "이 코드는 실행되지 않습니다"는 실행되지 않는다. 리턴문은 값을 돌려주는 동시에 함수가 즉시 종료되기 때문이다.
리턴문과 데드 코드(Dead Code)
리턴문 뒤에 작성된 코드는 절대로 실행되지 않기 때문에 의미가 없다. 이런 코드를 데드 코드(Dead Code)라고 부른다. 함수 내에서 리턴문 이후의 코드는 더 이상 실행될 가능성이 없으므로, 작성하지 않는 것이 좋다.
예시: 데드 코드
function deadCodeExample() {
console.log("이 코드는 실행됩니다");
return;
console.log("이 코드는 절대 실행되지 않습니다"); // 데드 코드
}
deadCodeExample(); // "이 코드는 실행됩니다"만 출력
위 코드에서 "이 코드는 실행됩니다"는 출력되지만, 리턴문 뒤의 코드는 실행되지 않는다. 이런 코드는 데드 코드가 되어 불필요한 코드로 남게 된다.
리턴문의 실행 순서
함수의 실행 순서와 리턴문이 함수 실행을 중단하는 과정을 좀 더 자세히 살펴보자.
예시: 리턴문을 통한 함수 흐름 중단
function squareWithLogs(x) {
console.log("리턴문 이전 출력");
return x * x; // 리턴으로 값이 반환되고 함수가 종료됨
console.log("리턴문 이후 출력"); // 이 코드는 실행되지 않음
}
console.log(squareWithLogs(3)); // "리턴문 이전 출력" 후 9 리턴
이 코드를 실행하면 다음과 같은 순서로 동작한다:
- *"리턴문 이전 출력"**이 출력된다.
- 그다음
x * x*가 계산되어 9**가 리턴된다. - 리턴문을 만나면 함수가 즉시 종료되므로, "리턴문 이후 출력"은 출력되지 않는다.
return문 제대로 이해하기 요약
- 리턴문의 첫 번째 역할: 값을 함수 호출 부분으로 돌려준다.
- 리턴문의 두 번째 역할: 함수를 즉시 종료하고, 리턴문 이후의 코드는 실행되지 않는다.
- 데드 코드(Dead Code): 리턴문 뒤에 있는 코드는 실행되지 않기 때문에 의미가 없으며, 이를 데드 코드라고 부른다.
리턴문은 단순한 값 반환 외에도 함수의 흐름을 제어하는 중요한 역할을 한다. 함수를 작성할 때 리턴문의 두 가지 역할을 명확히 이해하고, 리턴문 이후에 불필요한 코드를 작성하지 않도록 주의해야한다.
return과 console.log()의 차이
처음 자바스크립트를 공부할 때, 많은 사람들이 리턴문(return)과
console.log()를 헷갈리는 경우가 많다. 둘 다 함수에서 중요한 역할을 하지만, 그 역할이 서로 다르다. 이번에는 리턴문과console.log()가 각각 어떤 역할을 하는지, 그리고 둘의 차이를 예제와 함께 알아보자.
리턴과 console.log()의 역할
- 리턴문: 함수의 실행 결과를 돌려주는 역할을 한다. 리턴된 값은 함수 호출 부분에서 사용할 수 있다.
console.log(): 특정 값을 콘솔에 출력하는 역할을 한다. 값을 단순히 보여주는 용도로 사용된다.
이 차이를 구체적인 예제와 함께 살펴보자.
console.log()로 출력하는 함수
먼저, console.log()를 이용해 결과를 출력하는 함수 printSquare를 정의해보자. 이 함수는 입력받은 값을 제곱한 결과를 출력하는 역할을 한다.
function printSquare(x) {
console.log(x * x); // 제곱한 값을 출력함
}
printSquare(3); // 9 출력
이 함수는 리턴값이 없고, 단순히 콘솔에 결과를 출력하기만 한다. printSquare(3)을 호출하면 콘솔에 3의 제곱인 9가 출력된다. 하지만 함수 자체는 값을 돌려주지 않는다.
리턴값을 돌려주는 함수
이번에는, 리턴문을 사용해 계산 결과를 함수 호출한 곳으로 돌려주는 함수를 정의해보자. 이 함수는 결과를 출력하지 않고, 계산된 값을 리턴한다.
function getSquare(x) {
return x * x; // 제곱한 값을 리턴함
}
console.log(getSquare(3)); // 9 출력
getSquare(3) 함수는 3의 제곱인 9를 리턴한다. console.log()를 사용해 리턴된 값을 출력하면, 9가 출력된다.
이 함수는 값을 돌려줄 뿐, 그 값을 바로 출력하지는 않는다. 따라서 출력하고 싶다면 반드시 console.log()나 다른 출력 방법을 사용해야 한다.
리턴 없는 함수는 undefined를 리턴
함수에 리턴문이 없을 경우, 자바스크립트는 자동으로 undefined를 리턴한다. 이를 잘못 이해하면 의도하지 않은 결과를 얻을 수 있다.
예시: 리턴문이 없는 함수 호출
function printSquare(x) {
console.log(x * x); // 제곱한 값을 출력
}
console.log(printSquare(3)); // 9 출력 후 undefined 출력
위 코드에서 printSquare(3)는 9를 출력하지만, 함수 자체는 리턴값이 없기 때문에 undefined를 리턴한다. 그래서 console.log(printSquare(3))를 실행하면 9와 undefined가 함께 출력된다.
- 9는 함수 내부에서 출력된 값이고,
undefined는 함수가 값을 리턴하지 않았기 때문에 자동으로 반환된 값이다.
리턴된 값으로 다른 연산 수행
리턴된 값은 다른 연산에 사용할 수 있다. 예를 들어, 리턴된 값을 바로 출력하거나 다른 계산에 사용할 수 있다.
console.log(getSquare(3) + getSquare(4)); // 9 + 16 = 25 출력
이 코드에서는 getSquare(3)가 9를 리턴하고, getSquare(4)가 16을 리턴하여, 두 값을 더한 25가 출력된다.
console.log()로 감싸지 않으면 아무것도 출력되지 않음
리턴문이 있는 함수는 값을 돌려줄 뿐, 출력하지는 않는다. 출력하려면 console.log()로 감싸야 한다.
예시: 출력되지 않는 리턴값
function getSquare(x) {
return x * x;
}
getSquare(3); // 출력 없음
이 코드는 출력되지 않는다. 리턴값은 있지만, 그 값을 출력하려면 별도의 console.log()를 사용해야 한다.
return과 console.log()의 차이 요약
- 리턴문: 함수를 실행한 후 값을 돌려주는 역할을 한다. 하지만 리턴된 값은 별도로 출력되지 않으며, 그 값을 출력하려면
console.log()같은 함수로 감싸야 한다.console.log(): 값을 출력하는 함수로, 계산된 값을 콘솔에 보여주는 용도로 사용된다.- 리턴문이 없는 함수는 자동으로 *
undefined를 리턴하며, 이를 주의해야 한다.
리턴과 console.log()의 차이를 명확히 구분하면, 함수를 작성할 때 더 의도에 맞는 코드를 작성할 수 있다.
