DEV Community

Cover image for Javascript Notları #5 - Objeler, Obje Oluşturma ve Kullanma (Objects, Creating and Using)
Turan Kılıç
Turan Kılıç

Posted on

Javascript Notları #5 - Objeler, Obje Oluşturma ve Kullanma (Objects, Creating and Using)

Merhabalar, bu yazımızda ise obje oluşturmaya ve örneklerine bakacağız. Hadi başlayalım :)

Objeler, içerisinde birden farklı veri türünü içeren, yazılımcı tarafından oluşturulan daha komplike veri türleridir.
İçerisinde farklı veri türleri tutabildiği gibi, farklı objeleri de tutabilmektedir.

Obje Oluşturma

Basit bir obje oluşturalım:

<script>
    var customer = {
        name: "Turan",
        number: 353535,
        prog_lang: ["C","C#","Python","Java","Javascript"]
    }
</script>
Enter fullscreen mode Exit fullscreen mode

Oluşturulmuş olan bu obje içerisinde 3 farklı veri tipi (string, int, array) bulundurmakta.
Bu değişkenlere ise aşağıda gösterilen şekilde ulaşılmaktadır:

<script>
    console.log(customer.name);
    console.log(customer.number);
    console.log(customer.prog_lang);
</script>
Enter fullscreen mode Exit fullscreen mode

Bu komutları çıktısı aşağıdaki gibidir:
Calling Object Variables

İç İçe Obje Oluşturma (Nested Objects)

Obje içerisinde obje oluşturulabilir. Buna bir örnek verelim:

<script>
    var customer = {
        name: "Turan",
        number: 353535,
        prog_lang: ["C","C#","Python","Java","Javascript"],
        personal : {
            age: 22,
            gender: "male",
            height: "180 cm",
            weight: "70 kg"
        }
    }
</script>
Enter fullscreen mode Exit fullscreen mode

Bu iç içe oluşturulmuş objenin nesnelerine aşağıdaki örnekte gösterildiği gibi ulaşılır:

<script>
    console.log(customer.personal.age);
    console.log(customer.personal.gender);
    console.log(customer.personal.height + " " + customer.personal.weight);
</script>
Enter fullscreen mode Exit fullscreen mode

Bu komutların çıktısı aşağıda verilmiştir:
Nested Objects in Javascript

Obje İçerisinde Fonksiyon Oluşturma

Obje içerisinde fonksiyon oluşturma ve çağırmaya aşağıda örnek verilmiştir. Burada "This" anahtar sözcüğü devreye girmektedir. Bu keyword obje içerisindeki değişkenin kullanılması gerektiğini belirtir.

<script>
    var customer = {
        name: "Turan",
        surname: "Blade",
        number: 353535,
        customerInfo : function(){
            return "Name: " + this.name + " Surname: " + this.surname;
        }
    }

    console.log(customer.customerInfo());


</script>
Enter fullscreen mode Exit fullscreen mode

Ve output ise:
Functions in Objects Javascript

Obje Oluşturmanın Bir Farklı Yöntemi

Objeler, az önce gösterilen gibi oluşturulabildikleri gibi farklı bir şekilde de oluşturulmaktadır. Aşağıda bunun örneği bulunmaktadır:

<script>
    var customer = new Object();

    customer.name = "Turan";
    customer.surname = "Blade";
    customer.customerInfo = function() {
        return "Name: " + this.name + " Surname: " + this.surname;
    }
</script>
Enter fullscreen mode Exit fullscreen mode

Obje oluşturma görüldüğü üzere 2 farklı şekilde yapılabiliyor.

Yapıcı Metotlar

Peki oluşturulan objelerin içerdikleri değişkenlere değer atama her zaman manuel mi yapılıyor ? Tabiki hayır. Bu işlemi bizler için gerçekleştiren "Constructor Method" (Yapıcı Metot) denilen bir kavram bulunmakta. Bu metot sayesinde birçok obje oluşturulabilir ve oluşturulan bu objelere değer ataması yapılabilir.

Yani tek bir fonksiyon ile birçok obje oluşturulur ve otomatik değer ataması yapılır.

Yapıcı metot oluşturulması:

<script>
   function Employee(name,surname,number){ // yapıcı metot
       this.name = name;
       this.surname = surname;
       this.number = number;
       this.showInfo = function() { // metot içerisinde fonksiyon
           return "Name: " + this.name + "\nSurname: " + this.surname 
           + "\nNumber: " + this.number;
       }
   }

   var employee1 = new Employee("Turan","Blade",454535); // yeni obje oluşturulması
   var employee2 = new Employee("Hebele","Hübele",324353); // başka bir obje oluşturulması
</script>
Enter fullscreen mode Exit fullscreen mode

Oluşturulan nesnelerin "showInfo()" adlı fonksiyonunu çağıralım:

<script>
   console.log(employee1.showInfo());
   console.log(employee2.showInfo());
</script>
Enter fullscreen mode Exit fullscreen mode

Output aşağıdaki gibidir:
Construtor Method in Javascript

Discussion (3)

Collapse
hamzaazman profile image
Hamza Azman

Kısa ve net, güzel içerik olmuş. Devam... :)

Collapse
toour profile image
Turan Kılıç Author

Teşekkür ederim, yeni gördüğüm için kusuruma bakma. Desteğin için tekrardan teşekkürler :))

Collapse
duc_tran2021 profile image
Đức Trần