JavaScript, internetin dinamik y\u00fcz\u00fcn\u00fc \u015fekillendiren, s\u00fcrekli geli\u015fen bir programlama dilidir. Ba\u015flang\u0131\u00e7ta web taray\u0131c\u0131lar\u0131nda k\u00fc\u00e7\u00fck etkile\u015fimler i\u00e7in tasarlanm\u0131\u015fken, g\u00fcn\u00fcm\u00fczde sunucu taraf\u0131nda (Node.js), mobil uygulamalarda (React Native), masa\u00fcst\u00fc uygulamalar\u0131nda (Electron) ve hatta IoT cihazlar\u0131nda bile kullan\u0131lmaktad\u0131r. Bu geni\u015f kullan\u0131m alan\u0131, dilin kendisinin de b\u00fcy\u00fck \u00f6l\u00e7ekli ve karma\u015f\u0131k projeleri y\u00f6netebilecek yeteneklere sahip olmas\u0131n\u0131 gerektirmi\u015ftir. Bu evrimin \u00f6nemli bir ad\u0131m\u0131, ECMAScript 2015 (ES6) ile tan\u0131t\u0131lan “s\u0131n\u0131flar” (classes) olmu\u015ftur.<\/p>\n
ES6 \u00f6ncesinde, JavaScript’te nesne y\u00f6nelimli programlama (OOP) kavramlar\u0131, “prototip tabanl\u0131 miras” (prototype-based inheritance) ad\u0131 verilen kendine \u00f6zg\u00fc bir mekanizma \u00fczerinden ger\u00e7ekle\u015ftiriliyordu. Bu mekanizma g\u00fc\u00e7l\u00fc olsa da, geleneksel nesne y\u00f6nelimli dillerden (Java, C#, Python gibi) gelen geli\u015ftiriciler i\u00e7in \u00f6\u011frenme e\u011frisini art\u0131rabiliyor ve karma\u015f\u0131k kod yaz\u0131m\u0131na yol a\u00e7abiliyordu. S\u0131n\u0131flar, JavaScript’in temel miras mekanizmas\u0131n\u0131 de\u011fi\u015ftirmese de, bu karma\u015f\u0131kl\u0131\u011f\u0131 soyutlayarak daha tan\u0131d\u0131k ve anla\u015f\u0131l\u0131r bir s\u00f6zdizimi (syntactic sugar) sunmu\u015ftur. Bu makale, JavaScript s\u0131n\u0131flar\u0131n\u0131n ne oldu\u011funu, nas\u0131l kullan\u0131ld\u0131\u011f\u0131n\u0131, alt\u0131nda yatan prototip mekanizmas\u0131n\u0131, geli\u015fmi\u015f \u00f6zelliklerini ve modern JavaScript geli\u015ftirmedeki rol\u00fcn\u00fc derinlemesine inceleyecektir.<\/p>\n
JavaScript’in en \u00f6zg\u00fcn ve bazen kafa kar\u0131\u015ft\u0131r\u0131c\u0131 \u00f6zelliklerinden biri, “prototip tabanl\u0131 miras” modelidir. Di\u011fer bir\u00e7ok dilde oldu\u011fu gibi s\u0131n\u0131f tabanl\u0131 bir miras yerine, JavaScript’te nesneler do\u011frudan di\u011fer nesnelerden miras al\u0131r. Her JavaScript nesnesinin bir prototipi vard\u0131r ve bu prototip zinciri, bir nesnenin \u00f6zelliklerine veya metotlar\u0131na eri\u015fmeye \u00e7al\u0131\u015f\u0131ld\u0131\u011f\u0131nda izlenir. E\u011fer bir \u00f6zellik do\u011frudan nesne \u00fczerinde bulunamazsa, JavaScript prototip zincirinde yukar\u0131 do\u011fru arama yapar.<\/p>\n
ES6 s\u0131n\u0131flar\u0131, bu prototip tabanl\u0131 miras modelini de\u011fi\u015ftirmez. Bunun yerine, prototip tabanl\u0131 kal\u0131t\u0131m mekanizmas\u0131 \u00fczerinde daha temiz ve sezgisel bir katman sa\u011flar. Yani, JavaScript s\u0131n\u0131flar\u0131 asl\u0131nda mevcut prototip miras mekanizmas\u0131n\u0131 kullanan kurucu fonksiyonlar (constructor functions) ve prototip zinciri manip\u00fclasyonlar\u0131 i\u00e7in bir s\u00f6zdizimsel kolayl\u0131kt\u0131r. Bu, s\u0131n\u0131flar\u0131n sadece sentaktik bir \u015feker (syntactic sugar) oldu\u011fu anlam\u0131na gelir; arka planda hala prototipler \u00e7al\u0131\u015f\u0131r.<\/p>\n
\u00d6rne\u011fin, ES5’te bir “s\u0131n\u0131f” \u015f\u00f6yle tan\u0131mlan\u0131rd\u0131:<\/p>\n
\nfunction Person(name, age) {\n this.name = name;\n this.age = age;\n}\n\nPerson.prototype.greet = function() {\n console.log(Merhaba, benim ad\u0131m ${this.name} ve ${this.age} ya\u015f\u0131nday\u0131m.<\/code>);\n};\n\nconst john = new Person('John Doe', 30);\njohn.greet(); \/\/ Merhaba, benim ad\u0131m John Doe ve 30 ya\u015f\u0131nday\u0131m.\n<\/code><\/pre>\nES6 s\u0131n\u0131flar\u0131 ile bu yap\u0131 \u00e7ok daha tan\u0131d\u0131k hale gelir:<\/p>\n
\nclass Person {\n constructor(name, age) {\n this.name = name;\n this.age = age;\n }\n\n greet() {\n console.log(Merhaba, benim ad\u0131m ${this.name} ve ${this.age} ya\u015f\u0131nday\u0131m.<\/code>);\n }\n}\n\nconst jane = new Person('Jane Doe', 25);\njane.greet(); \/\/ Merhaba, benim ad\u0131m Jane Doe ve 25 ya\u015f\u0131nday\u0131m.\n<\/code><\/pre>\nG\u00f6r\u00fcld\u00fc\u011f\u00fc gibi, her iki kod par\u00e7as\u0131 da ayn\u0131 i\u015flevi yerine getirir ancak s\u0131n\u0131f s\u00f6zdizimi daha okunakl\u0131 ve di\u011fer dillerden gelen geli\u015ftiriciler i\u00e7in daha anla\u015f\u0131l\u0131rd\u0131r.<\/p>\n
S\u0131n\u0131f Tan\u0131mlama ve Temel Kullan\u0131m<\/h3>\n
JavaScript’te bir s\u0131n\u0131f tan\u0131mlamak i\u00e7in class<\/code> anahtar kelimesi kullan\u0131l\u0131r.<\/p>\nS\u0131n\u0131f Tan\u0131mlama<\/h4>\n\nclass MyClass {\n \/\/ S\u0131n\u0131f\u0131n i\u00e7eri\u011fi buraya gelir\n}\n<\/code><\/pre>\nS\u0131n\u0131flar iki \u015fekilde tan\u0131mlanabilir:
\n1. S\u0131n\u0131f Bildirimi (Class Declaration):<\/strong> En yayg\u0131n kullan\u0131m \u015feklidir.<\/p>\n\n class Rectangle {\n \/\/ ...\n }\n <\/code><\/pre>\n2. S\u0131n\u0131f \u0130fadesi (Class Expression):<\/strong> \u0130simli veya isimsiz olabilir. Bir de\u011fi\u015fkene atanabilir.<\/p>\n\n const Square = class {\n \/\/ ...\n };\n\n const Circle = class MyCircle { \/\/ \u0130simli s\u0131n\u0131f ifadesi\n \/\/ ...\n };\n <\/code><\/pre>\nS\u0131n\u0131f bildirimleri, fonksiyon bildirimleri gibi hoist<\/code> edilmezler. Yani, bir s\u0131n\u0131f\u0131 kullanmadan \u00f6nce tan\u0131mlaman\u0131z gerekir.<\/p>\nconstructor<\/code> Metodu<\/h4>\nHer s\u0131n\u0131f\u0131n, s\u0131n\u0131f\u0131n bir \u00f6rne\u011fi (instance) olu\u015fturuldu\u011funda otomatik olarak \u00e7a\u011fr\u0131lan \u00f6zel bir metodu vard\u0131r: constructor<\/code>. Bu metot, genellikle s\u0131n\u0131f\u0131n \u00f6zelliklerini (properties) ba\u015flatmak i\u00e7in kullan\u0131l\u0131r.<\/p>\n\nclass Car {\n constructor(brand, model, year) {\n this.brand = brand;\n this.model = model;\n this.year = year;\n }\n}\n<\/code><\/pre>\nE\u011fer bir s\u0131n\u0131f i\u00e7inde constructor<\/code> metodu tan\u0131mlanmazsa, JavaScript otomatik olarak bo\u015f bir constructor<\/code> metodu ekler.<\/p>\nS\u0131n\u0131f \u00d6rnekleri Olu\u015fturma (new<\/code> Anahtar Kelimesi)<\/h4>\nBir s\u0131n\u0131ftan nesne olu\u015fturmak i\u00e7in new<\/code> anahtar kelimesi kullan\u0131l\u0131r. Bu i\u015flem, s\u0131n\u0131f\u0131n constructor<\/code> metodunu \u00e7a\u011f\u0131r\u0131r ve yeni bir nesne d\u00f6nd\u00fcr\u00fcr.<\/p>\n\nconst myCar = new Car('Toyota', 'Corolla', 2020);\nconsole.log(myCar.brand); \/\/ Toyota\nconsole.log(myCar.model); \/\/ Corolla\n<\/code><\/pre>\nMetot Tan\u0131mlama<\/h4>\n
S\u0131n\u0131f i\u00e7inde metotlar, normal fonksiyon s\u00f6zdizimi kullan\u0131larak tan\u0131mlan\u0131r. Bu metotlar, s\u0131n\u0131f\u0131n \u00f6rnekleri taraf\u0131ndan \u00e7a\u011fr\u0131labilir.<\/p>\n
\nclass Car {\n constructor(brand, model, year) {\n this.brand = brand;\n this.model = model;\n this.year = year;\n }\n\n getDetails() {\n return ${this.year} ${this.brand} ${this.model}<\/code>;\n }\n\n startEngine() {\n console.log(${this.brand} ${this.model} motoru \u00e7al\u0131\u015ft\u0131.<\/code>);\n }\n}\n\nconst myCar = new Car('Honda', 'Civic', 2022);\nconsole.log(myCar.getDetails()); \/\/ 2022 Honda Civic\nmyCar.startEngine(); \/\/ Honda Civic motoru \u00e7al\u0131\u015ft\u0131.\n<\/code><\/pre>\nthis<\/code> Anahtar Kelimesinin S\u0131n\u0131f Ba\u011flam\u0131nda Kullan\u0131m\u0131<\/h4>\nS\u0131n\u0131f metotlar\u0131 i\u00e7inde this<\/code> anahtar kelimesi, o metodu \u00e7a\u011f\u0131ran s\u0131n\u0131f\u0131n \u00f6rne\u011fine (instance) referans eder. Bu, metotlar\u0131n \u00f6rnek \u00f6zelliklerine eri\u015fmesini ve bunlar\u0131 de\u011fi\u015ftirmesini sa\u011flar. Ancak, this<\/code> ba\u011flam\u0131 JavaScript’te esnek oldu\u011fu i\u00e7in, bir metot bir callback olarak ba\u015fka bir fonksiyona ge\u00e7irildi\u011finde this<\/code> de\u011feri de\u011fi\u015febilir. Bu durumu \u00f6nlemek i\u00e7in genellikle arrow fonksiyonlar veya bind()<\/code> metodu kullan\u0131l\u0131r.<\/p>\n\nclass Counter {\n constructor() {\n this.count = 0;\n }\n\n \/\/ Normal metot, this ba\u011flam\u0131 de\u011fi\u015febilir\n increment() {\n this.count++;\n console.log(this.count);\n }\n\n \/\/ Arrow fonksiyon olarak metot, this ba\u011flam\u0131n\u0131 korur (ES2022 Class Fields ile daha kolay)\n decrement = () => {\n this.count--;\n console.log(this.count);\n }\n}\n\nconst counter = new Counter();\ncounter.increment(); \/\/ 1\n\n\/\/ setTimeout ile \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda this ba\u011flam\u0131 pencere veya undefined olabilir\n\/\/ setTimeout(counter.increment, 1000); \/\/ Hata veya beklenmedik sonu\u00e7\n\n\/\/ \u00c7\u00f6z\u00fcm 1: bind kullanmak\n\/\/ setTimeout(counter.increment.bind(counter), 1000); \/\/ 2\n\n\/\/ \u00c7\u00f6z\u00fcm 2: Arrow fonksiyon (Class Fields ile)\nsetTimeout(counter.decrement, 1000); \/\/ 0 (e\u011fer increment \u00e7a\u011fr\u0131lmad\u0131ysa)\n<\/code><\/pre>\nS\u0131n\u0131f Alanlar\u0131 (Class Fields – ES2022)<\/h3>\n
ES2022 ile tan\u0131t\u0131lan s\u0131n\u0131f alanlar\u0131 (class fields), s\u0131n\u0131f \u00f6zelliklerini do\u011frudan s\u0131n\u0131f tan\u0131m\u0131n\u0131n i\u00e7ine yazma imkan\u0131 sunar. Bu, constructor<\/code> i\u00e7inde this.property = value;<\/code> yazma ihtiyac\u0131n\u0131 azalt\u0131r ve s\u0131n\u0131f\u0131n \u00f6zelliklerini daha okunabilir hale getirir.<\/p>\nPublic Instance Fields<\/h4>\n
Do\u011frudan s\u0131n\u0131f tan\u0131m\u0131nda bir \u00f6zellik ba\u015flatmak i\u00e7in kullan\u0131l\u0131r. Her s\u0131n\u0131f \u00f6rne\u011fi kendi kopyas\u0131na sahip olur.<\/p>\n
\nclass Person {\n name = 'Anonim'; \/\/ Public instance field\n age = 0;\n\n constructor(name, age) {\n if (name) this.name = name;\n if (age) this.age = age;\n }\n\n greet() {\n console.log(Merhaba, benim ad\u0131m ${this.name}.<\/code>);\n }\n}\n\nconst p1 = new Person('Alice', 30);\nconsole.log(p1.name); \/\/ Alice\n\nconst p2 = new Person();\nconsole.log(p2.name); \/\/ Anonim\n<\/code><\/pre>\nPrivate Instance Fields (#<\/code> ile)<\/h4>\n#<\/code> \u00f6neki ile tan\u0131mlanan alanlar, s\u0131n\u0131f\u0131n d\u0131\u015f\u0131ndan eri\u015filemez. Bu, kaps\u00fclleme (encapsulation) prensibini g\u00fc\u00e7lendirir ve s\u0131n\u0131f\u0131n i\u00e7 i\u015fleyi\u015fini d\u0131\u015far\u0131dan gizler.<\/p>\n\nclass BankAccount {\n #balance = 0; \/\/ Private instance field\n\n constructor(initialBalance) {\n if (initialBalance > 0) {\n this.#balance = initialBalance;\n }\n }\n\n deposit(amount) {\n if (amount > 0) {\n this.#balance += amount;\n }\n }\n\n withdraw(amount) {\n if (amount > 0 && amount <= this.#balance) {\n this.#balance -= amount;\n return true;\n }\n return false;\n }\n\n getBalance() {\n return this.#balance;\n }\n}\n\nconst account = new BankAccount(100);\naccount.deposit(50);\nconsole.log(account.getBalance()); \/\/ 150\n\/\/ console.log(account.#balance); \/\/ SyntaxError: Private field '#balance' must be declared in an enclosing class\n<\/code><\/pre>\nStatic Public Fields<\/h4>\n
static<\/code> anahtar kelimesi ile tan\u0131mlanan alanlar, s\u0131n\u0131f\u0131n kendisine aittir, \u00f6rneklerine de\u011fil. S\u0131n\u0131f\u0131n t\u00fcm \u00f6rnekleri aras\u0131nda payla\u015f\u0131lan veriler veya sabitler i\u00e7in kullan\u0131\u015fl\u0131d\u0131r.<\/p>\n\nclass Config {\n static API_KEY = 'abc123xyz';\n static MAX_CONNECTIONS = 10;\n}\n\nconsole.log(Config.API_KEY); \/\/ abc123xyz\n\/\/ const myConfig = new Config();\n\/\/ console.log(myConfig.API_KEY); \/\/ undefined\n<\/code><\/pre>\nStatic Private Fields<\/h4>\n
Hem static<\/code> hem de #<\/code> ile tan\u0131mlanan alanlar, s\u0131n\u0131f\u0131n kendisine ait \u00f6zel alanlard\u0131r ve s\u0131n\u0131f\u0131n d\u0131\u015f\u0131ndan veya \u00f6rneklerinden eri\u015filemezler.<\/p>\n\nclass Logger {\n static #logCount = 0;\n\n static log(message) {\n console.log([LOG ${++this.#logCount}]: ${message}<\/code>);\n }\n}\n\nLogger.log('Uygulama ba\u015flat\u0131ld\u0131.'); \/\/ [LOG 1]: Uygulama ba\u015flat\u0131ld\u0131.\nLogger.log('Veritaban\u0131 ba\u011flant\u0131s\u0131 kuruldu.'); \/\/ [LOG 2]: Veritaban\u0131 ba\u011flant\u0131s\u0131 kuruldu.\n\/\/ console.log(Logger.#logCount); \/\/ SyntaxError\n<\/code><\/pre>\nKal\u0131t\u0131m (Inheritance)<\/h3>\n
Kal\u0131t\u0131m, bir s\u0131n\u0131f\u0131n ba\u015fka bir s\u0131n\u0131ftan \u00f6zellik ve metotlar\u0131 miras almas\u0131n\u0131 sa\u011flayan bir OOP prensibidir. Bu, kod tekrar\u0131n\u0131 azalt\u0131r ve daha hiyerar\u015fik bir yap\u0131 olu\u015fturur.<\/p>\n
extends<\/code> Anahtar Kelimesi<\/h4>\nBir s\u0131n\u0131f\u0131n ba\u015fka bir s\u0131n\u0131ftan miras almas\u0131 i\u00e7in extends<\/code> anahtar kelimesi kullan\u0131l\u0131r. Miras alan s\u0131n\u0131fa \"alt s\u0131n\u0131f\" (subclass) veya \"t\u00fcretilmi\u015f s\u0131n\u0131f\" (derived class), miras veren s\u0131n\u0131fa ise \"\u00fcst s\u0131n\u0131f\" (superclass) veya \"temel s\u0131n\u0131f\" (base class) denir.<\/p>\n\nclass Animal {\n constructor(name) {\n this.name = name;\n }\n\n speak() {\n console.log(${this.name} ses \u00e7\u0131kar\u0131yor.<\/code>);\n }\n}\n\nclass Dog extends Animal {\n constructor(name, breed) {\n super(name); \/\/ \u00dcst s\u0131n\u0131f\u0131n constructor'\u0131n\u0131 \u00e7a\u011f\u0131r\u0131r\n this.breed = breed;\n }\n\n bark() {\n console.log(${this.name} havl\u0131yor!<\/code>);\n }\n\n speak() { \/\/ Metot ge\u00e7ersiz k\u0131lma (method overriding)\n console.log(${this.name} bir k\u00f6pek gibi havl\u0131yor.<\/code>);\n }\n}\n\nconst myDog = new Dog('Buddy', 'Golden Retriever');\nmyDog.speak(); \/\/ Buddy bir k\u00f6pek gibi havl\u0131yor.\nmyDog.bark(); \/\/ Buddy havl\u0131yor!\nconsole.log(myDog.name); \/\/ Buddy\nconsole.log(myDog.breed); \/\/ Golden Retriever\n<\/code><\/pre>\nsuper<\/code> Anahtar Kelimesi<\/h4>\nsuper<\/code> anahtar kelimesi, alt s\u0131n\u0131f i\u00e7inde \u00fcst s\u0131n\u0131f\u0131n metotlar\u0131na veya constructor'\u0131na eri\u015fmek i\u00e7in kullan\u0131l\u0131r.
\n* super()<\/code>:<\/strong> Alt s\u0131n\u0131f\u0131n constructor<\/code> metodunda, \u00fcst s\u0131n\u0131f\u0131n constructor<\/code> metodunu \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131l\u0131r. \u00d6nemli:<\/strong> Alt s\u0131n\u0131f\u0131n constructor<\/code>'\u0131 i\u00e7inde this<\/code> kullan\u0131lmadan \u00f6nce super()<\/code> \u00e7a\u011fr\u0131lmal\u0131d\u0131r, aksi takdirde bir ReferenceError<\/code> f\u0131rlat\u0131l\u0131r.
\n* super.methodName()<\/code>:<\/strong> Alt s\u0131n\u0131f metotlar\u0131 i\u00e7inde, \u00fcst s\u0131n\u0131f\u0131n ayn\u0131 isimdeki metodunu \u00e7a\u011f\u0131rmak i\u00e7in kullan\u0131l\u0131r. Bu, metot ge\u00e7ersiz k\u0131lma (method overriding) senaryolar\u0131nda \u00fcst s\u0131n\u0131f\u0131n orijinal davran\u0131\u015f\u0131n\u0131 geni\u015fletmek i\u00e7in faydal\u0131d\u0131r.<\/p>\nMetot Ge\u00e7ersiz K\u0131lma (Method Overriding)<\/h4>\n
Alt s\u0131n\u0131flar, \u00fcst s\u0131n\u0131ftan miras ald\u0131klar\u0131 metotlar\u0131 kendi ihtiya\u00e7lar\u0131na g\u00f6re yeniden tan\u0131mlayabilirler. Yukar\u0131daki Dog<\/code> s\u0131n\u0131f\u0131ndaki speak()<\/code> metodu buna bir \u00f6rnektir. Alt s\u0131n\u0131fta tan\u0131mlanan metot, \u00fcst s\u0131n\u0131ftaki ayn\u0131 isimdeki metodu ge\u00e7ersiz k\u0131lar.<\/p>\ninstanceof<\/code> Operat\u00f6r\u00fc<\/h4>\ninstanceof<\/code> operat\u00f6r\u00fc, bir nesnenin belirli bir s\u0131n\u0131f\u0131n veya onun t\u00fcretilmi\u015f bir s\u0131n\u0131f\u0131n\u0131n \u00f6rne\u011fi olup olmad\u0131\u011f\u0131n\u0131 kontrol etmek i\u00e7in kullan\u0131l\u0131r.<\/p>\n\nconst animal = new Animal('Leo');\nconst dog = new Dog('Max', 'Labrador');\n\nconsole.log(animal instanceof Animal); \/\/ true\nconsole.log(dog instanceof Animal); \/\/ true (Dog, Animal'dan miras al\u0131r)\nconsole.log(dog instanceof Dog); \/\/ true\nconsole.log(animal instanceof Dog); \/\/ false\n<\/code><\/pre>\nStatik Metotlar ve \u00d6zellikler<\/h3>\n
static<\/code> anahtar kelimesi, bir metoda veya \u00f6zelli\u011fe s\u0131n\u0131f\u0131n kendisi \u00fczerinden eri\u015filmesini sa\u011flar, s\u0131n\u0131f\u0131n \u00f6rnekleri \u00fczerinden de\u011fil. Statik \u00fcyeler, s\u0131n\u0131f\u0131n t\u00fcm \u00f6rnekleri aras\u0131nda payla\u015f\u0131lan i\u015flevsellik veya veriler i\u00e7in kullan\u0131l\u0131r.<\/p>\nStatik Metotlar<\/h4>\n
Yard\u0131mc\u0131 fonksiyonlar, fabrika metotlar\u0131 veya s\u0131n\u0131f d\u00fczeyinde operasyonlar i\u00e7in idealdir.<\/p>\n
\nclass MathHelper {\n static PI = 3.14159; \/\/ Statik \u00f6zellik (ES2022)\n\n static add(a, b) {\n return a + b;\n }\n\n static multiply(a, b) {\n return a * b;\n }\n\n static calculateCircleArea(radius) {\n return this.PI radius <\/em> radius; \/\/ Statik \u00f6zelliklere this.PI ile eri\u015fim\n }\n}\n\nconsole.log(MathHelper.add(5, 3)); \/\/ 8\nconsole.log(MathHelper.multiply(4, 2)); \/\/ 8\nconsole.log(MathHelper.PI); \/\/ 3.14159\nconsole.log(MathHelper.calculateCircleArea(5)); \/\/ 78.53975\n\/\/ const calculator = new MathHelper();\n\/\/ calculator.add(1, 2); \/\/ TypeError: calculator.add is not a function\n<\/code><\/pre>\nStatik metotlar i\u00e7inde this<\/code> anahtar kelimesi, s\u0131n\u0131f\u0131n kendisine referans eder. Bu nedenle, this.PI<\/code> \u00f6rne\u011finde oldu\u011fu gibi di\u011fer statik \u00fcyelere eri\u015fmek i\u00e7in kullan\u0131labilir.<\/p>\nGetter ve Setter Metotlar\u0131<\/h3>\n
Getter ve setter metotlar\u0131, bir s\u0131n\u0131f\u0131n \u00f6zelliklerine kontroll\u00fc bir \u015fekilde eri\u015fim sa\u011flamak veya onlar\u0131 de\u011fi\u015ftirmek i\u00e7in kullan\u0131l\u0131r. Bu, veriye eri\u015fim ve de\u011fi\u015ftirme s\u0131ras\u0131nda validasyon, formatlama veya yan etkileri y\u00f6netmek i\u00e7in faydal\u0131d\u0131r.<\/p>\n
get<\/code> ve set<\/code> Anahtar Kelimeleri<\/h4>\n* get<\/code>:<\/strong> Bir \u00f6zelli\u011fin de\u011ferini okumak i\u00e7in kullan\u0131l\u0131r. Bir fonksiyon gibi tan\u0131mlan\u0131r ancak bir \u00f6zelli\u011fe eri\u015fir gibi \u00e7a\u011fr\u0131l\u0131r.
\n* set<\/code>:<\/strong> Bir \u00f6zelli\u011fin de\u011ferini ayarlamak i\u00e7in kullan\u0131l\u0131r. Bir parametre al\u0131r ve atama i\u015flemi s\u0131ras\u0131nda \u00e7a\u011fr\u0131l\u0131r.<\/p>\n\nclass User {\n constructor(firstName, lastName) {\n this.firstName = firstName;\n this.lastName = lastName;\n }\n\n get fullName() { \/\/ Getter\n return ${this.firstName} ${this.lastName}<\/code>;\n }\n\n set fullName(newValue) { \/\/ Setter\n const parts = newValue.split(' ');\n this.firstName = parts[0];\n this.lastName = parts[1];\n }\n}\n\nconst user = new User('Ali', 'Can');\nconsole.log(user.fullName); \/\/ Ali Can\n\nuser.fullName = 'Ay\u015fe Y\u0131lmaz';\nconsole.log(user.firstName); \/\/ Ay\u015fe\nconsole.log(user.lastName); \/\/ Y\u0131lmaz\n<\/code><\/pre>\nGetter ve setter'lar, do\u011frudan bir \u00f6zellik gibi davrand\u0131klar\u0131 i\u00e7in \"sanal \u00f6zellikler\" olarak da d\u00fc\u015f\u00fcn\u00fclebilirler. \u00d6zellikle, \u00f6zel (private) alanlarla birlikte kullan\u0131ld\u0131\u011f\u0131nda kaps\u00fcllemeyi g\u00fc\u00e7lendirirler.<\/p>\n
\nclass Product {\n #price; \/\/ Private field\n\n constructor(name, price) {\n this.name = name;\n this.#price = 0; \/\/ Ba\u015flang\u0131\u00e7 de\u011feri\n this.price = price; \/\/ Setter'\u0131 \u00e7a\u011f\u0131r\u0131r\n }\n\n get price() {\n return this.#price;\n }\n\n set price(newPrice) {\n if (newPrice > 0) {\n this.#price = newPrice;\n } else {\n console.warn('Fiyat s\u0131f\u0131rdan b\u00fcy\u00fck olmal\u0131d\u0131r.');\n }\n }\n}\n\nconst item = new Product('Laptop', 1200);\nconsole.log(item.price); \/\/ 1200\n\nitem.price = -100; \/\/ Fiyat s\u0131f\u0131rdan b\u00fcy\u00fck olmal\u0131d\u0131r.\nconsole.log(item.price); \/\/ 1200 (de\u011fi\u015fmedi)\n\nitem.price = 1500;\nconsole.log(item.price); \/\/ 1500\n<\/code><\/pre>\n\u00d6zel (Private) Metotlar ve \u00d6zellikler (ES2022)<\/h3>\n
ES2022 ile gelen \u00f6zel alanlar ve metotlar, bir s\u0131n\u0131f\u0131n i\u00e7 i\u015fleyi\u015fini d\u0131\u015f d\u00fcnyadan tamamen gizlemek i\u00e7in kullan\u0131l\u0131r. #<\/code> (hash) \u00f6neki ile tan\u0131mlan\u0131rlar. Bu, kaps\u00fclleme prensibini sa\u011flaman\u0131n en g\u00fc\u00e7l\u00fc yoludur.<\/p>\n\u00d6zel Metotlar<\/h4>\n
Bir s\u0131n\u0131f\u0131n i\u00e7 yard\u0131mc\u0131 metotlar\u0131 veya sadece s\u0131n\u0131f\u0131n kendi i\u00e7inde kullan\u0131lmas\u0131 gereken i\u015flevler i\u00e7in kullan\u0131l\u0131r.<\/p>\n
\nclass UserAuthenticator {\n #password; \/\/ Private field\n #salt; \/\/ Private field\n\n constructor(username, password) {\n this.username = username;\n this.#salt = this.#generateSalt();\n this.#password = this.#hashPassword(password, this.#salt);\n }\n\n #generateSalt() { \/\/ Private method\n \/\/ Ger\u00e7ek bir uygulamada daha karma\u015f\u0131k bir salt \u00fcretilir\n return Math.random().toString(36).substring(2, 15);\n }\n\n #hashPassword(password, salt) { \/\/ Private method\n \/\/ Ger\u00e7ek bir uygulamada kriptografik hash fonksiyonu kullan\u0131l\u0131r\n return hashed_${password}_with_${salt}<\/code>;\n }\n\n authenticate(username, password) {\n const hashedAttempt = this.#hashPassword(password, this.#salt);\n return this.username === username && this.#password === hashedAttempt;\n }\n}\n\nconst auth = new UserAuthenticator('admin', 'mysecretpassword');\nconsole.log(auth.authenticate('admin', 'mysecretpassword')); \/\/ true\nconsole.log(auth.authenticate('admin', 'wrongpassword')); \/\/ false\n\/\/ auth.#generateSalt(); \/\/ SyntaxError\n<\/code><\/pre>\n\u00d6zel metotlar ve alanlar, s\u0131n\u0131f\u0131n API'sini daha temiz tutar ve dahili implementasyon detaylar\u0131n\u0131n d\u0131\u015far\u0131dan de\u011fi\u015ftirilmesini veya yanl\u0131\u015f kullan\u0131lmas\u0131n\u0131 engeller.<\/p>\n
S\u0131n\u0131flar ve Fonksiyonlar Aras\u0131ndaki Farklar<\/h3>\n
JavaScript'te s\u0131n\u0131flar, fonksiyonlara \u00e7ok benzer g\u00f6r\u00fcnse de, baz\u0131 \u00f6nemli farkl\u0131l\u0131klar\u0131 vard\u0131r:<\/p>\n
1. new<\/code> Anahtar Kelimesi ile \u00c7a\u011fr\u0131lma:<\/strong> S\u0131n\u0131flar, new<\/code> anahtar kelimesi olmadan \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bir TypeError<\/code> hatas\u0131 f\u0131rlat\u0131r. Fonksiyonlar ise, new<\/code> olmadan \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda bir constructor gibi davranmazlar ve this<\/code> ba\u011flam\u0131 farkl\u0131 olur (genellikle global objeye veya undefined<\/code>'a ba\u011flan\u0131r).<\/p>\n\n class MyClass {}\n \/\/ MyClass(); \/\/ TypeError: Class constructor MyClass cannot be invoked without 'new'\n\n function MyFunction() {}\n MyFunction(); \/\/ Hata vermez, ancak this global objeye ba\u011flan\u0131r.\n <\/code><\/pre>\n2. hoisting<\/code> Davran\u0131\u015f\u0131:<\/strong> Fonksiyon bildirimleri hoist<\/code> edilir (tan\u0131mland\u0131klar\u0131 kapsam\u0131n en \u00fcst\u00fcne ta\u015f\u0131n\u0131r gibi davran\u0131r), bu da onlar\u0131 tan\u0131mlanmadan \u00f6nce kullanabilece\u011finiz anlam\u0131na gelir. S\u0131n\u0131f bildirimleri ise hoist<\/code> edilmez. Onlar\u0131 kullanmadan \u00f6nce tan\u0131mlaman\u0131z gerekir.<\/p>\n\n \/\/ console.log(MyClass); \/\/ ReferenceError\n class MyClass {}\n\n console.log(MyFunction); \/\/ [Function: MyFunction] (hoisted)\n function MyFunction() {}\n <\/code><\/pre>\n3. strict mode<\/code>:<\/strong> S\u0131n\u0131f g\u00f6vdeleri otomatik olarak strict mode<\/code>'da \u00e7al\u0131\u015f\u0131r. Bu, \u00f6rne\u011fin, this<\/code> ba\u011flam\u0131n\u0131n undefined<\/code> olabilece\u011fi ve baz\u0131 \"k\u00f6t\u00fc par\u00e7alar\u0131n\" (bad parts) yasakland\u0131\u011f\u0131 anlam\u0131na gelir. Fonksiyonlar i\u00e7in strict mode<\/code>'u a\u00e7\u0131k\u00e7a belirtmeniz gerekir ('use strict';<\/code>).<\/p>\nSoyut S\u0131n\u0131flar ve Aray\u00fczler (JavaScript'te Do\u011frudan Olmasa da Yakla\u015f\u0131mlar)<\/h3>\n
Di\u011fer baz\u0131 nesne y\u00f6nelimli dillerde soyut s\u0131n\u0131flar (abstract classes) ve aray\u00fczler (interfaces) gibi kavramlar bulunur.
\n* Soyut S\u0131n\u0131f:<\/strong> Do\u011frudan \u00f6rne\u011fi olu\u015fturulamayan, ancak alt s\u0131n\u0131flar taraf\u0131ndan miras al\u0131nmas\u0131 gereken metotlar\u0131 veya \u00f6zellikleri tan\u0131mlayan bir s\u0131n\u0131ft\u0131r. Genellikle baz\u0131 metotlar\u0131 soyut (implementasyonu olmayan) olarak i\u015faretler.
\n* Aray\u00fcz:<\/strong> Bir s\u0131n\u0131f\u0131n uygulamas\u0131 gereken metot imzalar\u0131n\u0131 (method signatures) tan\u0131mlayan bir s\u00f6zle\u015fmedir.<\/p>\nJavaScript'te bu kavramlar do\u011frudan yerle\u015fik de\u011fildir. Ancak, bu davran\u0131\u015flar\u0131 taklit etmek i\u00e7in \u00e7e\u015fitli yakla\u015f\u0131mlar kullan\u0131labilir:<\/p>\n
1. Hata F\u0131rlatma:<\/strong> Soyut bir metot gibi davranmas\u0131 gereken bir metot i\u00e7inde, do\u011frudan bir hata f\u0131rlat\u0131labilir.<\/p>\n\n class AbstractShape {\n draw() {\n throw new Error('Metot \"draw()\" alt s\u0131n\u0131flar taraf\u0131ndan uygulanmal\u0131d\u0131r.');\n }\n }\n\n class Circle extends AbstractShape {\n \/\/ draw() { console.log('\u00c7ember \u00e7iziliyor.'); }\n }\n\n \/\/ const shape = new AbstractShape(); \/\/ Do\u011frudan hata f\u0131rlatmaz, ama draw() \u00e7a\u011fr\u0131ld\u0131\u011f\u0131nda f\u0131rlat\u0131r\n const circle = new Circle();\n \/\/ circle.draw(); \/\/ Error: Metot \"draw()\" alt s\u0131n\u0131flar taraf\u0131ndan uygulanmal\u0131d\u0131r.\n <\/code><\/pre>\n2. Mixin'ler:<\/strong> Fonksiyonlar arac\u0131l\u0131\u011f\u0131yla s\u0131n\u0131flara belirli davran\u0131\u015flar\u0131 \"kar\u0131\u015ft\u0131rmak\" (mix in) i\u00e7in kullan\u0131l\u0131r. Bu, \u00e7oklu miras\u0131n bir formunu taklit etmeye yard\u0131mc\u0131 olabilir.<\/p>\nS\u0131n\u0131flar\u0131n Kullan\u0131m Alanlar\u0131 ve Tasar\u0131m Desenleri<\/h3>\n
JavaScript s\u0131n\u0131flar\u0131, modern web geli\u015ftirmede bir\u00e7ok senaryoda kullan\u0131l\u0131r ve \u00e7e\u015fitli tasar\u0131m desenlerinin uygulanmas\u0131na olanak tan\u0131r:<\/p>\n
1. Veri Modelleme:<\/strong> Uygulaman\u0131zdaki varl\u0131klar\u0131 (\u00f6rne\u011fin, User<\/code>, Product<\/code>, Order<\/code>) temsil etmek i\u00e7in s\u0131n\u0131flar kullan\u0131labilir. Bu, verilerin yap\u0131s\u0131n\u0131 ve bunlarla ili\u015fkili davran\u0131\u015flar\u0131 tan\u0131mlar.<\/p>\n\n class Product {\n constructor(id, name, price) {\n this.id = id;\n this.name = name;\n this.price = price;\n }\n\n getFormattedPrice() {\n return $${this.price.toFixed(2)}<\/code>;\n }\n }\n <\/code><\/pre>\n2. UI Bile\u015fenleri:<\/strong> \u00d6zellikle React gibi k\u00fct\u00fcphanelerin eski s\u00fcr\u00fcmlerinde veya web bile\u015fenleri (Web Components) geli\u015ftirirken, g\u00f6rsel bile\u015fenleri s\u0131n\u0131flar arac\u0131l\u0131\u011f\u0131yla olu\u015fturmak yayg\u0131nd\u0131r.
\n3. Fabrika Desenleri:<\/strong> Bir nesne olu\u015fturma s\u00fcrecini soyutlamak i\u00e7in statik metotlar veya ayr\u0131 bir fabrika s\u0131n\u0131f\u0131 kullan\u0131labilir.<\/p>\n\n class Vehicle { \/ ... <\/em>\/ }\n class Car extends Vehicle { \/ ... <\/em>\/ }\n class Truck extends Vehicle { \/ ... <\/em>\/ }\n\n class VehicleFactory {\n static createVehicle(type, ...args) {\n switch (type) {\n case 'car': return new Car(...args);\n case 'truck': return new Truck(...args);\n default: throw new Error('Bilinmeyen ara\u00e7 tipi');\n }\n }\n }\n\n const myCar = VehicleFactory.createVehicle('car', 'Toyota', 'Corolla');\n <\/code><\/pre>\n4. Singleton Desenleri:<\/strong> Bir s\u0131n\u0131f\u0131n yaln\u0131zca tek bir \u00f6rne\u011finin olmas\u0131n\u0131 sa\u011flamak i\u00e7in kullan\u0131l\u0131r. Statik bir alan ve metot ile uygulanabilir.<\/p>\n\n class AppConfig {\n static #instance = null;\n #settings = {};\n\n constructor() {\n if (AppConfig.#instance) {\n return AppConfig.#instance;\n }\n \/\/ Ayarlar\u0131 y\u00fckle\n this.#settings = { theme: 'dark', language: 'tr' };\n AppConfig.#instance = this;\n }\n\n static getInstance() {\n if (!AppConfig.#instance) {\n AppConfig.#instance = new AppConfig();\n }\n return AppConfig.#instance;\n }\n\n getSetting(key) {\n return this.#settings[key];\n }\n }\n\n const config1 = AppConfig.getInstance();\n const config2 = AppConfig.getInstance();\n console.log(config1 === config2); \/\/ true\n <\/code><\/pre>\nS\u0131n\u0131flar\u0131n Avantajlar\u0131 ve Dezavantajlar\u0131<\/h3>\n
JavaScript s\u0131n\u0131flar\u0131n\u0131n kullan\u0131m\u0131, geli\u015ftirme s\u00fcrecine hem avantajlar hem de baz\u0131 dezavantajlar getirir.<\/p>\n
Avantajlar:<\/h4>\n
1. Okunabilirlik ve Anla\u015f\u0131l\u0131rl\u0131k:<\/strong> Geleneksel OOP dillerinden gelen geli\u015ftiriciler i\u00e7in daha tan\u0131d\u0131k bir s\u00f6zdizimi sunar, bu da kodu daha kolay okuyup anlamay\u0131 sa\u011flar.
\n2. Yap\u0131sal Tutarl\u0131l\u0131k:<\/strong> Nesne y\u00f6nelimli bir yap\u0131y\u0131 daha net bir \u015fekilde ifade etmeyi sa\u011flar, bu da b\u00fcy\u00fck ve karma\u015f\u0131k projelerde kodun d\u00fczenini ve bak\u0131m\u0131n\u0131 kolayla\u015ft\u0131r\u0131r.
\n3. Kal\u0131t\u0131m Kolayl\u0131\u011f\u0131:<\/strong> extends<\/code> ve super<\/code> anahtar kelimeleri ile miras alma mekanizmas\u0131n\u0131 basitle\u015ftirir, kod tekrar\u0131n\u0131 azalt\u0131r.
\n4. Kaps\u00fclleme:<\/strong> \u00d6zel (private) alanlar ve metotlar sayesinde, s\u0131n\u0131f\u0131n dahili implementasyon detaylar\u0131n\u0131 d\u0131\u015far\u0131dan gizleyerek daha sa\u011flam ve g\u00fcvenli kod yazmay\u0131 te\u015fvik eder.
\n5. Geli\u015fmi\u015f \u00d6zellikler:<\/strong> Getter\/setter'lar, statik metotlar ve s\u0131n\u0131f alanlar\u0131 gibi \u00f6zellikler, s\u0131n\u0131f tasar\u0131m\u0131n\u0131 daha esnek ve g\u00fc\u00e7l\u00fc hale getirir.<\/p>\nDezavantajlar:<\/h4>\n
1. this<\/code> Ba\u011flam\u0131 Karma\u015fas\u0131:<\/strong> JavaScript'in esnek this<\/code> ba\u011flama mekanizmas\u0131, s\u0131n\u0131f metotlar\u0131n\u0131n callback olarak kullan\u0131ld\u0131\u011f\u0131 durumlarda beklenmedik davran\u0131\u015flara yol a\u00e7abilir. Bu durum bind()<\/code>, arrow fonksiyonlar veya s\u0131n\u0131f alanlar\u0131 ile \u00e7\u00f6z\u00fclebilse de, ba\u015flang\u0131\u00e7ta kafa kar\u0131\u015ft\u0131r\u0131c\u0131 olabilir.
\n2. Prototip Miras\u0131n Gizlenmesi:<\/strong> S\u0131n\u0131flar, prototip tabanl\u0131 miras\u0131n bir soyutlamas\u0131d\u0131r. Bu, baz\u0131 geli\u015ftiricilerin JavaScript'in temel miras mekanizmas\u0131n\u0131 tam olarak anlamadan s\u0131n\u0131flar\u0131 kullanmas\u0131na neden olabilir. Derinlemesine bilgi eksikli\u011fi, daha karma\u015f\u0131k senaryolarda sorunlara yol a\u00e7abilir.
\n3. A\u015f\u0131r\u0131 Kal\u0131t\u0131m Riski:<\/strong> S\u0131n\u0131f tabanl\u0131 kal\u0131t\u0131m, bazen gereksiz veya karma\u015f\u0131k bir s\u0131n\u0131f hiyerar\u015fisine yol a\u00e7abilir (\"kompozisyon yerine kal\u0131t\u0131m\" tuza\u011f\u0131). Bu, kodun esnekli\u011fini azaltabilir ve bak\u0131m\u0131 zorla\u015ft\u0131rabilir.
\n4. hoisting<\/code> Yoklu\u011fu:<\/strong> Fonksiyon bildirimlerinin aksine, s\u0131n\u0131f bildirimleri hoist<\/code> edilmez. Bu, kod yazarken s\u0131n\u0131f tan\u0131mlar\u0131n\u0131n s\u0131ras\u0131na dikkat etmeyi gerektirir.<\/p>\nSonu\u00e7: JavaScript'teki S\u0131n\u0131flar\u0131n Modern Geli\u015ftirmedeki Yeri<\/h3>\n
JavaScript s\u0131n\u0131flar\u0131, dilin evriminde \u00f6nemli bir d\u00f6n\u00fcm noktas\u0131d\u0131r. Prototip tabanl\u0131 miras\u0131n g\u00fcc\u00fcn\u00fc daha tan\u0131d\u0131k ve okunabilir bir s\u00f6zdizimiyle sunarak, JavaScript'i di\u011fer nesne y\u00f6nelimli dillerle daha uyumlu hale getirmi\u015ftir. ES6'dan bu yana s\u00fcrekli eklenen s\u0131n\u0131f alanlar\u0131, \u00f6zel metotlar ve di\u011fer \u00f6zellikler, s\u0131n\u0131flar\u0131 daha g\u00fc\u00e7l\u00fc ve kaps\u00fclleme yetenekleri a\u00e7\u0131s\u0131ndan daha zengin hale getirmi\u015ftir.<\/p>\n
S\u0131n\u0131flar, b\u00fcy\u00fck \u00f6l\u00e7ekli uygulamalar\u0131n geli\u015ftirilmesinde kodun yap\u0131land\u0131r\u0131lmas\u0131na, d\u00fczenlenmesine ve s\u00fcrd\u00fcr\u00fclebilirli\u011fine b\u00fcy\u00fck katk\u0131 sa\u011flar. Veri modellerinden UI bile\u015fenlerine, karma\u015f\u0131k i\u015f mant\u0131klar\u0131ndan tasar\u0131m desenlerinin uygulanmas\u0131na kadar geni\u015f bir kullan\u0131m alan\u0131na sahiptirler.<\/p>\n
Ancak, s\u0131n\u0131flar\u0131n sadece bir sentaktik \u015feker oldu\u011funu ve JavaScript'in temelinde yatan prototip mekanizmas\u0131n\u0131 de\u011fi\u015ftirmedi\u011fini unutmamak \u00f6nemlidir. Bu temel anlay\u0131\u015f, this<\/code> ba\u011flam\u0131 gibi potansiyel tuzaklardan ka\u00e7\u0131nmaya ve dilin tam potansiyelini kullanmaya yard\u0131mc\u0131 olur. Do\u011fru kullan\u0131ld\u0131\u011f\u0131nda, JavaScript s\u0131n\u0131flar\u0131 modern, okunabilir ve bak\u0131m\u0131 kolay kod yazmak i\u00e7in g\u00fc\u00e7l\u00fc bir ara\u00e7t\u0131r. Geli\u015ftiricilerin, s\u0131n\u0131flar\u0131n sundu\u011fu kolayl\u0131klar\u0131 ve avantajlar\u0131 benimserken, alt\u0131nda yatan prensipleri de g\u00f6z ard\u0131 etmemeleri, daha sa\u011flam ve esnek uygulamalar geli\u015ftirmeleri i\u00e7in kritik \u00f6neme sahiptir.<\/body><\/p>\n","protected":false},"excerpt":{"rendered":"JavaScript’te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber\nGiri\u015f: JavaScript’in Evrimi ve S\u0131n\u0131flar\u0131n Yeri\nJavaScript, internetin dinamik y\u00fcz\u00fcn\u00fc","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"csco_page_header_type":"","csco_page_load_nextpost":"","csco_page_subscribe_form":"","csco_page_contact_form":"","footnotes":""},"categories":[129],"tags":[],"class_list":{"0":"post-33692","1":"post","2":"type-post","3":"status-publish","4":"format-standard","6":"category-javascript","7":"cs-entry","8":"cs-video-wrap"},"yoast_head":"\nJavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:locale\" content=\"tr_TR\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber\" \/>\n<meta property=\"og:description\" content=\"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber Giri\u015f: JavaScript'in Evrimi ve S\u0131n\u0131flar\u0131n Yeri JavaScript, internetin dinamik y\u00fcz\u00fcn\u00fc\" \/>\n<meta property=\"og:url\" content=\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\" \/>\n<meta property=\"og:site_name\" content=\"Kodlar\u0131n Gizemli D\u00fcnyas\u0131\" \/>\n<meta property=\"article:published_time\" content=\"2025-11-05T21:40:47+00:00\" \/>\n<meta name=\"author\" content=\"Fatih Soysal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Yazan:\" \/>\n\t<meta name=\"twitter:data1\" content=\"Fatih Soysal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tahmini okuma s\u00fcresi\" \/>\n\t<meta name=\"twitter:data2\" content=\"14 dakika\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\"},\"author\":{\"name\":\"Fatih Soysal\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"headline\":\"JavaScript’te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber\",\"datePublished\":\"2025-11-05T21:40:47+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\"},\"wordCount\":2712,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"articleSection\":[\"Javascript\"],\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#respond\"]}],\"copyrightYear\":\"2025\",\"copyrightHolder\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\",\"name\":\"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131\",\"isPartOf\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\"},\"datePublished\":\"2025-11-05T21:40:47+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#breadcrumb\"},\"inLanguage\":\"tr\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/fatihsoysal.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript’te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#website\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/\",\"name\":\"Fatihsoysal.com\",\"description\":\"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim\",\"publisher\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"tr\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1\",\"name\":\"Fatih Soysal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"tr\",\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"contentUrl\":\"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png\",\"width\":512,\"height\":512,\"caption\":\"Fatih Soysal\"},\"logo\":{\"@id\":\"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/\"},\"description\":\"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.\",\"url\":\"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/","og_locale":"tr_TR","og_type":"article","og_title":"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber","og_description":"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber Giri\u015f: JavaScript'in Evrimi ve S\u0131n\u0131flar\u0131n Yeri JavaScript, internetin dinamik y\u00fcz\u00fcn\u00fc","og_url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/","og_site_name":"Kodlar\u0131n Gizemli D\u00fcnyas\u0131","article_published_time":"2025-11-05T21:40:47+00:00","author":"Fatih Soysal","twitter_card":"summary_large_image","twitter_misc":{"Yazan:":"Fatih Soysal","Tahmini okuma s\u00fcresi":"14 dakika"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#article","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/"},"author":{"name":"Fatih Soysal","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"headline":"JavaScript’te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber","datePublished":"2025-11-05T21:40:47+00:00","mainEntityOfPage":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/"},"wordCount":2712,"commentCount":0,"publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"articleSection":["Javascript"],"inLanguage":"tr","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#respond"]}],"copyrightYear":"2025","copyrightHolder":{"@id":"https:\/\/fatihsoysal.com\/blog\/#organization"}},{"@type":"WebPage","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/","url":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/","name":"JavaScript'te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber - Kodlar\u0131n Gizemli D\u00fcnyas\u0131","isPartOf":{"@id":"https:\/\/fatihsoysal.com\/blog\/#website"},"datePublished":"2025-11-05T21:40:47+00:00","breadcrumb":{"@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#breadcrumb"},"inLanguage":"tr","potentialAction":[{"@type":"ReadAction","target":["https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/fatihsoysal.com\/blog\/javascriptte-siniflari-anlamak-kapsamli-bir-rehber\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/fatihsoysal.com\/blog\/"},{"@type":"ListItem","position":2,"name":"JavaScript’te S\u0131n\u0131flar\u0131 Anlamak: Kapsaml\u0131 Bir Rehber"}]},{"@type":"WebSite","@id":"https:\/\/fatihsoysal.com\/blog\/#website","url":"https:\/\/fatihsoysal.com\/blog\/","name":"Fatihsoysal.com","description":"Blog - Yaz\u0131l\u0131m D\u00fcnyas\u0131 Tecr\u00fcbelerim","publisher":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/fatihsoysal.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"tr"},{"@type":["Person","Organization"],"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/002a254750921dcfd568a99e48240dd1","name":"Fatih Soysal","image":{"@type":"ImageObject","inLanguage":"tr","@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","contentUrl":"https:\/\/fatihsoysal.com\/blog\/wp-content\/uploads\/2024\/04\/cropped-replicate-prediction-3kgg1hgjn5rgp0cf0p5tr0jw7w-1.png","width":512,"height":512,"caption":"Fatih Soysal"},"logo":{"@id":"https:\/\/fatihsoysal.com\/blog\/#\/schema\/person\/image\/"},"description":"Kullan\u0131m ve kodlama m\u00fckemmeliyetini odak alan uygulamalar olu\u015fturma deneyimine sahip, profesyonel olarak 15+ y\u0131l \u00fczeri deneyime sahip bir yaz\u0131l\u0131m m\u00fchendisi.","url":"https:\/\/fatihsoysal.com\/blog\/author\/fatihsoysal\/"}]}},"yoast_meta":{"yoast_wpseo_title":"","yoast_wpseo_metadesc":"","yoast_wpseo_canonical":""},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33692","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/comments?post=33692"}],"version-history":[{"count":1,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33692\/revisions"}],"predecessor-version":[{"id":33693,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/posts\/33692\/revisions\/33693"}],"wp:attachment":[{"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/media?parent=33692"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/categories?post=33692"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/fatihsoysal.com\/blog\/wp-json\/wp\/v2\/tags?post=33692"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}