📘 자바스크립트 입문: console.log()와 return의 진짜 차이
자바스크립트를 처음 배우는 입장에서 가장 헷갈리는 것 중 하나는 console.log()와 return의 차이다. 겉보기에는 둘 다 어떤 값을 보여주는 것 같지만, 실제로는 전혀 다른 역할을 한다. 이 글에서는 간단한 계산기 예제를 통해 두 개념을 확실히 구분하고, 실전에서 어떻게 사용해야 하는지 알아보겠다.
📌 예제 1: console.log()로 결과 출력하기
const calculator = {
plus: function (a, b) {
console.log(a + b);
},
minus: function (a, b) {
console.log(a - b);
},
times: function (a, b) {
console.log(a * b);
},
divide: function (a, b) {
console.log(a / b);
},
power: function (a, b) {
console.log(a ** b);
},
};
calculator.plus(2, 3);
calculator.times(2, 3);
calculator.minus (2, 3);
calculator.divide(2, 3);
calculator.power(2, 3);
💡 출력 결과:
5
6
-1
0.6666666666666666
8
이 코드는 실행하면 콘솔에 결과값이 잘 출력됩니다. 하지만 중요한 한 가지가 있습니다.
console.log()는 그저 "화면에 보여주기만" 합니다.
즉, 출력된 값을 나중에 사용할 수 없습니다.
이 예제는 console.log()를 사용해 함수 내부에서 바로 결과를 출력한다. 하지만 이 방식은 결과를 활용하기 어려운 단점이 있다. 예를 들어, 사용자가 직접 계산 결과를 다른 곳에 저장하거나 조작하고 싶다면 이 구조는 불편하다.
📌 console.log() 대신 return을 사용하는 이유
개발을 하다 보면 단순히 값을 콘솔에 출력하는 것이 아니라, 그 값을 다시 사용하고 싶을 때가 많습니다. 예를 들어 사용자가 입력한 데이터를 배열에 저장하거나, 계산 결과를 다른 함수에서 활용하고 싶을 때입니다. 이때 사용하는 것이 바로 return입니다.
📌 예제 2: return을 활용한 계산기
const calculator = {
plus: function (a, b) {
return a + b;
},
minus: function (a, b) {
return a - b;
},
times: function (a, b) {
return a * b;
},
divide: function (a, b) {
return a / b;
},
power: function (a, b) {
return a ** b;
},
};
const plusResult = calculator.plus(2, 3);
console.log(plusResult); // 결과: 5
함수에서 return을 사용하면 결과값을 변수에 저장해 나중에 활용할 수 있습니다. console.log()는 단순히 화면에 출력만 하고 값을 반환하지 않지만, return은 값을 반환해 함수 외부에서 활용할 수 있게 합니다. 즉 여기서 calculator.plus(2, 3)는 실제 숫자 5로 바뀌고, 이 값을 plusResult라는 변수에 저장한다. 이렇게 하면 나중에 이 결과를 다른 계산에도 활용할 수 있다.
🧠 return을 활용한 계산 흐름
const plusResult = calculator.plus(2, 3); // 5
const minusResult = calculator.minus(plusResult, 10); // -5
const timesResult = calculator.times(10, minusResult); // -50
const divideResult = calculator.divide(timesResult, plusResult); // -10
const powerResult = calculator.power(divideResult, minusResult); // 큰 수
이처럼 함수들의 결과를 변수로 받아서 연속적으로 계산하는 방식은 함수 간의 상호 의존성을 나타내며, 매우 유용한 개발 방식이다. 결과값을 연결해서 계속 계산할 수 있는 것은 함수가 값을 반환(return)하기 때문이다.
🎯 실전 예제: 한국 나이 계산기 만들기
const age = 96;
function calculatorKrAge(ageOfForeigner) {
return ageOfForeigner + 2;
}
const krAge = calculatorKrAge(age);
console.log(krAge); // 출력: 98
위 코드에서 calculatorKrAge(age)는 98을 반환하고, 우리는 그 결과를 krAge 변수에 저장해 사용할 수 있다. 이처럼 함수가 return을 통해 외부에 값을 전달하는 구조는 자바스크립트 개발에서 매우 중요하다.
🔍 결론: 언제 console.log()를 쓰고 언제 return을 써야 할까?
| 기능 | 화면에 출력만 함 | 값을 함수 외부로 전달 |
| 목적 | 디버깅/확인용 | 데이터 처리 및 재사용 |
| 결과 저장 | 불가능 | 가능 |
| 후속 작업 활용 | 불가능 | 가능 |
자바스크립트에서 함수는 단순히 어떤 동작을 수행하는 것 이상의 의미를 가진다. return은 함수 외부와 정보를 교환하는 핵심 수단이며, 특히 다양한 작업을 연결하거나 데이터를 처리할 때 반드시 필요한 개념이다.
📝 마무리하며
이 글에서는 console.log()와 return의 차이를 이해하고, 실전 예제에 어떻게 활용되는지를 살펴보았다. console.log()와 return을 혼동하지 말고 목적에 따라 적절히 사용해야 한다. 화면에 단순히 출력하고 싶다면 console.log()를, 데이터를 받아서 저장하고 활용하고 싶다면 return을 사용하는 것을 기억해라.
