Nesneler, herhangi bir JavaScript geliştiricisi tarafından çok iyi anlaşılması gereken bir alandır. Nesne özelliklerine erişmek için de bu alana aittir. Bu eğitimde nesne özelliklerini üç şekilde nasıl değiştireceğinizi öğrenebilirsiniz. Köşeli parantezlerin nokta notasyonu, notasyonu ve yok edilmesinin nasıl kullanılacağını öğreneceksiniz.

Nesnelerin özelliklerine nasıl erişileceğine giriş

JavaScript’teki veri türlerinden biri yapay nesnelerdir. Anahtar / değer çiftlerinde bilgi depolamanıza izin verirler. Genellikle adlandırılan özellikler, bu çiftlerdeki “anahtarlardır”. Henüz nesnelere aşina değilseniz, bunları değişkenler olarak düşünebilirsiniz. Bu değişkenler yalnızca onları içeren nesnede bulunur, bu tür nesneler dışında hiçbir yerde yoktur.

JavaScript’te bu özelliklerden birine ulaşmanın birkaç yolu vardır. Köşeli parantezlerin nokta notasyonu, notasyonu ve bozulması vardır. Nokta gösterimi aynı zamanda nokta özelliklerinin erişimcisi olarak da adlandırılır. Parantez gösteriminin başka bir adı, özellik köşeli parantezlerine erişimdir. Bahsetilmesi gereken önemli bir şey var.

Tüm bu stratejiler, kullanmak istediğiniz mülkün adını bildiğinizi varsayar. Bilmiyorsanız hiçbir şey kaybolmaz. Beğendiğiniz özellik de dahil olmak üzere tüm özellikleri elde etmek için yinelemek üzere nesnenin üzerinde döngü yapabilirsiniz. Şimdi, kullanabileceğiniz nesne özelliklerini kontrol etmenin bu üç yoluna bir göz atalım.

Dot Notation

Muhtemelen JavaScript’te nesne özelliklerine erişmenin en yaygın yolu nokta notasyonu veya nokta özelliği erişimcisidir. Bu formu anlamak ve kullanmak çok kolay. Aşağıdaki sözdizimidir. İkincisi, belirli bir varlık tanımlanır. İkinci olarak, mülkün adına karar verirsiniz. Öğe ve özelliğin adı arasındaki nokta (.)

Daha derin özelliklere ulaşmak için aynı yöntemi de kullanabilirsiniz. Bu durumda birkaç mülkü birbirine zincirlersiniz. Onları oldukları gibi birbirine bağlarsınız. Yani, nesnenin adından hemen sonra en sığ özellik önce gelir. En derin özellik, son: obj.shallowProp.deeperProp.DeepestProp olacaktır.

Değeri bir dizi olan özelliğe erişilmesini istediğinizi varsayalım. Dizideki belirli bir öğeye ulaşmak istiyorsunuz. Dizi bir değişken olsaydı, bu durumda genellikle yapacağın şeyi yapmalısın. İstediğiniz özelliği girmek için nokta gösterimini kullanırsınız. Bundan sonra, istediğiniz dizideki öğeyi almak için köşeli parantezler ve bir dizin kullanırsınız.

// Create an object using object literal:
const myObj = {
  name: 'Anthony Edward Stark',
  alias: 'Iron Man',
  gender: 'male',
  education: 'MIT',
  affiliation: {
    current: 'Avengers'
  },
  creators: ['Stan Lee', 'Larry Lieber', 'Don Heck', 'Jack Kirby'],
  status: {
    alignment: 'good'
  }
}


// Accessing object properties with dot notation:
// First: name of the object.
// Second: name of the property to access.
// Third: dot character between the object and property.
console.log(myObj.name)
// Output:
// 'Anthony Edward Stark'

console.log(myObj.alias)
// Output:
// 'Iron Man'


// Accessing deeper object properties:
// Access the "current" property that exists
// in nested object assigned to "affiliation" property
console.log(myObj.affiliation.current)
// Output:
// 'Avengers'


// Accessing array items in objects:
// Access the first item inside the array
// assigned to "creators" property.
console.log(myObj.creators[0])
// Output:
// 'Stan Lee'

 


Dot notation ve valid property names

JavaScript’te neyin meşru tanımlayıcı olduğunu ve neyin olmadığını belirten kurallar vardır. Unicode harfler, $, _ ve 0-9 rakamları geçerli bir tanımlayıcıda kullanılabilir. Ancak bir rakamla başlayamaz. Yeni değişkenler tanımlamayı seçtiğinizde bu kurallara uymak özellikle önemlidir.

Bu kurallar, istediğiniz zaman nesne özelliklerine erişmek için de önemlidir. Noktalı gösterim için bu özellikle geçerlidir. Nokta gösterimi yalnızca geçerli tanımlayıcılar için çalışır. Bu yasaların eldeki mülk tarafından ihlal edilmesi durumunda işe yaramayacaktır. Örneğin bir sayı ile başlıyorsa veya yalnızca bir sayı içeriyorsa. Veya gerektiriyorsa -.

Bu yasaları ihlal eden herhangi bir mülke ulaşmak istiyorsanız noktalı gösterimi kullanmayın. Bunun yerine, parantezler için gösterimi kullanın. Bu şekilde mülkle her zamanki gibi çalışmaya devam edebileceksiniz. Sonraki bölümde, parantez gösterimi hakkında bilgi edinebilirsiniz.


// Create an object:
myObj = {
  1: 'First property',
  'first-name': 'Bruce',
}

// Try to use dot notation
// to access properties on "myObj".
console.log(myObj.1)
// Output:
// SyntaxError: Unexpected token

console.log(myObj.first-name)
// Output:
// NaN


// Try to use bracket notation
// to access properties on "myObj".
console.log(myObj['1'])
// Output:
// 'First property'

console.log(myObj[1])
// Output:
// 'First property'

console.log(myObj['first-name'])
// Output:
// 'Bruce'

 

Bracklet notation

Nesne özelliklerine erişmek için kullanabileceğiniz ikinci biçim, parantezlerin gösterilmesidir. Köşeli parantezler bu stratejinin birincil özelliğidir. Sözdizimi, bir noktanın gösterimine eşdeğerdir. Bununla birlikte, bazı önemli farklılıklar var. Tekrar uğraştığınız öğenin adıyla başlayın.

Mülkün adı ikinci sırada gelir. Burada, mülkün adını tırnak işaretleri ve köşeli parantez içine almanız gerekir. Tek veya çift alıntı kullanırsanız, fark etmez. Önemli olan, etrafındaki mülk adını bağlamak için bunları kullanmanızdır. Ardından, köşeli parantezlerle sarın ve nesnenin arkasına yerleştirin. Aralarında tek nokta yok.

Parantez gösterimi ayrıca daha derin özelliklere erişilmesini sağlar. Noktaların gösterimine benzer şekilde çalışır. En sığ olandan en derinine kadar tüm kaynaklar birbirine zincirlenmiştir. Parantez durumunda özellikler arasında nokta yoktur. Ek olarak, tırnak işaretleri ve köşeli parantezlerle tüm özellikleri kaydırmanız gerekir.

Özellik atanmış diziler içindeki nesnelere erişim de benzer şekilde çalışır. Önce mülkün adını girin ve onu tırnak ve köşeli parantez içine alın. Ardından, erişmek istediğiniz nesnenin dizinine fazladan bir köşeli ayraç çifti ekleyin.

// Create an object:
const myObj = {
  name: 'Bruce Thomas Wayne',
  alias: 'Batman',
  affiliation: ['Batman Family', 'Justice League', 'Outsiders', 'Guild of Detection'],
  status: {
    alignment: 'good',
    occupation: 'businessman'
  }
}


// Accessing object properties with bracket notation:
// First: name of the object.
// Second: name of the property to access.
// Note: property name must be wrapped with quotes
// and then with square brackets.
console.log(myObj['name'])
// Output:
// 'Bruce Thomas Wayne'


// Accessing deeper object properties:
// Access the "alignment" property that exists
// in nested object assigned to "status" property
console.log(myObj['status']['alignment'])
// Output:
// 'good'


// Accessing array items in objects:
// Access the second item inside the array
// assigned to "affiliation" property.
console.log(myObj['affiliation'][1])
// Output:
// 'Justice League'

Bracklet notation ve hesaplanan yapıların özellikleri (object properties)

Hesaplanmış özellik adlarını kullanmak, parantez gösteriminin yaptığı önemli bir şeydir. Başlangıçta, ancak daha sonra veya çalışma zamanında bu özellik adları tanınmayabilir. Bir değişken içinde saklanan bir özellik adı bir örnek olabilir. Bu değişkene, değişkenin değeriyle eşleşen bir erişim özelliği olarak başvurulabilir.

Başlangıçta bu değişken bilinmeyebilir ve daha sonra tahsis edilebilir. Doğru zamanda kullanırsanız, önemli değil. Parantez gösterimi ile hesaplanmış nesne özelliklerini kullanmak için genellikle yapacağınız şeye yakındır. Aradaki fark, şimdi alıntıları atlamış olmanızdır. Bunlar olmadan, parantezlerin arasına bir değişken adı koyarsınız.

// Create an object:
const myObj = {
  name: 'James Howlett',
  alias: 'Wolverine',
  status: {
    alignment: 'good'
  }
}

// Assign a property you want to access to a variable:
const myProp = 'alias'

// Use the variable to access specific property ("alias"):
// Referencing "myProp" will return value "alias",
// which will be used to access the same property ("alias").
// I.e.: myObj[myProp] => myObj['alias']
console.log(myObj[myProp])
// Output:
// 'Wolverine'

Nesneleri yok etmek

Nesne yok etme, nesne özelliklerine ulaşmanın son yoludur. Aynı zamanda en yenisidir. Uzun zamandır nokta ve köşeli parantez gösterimi etrafta. ES6 spesifikasyonunun bir parçası olarak, Destructuring çok yakın zamanda JavaScript’e uygulandı. Bununla birlikte, basitliği ve kullanılabilirliği nedeniyle JavaScript geliştiricileri arasında hızla çok popüler hale geldi.

Yeni bir öznitelik ilan ettiğinizde onu kullanırsınız. Atamanın sol tarafında bir özelliğin adını tanımlar ve onu süslü parantezlerle sararsınız. Sağ tarafta uğraşmak istediğiniz maddeye atıfta bulunuyorsunuz. Bu, tanımladığınız özelliğin değerini değişkene atayacaktır.

// Create an object:
const myObj = {
  name: 'Unknown',
  alias: 'The Joker',
  affiliation: ['Black Glove', 'Injustice Gang', 'Injustice League', 'Joker League of Anarchy', 'Justice League of Arkham'],
  status: {
    alignment: 'bad',
    occupation: 'criminal'
  }
}


// Extract the value of "alias" property:
const { alias } = myObj

// Log the value of new "alias" variable:
console.log(alias)
// Output:
// 'The Joker'


// Extract the value of "affiliation" property:
const { affiliation } = myObj

// Log the value of new "affiliation" variable:
console.log(affiliation)
// Output:
// [
//   'Black Glove',
//   'Injustice Gang',
//   'Injustice League',
//   'Joker League of Anarchy',
//   'Justice League of Arkham'
// ]


// Extract the value of "status" property:
const { status } = myObj

// Log the value of new "status" variable:
console.log(status)
// Output:
// { alignment: 'bad', occupation: 'criminal' }

 

Birden fazla property yok etmek

Birden fazla özelliği “yok etmek” için, Nesne Yok Etmeyi kullanabilirsiniz. Birkaç değişkeni aynı anda tahsis etmek için başka bir yol koyun. Bunu yapmak için, görevin sol tarafında küme ayraçlarının içine ek özellikler eklersiniz. Bu özellikler virgülle ayırt edilmelidir.

// Create an object:
const myObj = {
  name: 'Dr. Reed Richards',
  alias: 'Mister Fantastic',
  affiliation: 'Fantastic Four',
  status: {
    alignment: 'good'
  }
}


// Use object destructuring to assign multiple variables:
// Desctructure "name", "alias", "affiliation" and "status".
const { name, alias, affiliation, status } = myObj

// Log the values of new variables:
console.log(name)
// Output:
// 'Dr. Reed Richards'

console.log(alias)
// Output:
// 'Mister Fantastic'

console.log(affiliation)
// Output:
// 'Fantastic Four'

console.log(status)
// Output:
// { alignment: 'good' }

 

Özel takma adlar ve değişken adları

Nesneyi yok eden değişkenlere değer atamak çok kolaydır. Özelliğin adından farklı bir değişken adı kullanmak isterseniz ne olur? Sen gidiyorsun. Nesne yok ederek öznitelik için bir takma ad tanımlayabilirsiniz. Bu takma ad, evin adından farklı bir ad kullanarak bir değişkene referans vermek için kullanılabilir.

Bir takma ad oluşturmak istiyorsanız, bunu atamanın sol tarafında süslü parantezlerin içinde belirtirsiniz. İki nokta üst üste (:) ve ardından özellik adının hemen arkasına yeni takma ad eklersiniz. Değişkene başvurulmasını istediğinizde bundan sonra bu takma adı kullanacaksınız.

// Create an object:
const myObj = {
  name: 'Bruce Banner',
  alias: 'Hulk',
  affiliation: ['S.H.I.E.L.D.'],
  status: {
    alignment: 'good'
  }
}


// Extract the value of "name" property
// and assign it to variable called "realName" (new alias).
const { name: realName } = myObj

// Use new alias "realName" to get the value
console.log(realName)
// Output:
// 'Bruce Banner'


// Extract the value of "alias" property
// and assign it to variable called "heroName" (new alias).
const { alias: heroName } = myObj

// Use new alias "heroName" to get the value
console.log(heroName)
// Output:
// 'Hulk'

 

Birden çok özellik için, özel değişken adları (takma adlar)

Tıpkı bir mülk için değişkenin adını değiştirebildiğiniz gibi, onu birden çok özellik için ayarlayabilirsiniz. İşlev aynıdır. Küme parantezlerinin içine fazladan iki nokta üst üste ve yeni bir takma ad eklemeniz gerekir. Değişkenin adını değiştirmek istediğiniz her özellik için bunu yapın.

// Create an object:
const myObj = {
  name: 'Oliver Jonas Queen',
  alias: 'Green Arrow',
  affiliation: ['Justice League', 'Justice Society International'],
  status: {
    alignment: 'good'
  }
}

// Change multiple variable names:
// Change variable for "name" to "realName".
// Change variable for "alias" to "heroName".
// Change variable for "affiliation" to "connection".
const { name: realName, alias: heroName, affiliation: connection } = myObj

// Log all values using new variable names:
console.log(realName)
// Output:
// 'Oliver Jonas Queen'

console.log(heroName)
// Output:
// 'Green Arrow'

console.log(connection)
// Output:
// [ 'Justice League', 'Justice Society International' ]

 

Nesneleri, takma adları ve varsayılan değerleri yok etme

Nesneleri yok etmek harika olabilir, ancak ya erişmek istediğiniz mülk yoksa? Nesne yok etme ile yapabileceğiniz şeylerden biri varsayılan bir anlama sahip olmaktır. Özellik yoksa, bu varsayılan değer değişkene uygulanacaktır. Aksi takdirde, mevcut değer ona atanır.

Herhangi bir özellik için varsayılan bir değer atamak istiyorsanız, bunu süslü parantez içinde de yapabilirsiniz. Bir özellik adından sonra varsayılan değere siz karar verirsiniz. İkisini de eşittir işaretiyle (=) ayırmanız gerekir. Bir takma ad varsa, varsayılan değer diğer addan sonraki son değerdir.

// Create an object:
const myObj = {
  name: 'Richard John Grayson',
  alias: 'Nightwing',
  status: {
    alignment: 'good'
  }
}

// Deconstruct the "name" property
// and add default value in case it doesn't exist.
const { name = 'Anonymous' } = myObj

// Log the value of name
console.log(name)
// Output:
// 'Richard John Grayson'


// Deconstruct the "gender" property
// and add default value in case it doesn't exist.
const { gender = 'Unknown' } = myObj

// Log the value of "name":
console.log(gender)
// Output:
// 'Unknown'


// Deconstruct the "name" property
// and "affiliation" property,
// change it to "connections" and add default value
// in case "affiliation" property doesn't exist.
const { name, affiliation: connections = 'No connections' } = myObj

// Log the value of new variable "connections":
console.log(connections)
// Output:
// 'No connections'

 

Object yok edilmesi ve hesaplanan özellikler

Parantez gösterimine benzer şekilde nesne yok etme, hesaplanmış özellik adlarının kullanılmasına da izin verir. Aşağıdaki, onu kullanmanın yoludur. Evin adını içeren değişkenin adını köşeli parantez içine alın ve küme parantezlerinin içine yerleştirin. Unutulmaması gereken bir nokta, bir takma adın belirtilmesi gerektiğidir. Aksi takdirde SyntaxError elde edersiniz.

// Create an object:
const myObj = {
  name: 'Max Eisenhardt',
  alias: 'Magneto',
  status: {
    alignment: 'bad'
  },
  creators: ['Stan Lee', 'Jack Kirby']
}

// Assign a property you want to access to a variable:
const myProp = 'name'

// Use the variable to access specific property ("name")
// and also create alias for it:
// Referencing "myProp" will now return value "name",
// which will be used to access the "name" property.
const { [myProp]: name } = myObj

// Log the value of new variable "name":
console.log(name)
// Output:
// 'Wolverine'


// Use computed property name with default value:
const myProp = 'powers'

// Use the variable to access specific property ("powers")
// and create alias "abilities" for it.
// If the property doesn't exist, use 'Unknown'
// as the default value for the new variable.
const { [myProp]: abilities = 'Unknown' } = myObj

// Log the value of new variable "abilities":
console.log(abilities)
// Output:
// 'Unknown'

 

Sonuç: JavaScript’te nesne özelliklerini üç şekilde kontrol etme

JavaScript’te nesne özelliklerini kontrol etmenin üç yöntemi şunlardır: noktaların ve köşeli parantezlerin gösterimi ve nesnelerin yok edilmesi. Umarım hepsinin nasıl çalıştığını ve bu eğitimde nasıl kullanılacağını anlamışsınızdır. Şimdi kendinizi en rahat hissettiğinizi bulun ve kullanmaya devam edin. Mülklere erişmenin iyi veya kötü yolları yoktur, not edin.