[Javascript] 함수에서 여러 값 반환

Bam·2022년 2월 25일
0

Javascript

목록 보기
37/106
post-thumbnail

함수에서 여러 값 반환하기

일반적으로 생각하는 반환값은 어떤식의 결과나, 변수의 데이터 등 하나의 값만 반환합니다. 그렇다면 함수에서 여러개의 값을 반환하고 싶을 때는 어떤 방식을 이용할 수 있을까요?

분할 대입

먼저 방식을 알아보기 전에 분할 대입에 대해서 알고 가야합니다. 분할 대입은 배열, 객체 등의 열거 가능한 객체들을 분해하여 내부의 요소들을 개별적인 변수들로 분해하는 구문입니다. 말로만하니 조금 어려운가요? 배열과 객체를 가지고 실제 예시를 보겠습니다.

배열의 분할 대입

배열에서 우리는 값을 추출하기위에 일반적으로 다음과 같이 인덱스를 통해 접근했습니다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

let num1 = arr[0];
let num2 = arr[1];
//~~~~~~~~~~~~~~~ 요소의 갯수만큼 일일히
let num9 = arr[8];

위와같이 요소가 9개라면 9개를 일일히 써주어야했죠. 하지만 분할 대입을 사용하면 위 작업을 다음과 같이 간결하게 표현할 수 있습니다.

let arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [num1, num2, num3, num4, num5, num6, num7, num8, num9] = arr;
// num1 = 1, num = 2... 이렇게 저장됩니다!

객체의 분할 대입

배열은 인덱스 순서대로 분할하여 대입했다면, 객체는 프로퍼티명으로 분할 대입을 합니다. 그래서 분할 대입 과정에서 객체 프로퍼티 순서와 일치하지 않아도 자동적으로 찾아서 매치해주고, 존재하지 않는 프로퍼티는 무시됩니다. 또한 존재하지 않는 값에 대해 기본 값을 적용할 수도 있습니다.

let obj = { name:'plane', color:'gray', state:'flying' };
let {state, name, total = 3} = obj;

console.log(state);
console.log(name);
console.log(total);


분할 대입으로 여러 값 반환하기

함수에서 여러 값을 반환하는 방식은 다음과 같습니다. 함수에서 반환값으로 배열 혹은 객체를 이용합니다. 그리고 함수를 호출하고 반환받을 때 분할 대입을 사용해서 각기의 값으로 나누고 필요한 곳에 필요한 값을 이용하기만 하면 됩니다.

function getAddAndComplex(num1, num2){
    let add = num1 + num2;
    let complex = num1 * num2;

    return [add, complex];	//배열의 형태로 반환
}

let resultByArr = getAddAndComplex(2, 3);  //분할 대입 미사용
console.log(resultByArr);

let [resultAdd, resultComplex] = getAddAndComplex(2, 3);	//분할 대입을 이용
console.log(resultAdd);
console.log(resultComplex);

0개의 댓글