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

함수에서  반환값이 하나만 나온다고 했었는데 사용하다보면 여러 값을 반환하고 싶은 경우가 생깁니다.

---

1. 여러 값 반환하기

return명령은 함수에서 값을 반환하지만 복수의 값을 반환할 수는 없습니다. 그렇다면 복수의 값들을 반환하기 위해서는 어떻게 할까요. 바로 배열과 객체를 이용하는 것 입니다. 말로 간단하게 설명하자면 여러값들을 배열 혹은 객체로 묶어서 하나의 값으로 만든다음에 반환시키는 방법입니다.

 

 

2. 분할 대입

우선 여러값을 반환 하기 위해서는 분할 대입에 대해 알고 넘어가야합니다.

분할 대입은 배열, 객체를 분해하여 내부의 요소(프로퍼티)들을 개별적인 변수로 분해하는 구문입니다.

 

2-1. 배열의 분할 대입

배열에서 일반적으로 값을 추출하기 위해 다음과 같이 이용했었습니다.

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

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

 

이와 같은 반복작업을 다음과 같은 분할 대입법으로 간결하게 축소할 수 있습니다.

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 arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];
let [num1, num2, num3, ...other] = arr;

console.log(num1);
console.log(num2);
console.log(num3);
console.log(other);

 

2-2. 객체의 분할 대입

객체도 마찬가지로 분할 대입을 이용할 수 있습니다.

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

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

결과를 보면 볼 수 있듯이 배열과 다르게 객체는 프로퍼티의 이름으로 분해를 합니다. 그래서 순서가 뒤죽박죽 이어도 일치하는 프로퍼티 명이 있다면 분할 대입이 되고 존재 하지 않는 프로퍼티는 무시됩니다. 또한 분할 대입시 존재하지 않아도 디폴트값 선언으로 프로퍼티를 지정 할 수가 있습니다.

 

 

 

3. 분할 대입을 이용하여 복수의 값 반환하기

위에서 배운 분할 대입을 이용하면 다음과같이 함수에서 분할 대입을 이용해서 복수의 값을 반환받을 수 있습니다.

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);

이처럼 분할 대입으로 반환 값을 배열의 형태로 혹은 개별 값의 형태로 가져올 수 있습니다.

---