14 Fungsi Tipe 'Return'

1. Apa itu return pada function?

Kita mulai dari function sederhana:

function add(num1: number, num2: number) {
    return num1 + num2;
}

Function tersebut menerima dua parameter:

num1: number
num2: number

Kemudian:

return num1 + num2;

berarti function mengembalikan hasil penjumlahan.

Misalnya:

const result = add(12, 13);

Maka:

12 + 13 = 25

Sehingga:

result

berisi:

25

dan tipe result adalah:

number

2. TypeScript bisa mengetahui return type secara otomatis

Perhatikan:

function add(num1: number, num2: number) {
    return num1 + num2;
}

Kita tidak menulis return type.

Tetapi TypeScript tetap bisa mengetahuinya.

Kenapa?

Karena TypeScript melihat:

num1 + num2

Kedua nilai tersebut adalah number.

Maka hasilnya juga:

number

Sehingga TypeScript menyimpulkan:

function add(num1: number, num2: number): number

Jadi sebenarnya TypeScript melakukan type inference.

3. Apa itu Type Inference?

Type inference adalah kemampuan TypeScript untuk menebak/menyimpulkan tipe berdasarkan kode yang kita tulis.

Misalnya:

let age = 20;

TypeScript tahu:

age → number

Kita tidak perlu menulis:

let age: number = 20;

Begitu juga dengan function:

function add(num1: number, num2: number) {
    return num1 + num2;
}

TypeScript melihat nilai yang dikembalikan:

return num1 + num2;

dan menyimpulkan:

return type → number

4. Kalau hasil yang dikembalikan berupa string?

Misalnya kita ubah:

function add(num1: number, num2: number) {
    return (num1 + num2).toString();
}

Sekarang hasil:

num1 + num2

awalnya number.

Tetapi kita menggunakan:

.toString()

sehingga hasil akhirnya menjadi:

string

Misalnya:

add(12, 13);

menghasilkan:

"25"

Perhatikan perbedaannya:

25

adalah number.

Sedangkan:

"25"

adalah string.

TypeScript akan menyimpulkan return type function tersebut sebagai:

string

5. Kita juga bisa menentukan Return Type secara manual

Walaupun TypeScript bisa melakukan inference, kita juga bisa menentukan return type secara eksplisit.

Caranya:

function add(num1: number, num2: number): number {
    return num1 + num2;
}

Perhatikan bagian:

): number

Ini adalah return type.

Struktur function-nya:

function namaFunction(parameter): returnType

Contoh:

function add(num1: number, num2: number): number {
    return num1 + num2;
}

Artinya:

Function add menerima dua parameter bertipe number dan harus mengembalikan nilai bertipe number.

6. Bedakan parameter type dan return type

Ini penting.

Perhatikan:

function add(num1: number, num2: number): number {
    return num1 + num2;
}

Ada tiga bagian tipe:

num1: number
      ↑
parameter type

num2: number
      ↑
parameter type

dan:

): number
   ↑
return type

Jadi:

              parameter
                  ↓
function add(num1: number, num2: number): number
                                             ↑
                                        return type

Parameter type menjelaskan:

“Function menerima data seperti apa?”

Return type menjelaskan:

“Function mengembalikan data seperti apa?”

7. Contoh return type number

function multiply(a: number, b: number): number {
    return a * b;
}

Function ini:

• menerima number
• mengembalikan number

Contoh:

const result = multiply(5, 4);

Hasil:

20

Tipe:

number

8. Contoh return type string

function getFullName(
    firstName: string,
    lastName: string
): string {
    return firstName + " " + lastName;
}

Function ini mengembalikan:

string

Contoh:

const name = getFullName("John", "Smith");

Hasil:

"John Smith"

9. Apa yang terjadi kalau return type salah?

Ini bagian penting.

Misalnya:

function add(num1: number, num2: number): string {
    return num1 + num2;
}

Kita mengatakan:

): string

Artinya:

Function ini harus mengembalikan string.

Tetapi kita justru melakukan:

return num1 + num2;

yang menghasilkan:

number

Maka TypeScript akan memberikan error.

Secara sederhana TypeScript mengatakan:

“Kamu bilang function ini mengembalikan string, tetapi yang kamu return adalah number.”

10. Cara memperbaikinya

Ada dua pilihan.

Pilihan pertama: return type menjadi number

function add(num1: number, num2: number): number {
    return num1 + num2;
}

Ini benar.

Pilihan kedua: ubah hasil menjadi string

function add(num1: number, num2: number): string {
    return (num1 + num2).toString();
}

Ini juga benar.

Sekarang:

num1 + num2
     ↓
number
     ↓
.toString()
     ↓
string

11. Tidak semua function mengembalikan nilai

Nah, sekarang masuk ke bagian yang sangat penting.

Ada function yang memang tidak mengembalikan nilai.

Contohnya:

function add(num1: number, num2: number) {
    console.log(num1 + num2);
}

Function ini melakukan sesuatu:

console.log(num1 + num2);

Tetapi tidak memiliki:

return

Jadi function tersebut tidak mengembalikan nilai kepada pemanggilnya.

12. Apa return type function tersebut?

TypeScript akan menyimpulkan return type-nya sebagai:

void

Jadi secara konsep:

function add(num1: number, num2: number): void {
    console.log(num1 + num2);
}

void berarti:

Function ini tidak mengembalikan nilai yang bisa kita gunakan.

13. console.log() bukan return

Ini kesalahan yang sering terjadi ketika baru belajar function.

Perhatikan:

function add(a: number, b: number) {
    console.log(a + b);
}

Function tersebut memang menghasilkan output di console:

25

Tetapi bukan berarti function mengembalikan 25.

console.log() hanya menampilkan sesuatu ke console.

Sedangkan return mengirimkan nilai kembali kepada kode yang memanggil function.

14. Perbedaan console.log dan return

Lihat contoh ini:

function add(a: number, b: number): void {
    console.log(a + b);
}

Ketika:

add(12, 13);

console menampilkan:

25

Tetapi:

const result = add(12, 13);

result tidak berisi 25.

Secara konsep:

result → undefined

Kenapa?

Karena function tidak melakukan:

return a + b;

15. Bandingkan dengan function yang menggunakan return

Function pertama:

function add(a: number, b: number): number {
    return a + b;
}

Kemudian:

const result = add(12, 13);

Hasil:

result = 25

Karena function melakukan:

return 25;

Sedangkan:

function add(a: number, b: number): void {
    console.log(a + b);
}

Kemudian:

const result = add(12, 13);

Console:

25

Tetapi:

result = undefined

Ini perbedaan yang sangat penting.

16. Analogi sederhana

Bayangkan function seperti mesin.

Function dengan return

      12 + 13
         ↓
      [ MESIN ]
         ↓
        25

Mesin mengeluarkan hasil yang bisa kita simpan.

const result = add(12, 13);

Function dengan console.log

      12 + 13
         ↓
      [ MESIN ]
         ↓
     tampilkan 25

Mesin hanya menampilkan hasil.

Tidak memberikan hasil tersebut kembali kepada kita.

17. Apa itu void?

Secara sederhana:

void digunakan untuk function yang tidak mengembalikan nilai.

Contohnya:

function sayHello(): void {
    console.log("Hello");
}

Function tersebut melakukan sesuatu, yaitu menampilkan "Hello".

Tetapi tidak mengembalikan nilai.

Contoh lain:

function printName(name: string): void {
    console.log(name);
}

Atau:

function saveData(): void {
    // menyimpan data
}

Atau:

function sendEmail(): void {
    // mengirim email
}

Pada function-function tersebut kita tidak membutuhkan hasil return.

18. void bukan berarti function tidak melakukan apa-apa

Ini juga perlu diluruskan.

void bukan berarti function kosong atau tidak melakukan pekerjaan.

Function bisa melakukan banyak hal:

function printUser(name: string): void {
    console.log(name);
}

Function tersebut melakukan pekerjaan.

Hanya saja:

Function tidak mengembalikan nilai kepada pemanggil.

19. Lalu apa itu undefined?

Sekarang kita masuk ke bagian yang sedikit membingungkan.

JavaScript memiliki nilai:

undefined

Jika sebuah function tidak mengembalikan sesuatu dengan return, JavaScript secara default menghasilkan:

undefined

Contohnya:

function hello() {
    console.log("Hello");
}

Kemudian:

const result = hello();
console.log(result);

Console akan menampilkan:

Hello
undefined

Kenapa ada dua output?

Output pertama:

Hello

berasal dari:

console.log("Hello");

Output kedua:

undefined

berasal dari hasil function hello() yang tidak melakukan return.

20. Jadi void dan undefined sama atau berbeda?

Tidak persis sama.

Ini penting.

void

Digunakan untuk menyatakan:

Function tidak memberikan return value yang berguna.

Contoh:

function hello(): void {
    console.log("Hello");
}

undefined

Adalah sebuah nilai.

Contohnya:

const result = hello();

Secara runtime, result akan mendapatkan:

undefined

Jadi secara konsep:

void
↓
cara kita mengatakan function tidak mengembalikan nilai

sedangkan:

undefined
↓
nilai yang muncul ketika tidak ada nilai yang dikembalikan

21. Kenapa sebaiknya menggunakan void?

Materi mengatakan bahwa kita sebenarnya bisa menulis:

function add(a: number, b: number): undefined {
    console.log(a + b);
}

Tetapi secara umum lebih baik menggunakan void untuk function yang memang tidak mengembalikan nilai.

Jadi gunakan:

function add(a: number, b: number): void {
    console.log(a + b);
}

daripada:

function add(a: number, b: number): undefined {
    console.log(a + b);
}

Kenapa?

Karena tujuan kita adalah menjelaskan kontrak function:

“Function ini tidak memberikan return value.”

Dan void memang digunakan untuk tujuan tersebut.

22. Bagaimana dengan return; tanpa nilai?

Kita juga bisa memiliki:

function test(): void {
    return;
}

Ini diperbolehkan.

Perhatikan:

return;

berbeda dengan:

return 10;

Yang pertama tidak mengembalikan nilai.

Yang kedua mengembalikan 10.

23. Contoh function void dengan kondisi

Misalnya:

function checkAge(age: number): void {
    if (age < 18) {
        console.log("Not eligible");
        return;
    }

    console.log("Eligible");
}

Function tersebut tidak mengembalikan nilai.

return; di sini hanya digunakan untuk menghentikan function lebih awal.

Ini valid:

return;

karena tidak ada nilai yang dikembalikan.

24. Return type object juga bisa

Return type tidak hanya:

number
string
void

Kita juga bisa mengembalikan object.

Misalnya:

type User = {
    name: string;
    age: number;
};

function getUser(): User {
    return {
        name: "John",
        age: 32
    };
}

Di sini:

): User

adalah return type.

Artinya:

Function getUser harus mengembalikan object yang mengikuti tipe User.

25. Return type bisa menggunakan Type Alias

Ini nyambung dengan materi sebelumnya.

Misalnya:

type User = {
    firstName: string;
    lastName: string;
    age: number;
};

Kemudian:

function getUser(): User {
    return {
        firstName: "John",
        lastName: "Smith",
        age: 32
    };
}

Ini sangat berguna karena struktur object tidak perlu ditulis berulang-ulang.

26. Return type bisa berupa Union Type

Kita juga bisa menggunakan Union Type sebagai return type.

Misalnya:

function getValue(): string | number {
    return 100;
}

Function tersebut boleh mengembalikan:

string

atau:

number

Contoh:

function getValue(isNumber: boolean): string | number {
    if (isNumber) {
        return 100;
    }

    return "100";
}

Ini valid karena kedua kemungkinan return sudah didefinisikan.

27. Return type juga bisa menggunakan Literal Type

Misalnya:

function getRole(): "admin" | "user" {
    return "admin";
}

Function tersebut hanya boleh mengembalikan:

"admin"

atau:

"user"

Tidak boleh:

function getRole(): "admin" | "user" {
    return "guest"; // ❌
}

Ini menggabungkan materi:

• Type Alias
• Union Type
• Literal Type
• Return Type

28. Kenapa explicit return type berguna?

Pertanyaannya:

“Kalau TypeScript sudah bisa melakukan inference, kenapa kita perlu menulis return type?”

Benar bahwa sering kali kita tidak wajib menuliskannya.

Misalnya:

function add(a: number, b: number) {
    return a + b;
}

TypeScript sudah tahu:

number

Tetapi explicit return type bisa membantu:

1. Membuat kode lebih jelas

function add(a: number, b: number): number

Kita langsung tahu function mengembalikan number.

2. Mencegah kesalahan

Misalnya kita tidak sengaja mengubah:

return a + b;

menjadi sesuatu yang menghasilkan string.

Dengan explicit return type:

function add(a: number, b: number): number {
    return (a + b).toString();
}

TypeScript langsung memberikan error.

3. Menjadi dokumentasi

Orang lain yang membaca kode bisa langsung mengetahui kontrak function tersebut.

29. Cara membaca function TypeScript

Biasakan membaca function seperti ini:

function add(
    num1: number,
    num2: number
): number {
    return num1 + num2;
}

Bacanya:

“Function bernama add, menerima num1 berupa number dan num2 berupa number, lalu mengembalikan number.”

Sedangkan:

function printName(name: string): void {
    console.log(name);
}

dibaca:

“Function printName menerima string bernama name, dan tidak mengembalikan nilai.”

30. Ringkasan number, string, dan void

Contoh:

function getAge(): number {
    return 20;
}

function getName(): string {
    return "John";
}

function isAdult(): boolean {
    return true;
}

function printHello(): void {
    console.log("Hello");
}

31. Hal terpenting dari lecture ini

Ada empat hal yang sebaiknya kamu pahami.

① Function bisa mengembalikan nilai

function add(a: number, b: number) {
    return a + b;
}

② TypeScript bisa mengetahui return type secara otomatis

function add(a: number, b: number) {
    return a + b;
}

TypeScript menyimpulkan:

return type = number

③ Kita bisa menentukan return type secara eksplisit

function add(a: number, b: number): number {
    return a + b;
}

④ Function yang tidak mengembalikan nilai biasanya menggunakan void

function add(a: number, b: number): void {
    console.log(a + b);
}

Function tersebut menampilkan hasil, tetapi tidak me-return hasilnya.

32. Cara paling mudah mengingat

Bayangkan function memiliki input → proses → output.

INPUT
  ↓
function
  ↓
PROCESS
  ↓
RETURN / OUTPUT

Misalnya:

function add(a: number, b: number): number {
    return a + b;
}

Maka:

Input:
number + number

       ↓

Process:
penjumlahan

       ↓

Output:
number

Kalau:

function add(a: number, b: number): void {
    console.log(a + b);
}

maka:

Input:
number + number

       ↓

Process:
penjumlahan

       ↓

Output:
tidak ada return value

Jadi return type adalah kontrak yang memberi tahu TypeScript: “function ini harus mengembalikan tipe data seperti apa.”

Dan satu perbedaan yang wajib kamu ingat:

console.log(a + b);

➡️ menampilkan nilai

sedangkan:

return a + b;

➡️ mengembalikan nilai

Itulah inti utama dari lecture ini.