자바스크립트 여러개의 값 반환하기

참고자료

https://bamtory29.tistory.com/entry/Javascript-%ED%95%A8%EC%88%98%EC%97%90%EC%84%9C-%EC%97%AC%EB%9F%AC-%EA%B0%92-%EB%B0%98%ED%99%98%ED%95%98%EA%B8%B0

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

이 글은 위 블로그 자료을 타이핑하며 공부한 글입니다. 자세한 내용은 위 자료를 참고해주세요.

 

1. 여러 값 반환하기

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

 

2. 분할 대입

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

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

 

배열의 분할 대입

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

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

 

객체의 분할 대입

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

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