Javascript Notları #5 - Objeler, Obje Oluşturma ve Kullanma (Objects, Creating and Using)
Tags: javascript, tutorial, beginners, programming
Published: 2021-10-23 12:24:18

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>
``` 
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>
```
Bu komutları çıktısı aşağıdaki gibidir:
![Calling Object Variables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j9rim9ezwugqvsrlq4d0.png)

## İç İç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>
```
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>
```
Bu komutların çıktısı aşağıda verilmiştir:
![Nested Objects in Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpt05dwxvz28ele2oqea.png)

## 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>
```
Ve output ise:
![Functions in Objects Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uga4fwlp7l9xzeuokt5i.png)
 
## 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>
```
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>
```
Oluşturulan nesnelerin "showInfo()" adlı fonksiyonunu çağıralım:
```
<script>
   console.log(employee1.showInfo());
   console.log(employee2.showInfo());
</script>
```
Output aşağıdaki gibidir:
![Construtor Method in Javascript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1gizw1q9j0ewm4kn9vj.png)