[F-Lab 모각코 챌린지 54일차] return 반환

Nami·2023년 7월 24일

JavaScript f-lab return undefined 모각코 반환

66일 포스팅 챌린지

목록 보기

54/66

기본적인 건데도 헷갈려하는 나를 위해,, 제대로 공부할 시간이 필요함을 느꼈다.

`return`

return 문은 함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.

함수 실행 종료
주어진 값을 함수 호출 지점으로 반환

   return [[expression]];

expression : 반환할 값으로 사용할 표현식. 생략할 경우 undefined를 대신 반환한다.

return문을 사용하여 특정 값을 반환하면, 함수 호출시 해당 값을 얻을 수 있다. 함수가 return문을 만나면 그 즉시 실행을 멈추고 해당 값을 반환하게 된다.

값 반환하기

가장 일반적인 용도는 함수가 어떤 값을 계산하고, 그 값을 함수 외부로 반환하는 경우이다.

// 두 수를 더하는 함수 add를 정의
function add(a, b) {
	return a + b;
}
// 함수 add 호출
const result = add(3, 5);
console.log(result); // 8

조건에 따른 값 반환하기

함수 내부의 조건에 따라 다른 값을 반환하게 할 수 있다.

// 2로 나눈 나머지가  0일 경우(짝수) true, 0이 아닐 경우(홀수) false 반환하게 하기.
function isEven(number) {
	if (number % 2 === 0) { 
    	return true;
    } else {
    	return false;
    }
}

console.log(isEven(4)); // true
console.log(isEven(7)); // false

여러 개의 값 반환하기

Javascript에서는 하나의 값만 반환하는 게 아니라, 배열이나 객체 등을 사용하여 여러 개의 값을 반환할 수도 있다.

function getCircleInfo(radius) {
	const circumference = 2 * Math.PI * radius;
  	const area = Math.PI * radius ** 2;
  	return [circumference, area];
}

const circleInfo = getCircleInfo(5);
console.log(circleInfo);  // [31.41592653589793, 78.53981633974483]
// 원의 둘레와 넓이를 배열로 반환한다.

Math.PI
Math.PI는 JavaScript의 내장 객체인 Math 객체의 프로퍼티로, 원주율 (π, Pi) 값을 가지고 있다. 원의 둘레와 관련된 수학적 연산에 사용되는 정확한 값이다.

함수 실행 종료하기

함수의 실행을 종료하는 역할도 한다. return문이 실행되면 그 즉시 함수 실행을 멈추고 함수 외부로 반환된다.

function greet(name) {
	if(!name) {
    	return; // name이 없는 경우 함수 실행을 종료하고 반환하지 않음.
    }
  return `Hello, ${name}!`;
}

console.log(greet('Nami')); // "Hello, Nami!"
console.log(greet()) //undefined (name이 없어서 반환되지 않음)

콜백 함수에서의 활용

일반 함수에서의 return과 다른 점
일반 함수

일반 함수는 호출될 때 실행되고, return 문이 실행되면 함수가 즉시 종료되며 해당 값을 반환한다.
주로 특정 작업을 수행하고 그 결과 값을 반환하는 데 사용
return 문으로 반환된 값은 해당 함수를 호출한 코드에서 받아서 변수에 저장하거나 다른 연산에 활용

콜백 함수

콜백 함수는 다른 함수에 전달되어 특정 시점이나 조건에 따라 실행된다.
호출하는 쪽에서 직접 호출하지 않으며, 전달된 함수를 호출하는 함수 내부에서 실행된다.
비동기 작업이나 이벤트 처리, 조건에 따른 다양한 동작을 처리하는 데 사용
다른 함수 내에서 실행되어, 비동기적인 작업이 완료되거나 특정 이벤트가 발생할 때 실행되어야 하는 로직을 지정하는 데 유용함.

쉽게 말해서, 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는 것이 아니라 함수를 가리키고 있는 함수의 레퍼런스(참조값)가 전달된다.
그래서 함수는 고차함수 안에서 필요한 순간에 호출이 나중에 됨.

// 일반 함수
function add(a, b) {
  return a + b;
}

const result = add(3, 5); // 일반 함수의 반환값인 8이 변수 result에 할당된다.

// 콜백 함수
function doSomethingAsync(callback) {
  setTimeout(() => {
    console.log('비동기 작업 완료');
    const data = '비동기 작업 결과 데이터';
    callback(data); // 비동기 작업 완료 후 콜백 함수를 호출하고, 결과 데이터를 전달한다.
  }, 1000);
}

function processResult(result) {
  console.log('처리된 결과:', result);
}

doSomethingAsync(processResult);

`undefined`

함수가 명시적으로 어떠한 값을 반환하지 않을 때, JavaScript에서 자동으로 기본적인 undefined 값을 반환하는 것을 말한다.

일반적으로 함수에서 return 문이 없거나 return 문만 사용되고 반환값이 명시되지 않은 경우, 해당 함수는 undefined를 반환한다. 이런 동작은 JavaScript의 기본 규칙으로 적용되는데, 함수의 실행이 끝나더라도 반환값이 없으면 자동으로 undefined가 반환된다.

function doSomething() {
	// 반환문이 없으므로, undefined를 반환한다.
}
function add(a, b) {
	const result = a + b;
  	// 반환문이 없으므로, undefined를 반환한다.
}
function greet(name) {
  return `Hello, ${name}!`;
  // return 문이 있으며, 명시적으로 값을 반환한다.
}
const result1 = doSomething(); // doSomething 함수는 undefined를 반환한다.
console.log(result1); // undefined

const result2 = add(3, 5); // add 함수는 undefined를 반환한다.
console.log(result2); // undefined

const greetingMessage = greet('Nami'); // greet 함수는 'Hello, Nami!'를 반환한다.
console.log(greetingMessage); // 'Hello, Nami!'

`console.log()`

JavaScript에서 주로 디버깅이나 개발 과정에서 정보를 콘솔(Console)에 출력하는 함수.
반환값은 undefined.
즉, console.log는 출력을 위한 동작만 하고, 값을 반환하지 않는다. 따라서 console.log를 함수의 반환값으로 사용하면 항상 undefined가 반환된다.
console.log()를 사용하여 콘솔에 메시지를 출력할 때는 반환값을 사용하는 것이 아니라, 단순히 메시지를 확인하는 용도로 사용하는 것이 일반적이다.