JavaScript 함수에서 여러 값 반환

오늘은 이전 기사(JavaScript의 단일 함수에서 여러 값을 반환하는 방법) 외에 특정 질문에 대한 답을 제공하는 간단하고 빠른 기사입니다.

⚠️ 기술 및 비즈니스에 대한 내 블로그 게시물on my personal blog을 더 읽어보세요! ⚠️

짧은 대답은 "불가능하다"입니다. 그러나 아시다시피 그것이 정말로 필요한 경우 개발자는 이를 수행할 방법을 찾습니다. 그리고 그것이 우리가 이 기사에서 설명할 것입니다.

여러 값을 다른 값으로 래핑

위에서 본 것처럼 동시에 여러 값을 반환할 수 없습니다. 그 이유는 the return statement을 사용하여 값을 반환하기 때문입니다. 이 명령문은 한 번에 하나의 값만 처리할 수 있으며 함수당 하나의 명령문return만 사용할 수 있습니다(두 번째 및 다음 명령문은 데드 코드의 일부임).

그러나 예를 들어 배열이나 개체와 같은 다른 값을 포함할 수 있는 값이 있습니다. 따라서 아래와 같이 값의 배열이나 상황에 맞게 생성된 객체를 반환하는 것이 JavaScript의 한계를 우회하는 솔루션이 될 것입니다.

function returnSeveralDataInArray() {
    const data = ['valeur 1', 2]

    return data
}

function returnSeveralDataInObj() {
    const data = { one: '1', two: 2}

    return data
}

이 두 가지 옵션을 사용하면 데이터 구조의 순서를 알거나 이름을 알면 한 번에 여러 값을 검색할 수 있습니다.

const data = returnSeveralDataInArray()
const datum1 = data[0]
const datum2 = data[1]

const data = returnSeveralDataInObj()
const datum1 = data.one
const datum2 = data.one

TypeScript의 튜플 유형

TypeScript 개발자는 정확하고 종종 시간 제한이 있는 사용을 위해 특정 값을 수집해야 하는 사례(이와 같은)를 구조화하려고 시도했습니다. 그들은 new type to the language: tuples을 추가했습니다.

사전에서는 튜플을 "여러 부분으로 구성된 데이터 구조"라고 설명합니다. 약간 모호하지만 TypeScript 문서는 다음을 추가합니다.

A tuple type is another sort of Array type that knows exactly how many elements it contains, and exactly which types it contains at specific positions.

따라서 배열이 데이터와 유사한 것처럼 한 번에 모두 반환하려는 것입니다. 이전 예제에 해당하는 TypeScript를 살펴보십시오.

function returnSeveralDataInTuple(): [string, number] {
    const data: [string, number] = ["valeur 1", 2]

    return data
}

const datum1: string = data[0]
const datum2: number = data[1]

전반적으로 이것은 우리가 JavaScript에서 사용한 것과 같은 배열일 뿐이지만 여기서 TypeScript는 해당 배열에 두 개의 값만 전달하도록 할 것입니다. 또한 문자열이 첫 번째 위치에 있고 숫자가 두 번째 위치에 있는지 확인합니다.

💡

여기서 요점은 TypeScript가 오류의 여지를 적게 남기는 더 엄격한 코드를 작성할 수 있는 수단을 제공한다는 것입니다.

또한 함수 서명은 a string 및 a number 로 구성된 튜플을 반환함을 나타냅니다. 이를 통해 함수에서 무엇을 기대해야 하는지 알 수 있고(특히 함수를 작성하지 않은 경우) 후속 코드에서 튜플의 다른 부분 유형을 계속 활용할 수 있습니다.

구조 분해로 단순화

destructuring in a previous article에 대해 이미 이야기했듯이 위의 예를 좀 더 즐겁게 만들 수 있음을 보여주기 위해 이 짧은 부분을 추가하기로 결정했습니다.

분명히 우리는 우리 코드에 약간의 "구문 설탕"을 추가할 것입니다. 작동은 변경되지 않습니다. 그것은 단지 더 "아름답고"사용하기에 친숙할 것입니다.

function returnSeveralDataInArray() {
    return ['valeur 1', 2]
}

const [datum1, datum2] = returnSeveralDataInArray()

function returnSeveralDataInObj() {
    return { one: '1', two: 2}
}

const { one, two } = returnSeveralDataInObj()

많이 변경되지는 않지만 적어도 우리는 실제로 함수에서 두 개의 값을 얻고 있으며 원래 JavaScript에 의해 계획되었다는 인상을 받았습니다.

객체를 사용하는 예에서 "datum1"및 "datum2"라는 이름을 사용하지 않았지만 별칭 덕분에 그렇게 할 수 있다는 것을 알고 있습니다. 자세한 내용은 the article on destructuring을 참조하십시오.