AST Explorer JS Code AST

JAVASCRIPT’IN TARIHÇESI

Abstract Syntax Tree (AST) Nedir?

Bir kaç gündür Tree(Ağaçlar) ile ilgili algoritmalardan bahsediyorduk. Örneğin: Ağaç(Tree) Yapısı Oluşturma. Ağaçların sıkça kullanıldığı bir alanda AST yani Soyut Sözdizimi Ağaçlarıdır.

AST soyut söz dizimi ağacı. Yazdığınız kod, script gibi belli bir syntax ve kurala uygun yazılmış metinlerin ağaç yapısında gösterim şeklidir. Bu ağacın her bir düğümü bu metinin parçalarıdır.

Örneğin basit bir JS kodu yazalım sum fonksiyonu

function sum(a,b){
return a+b;
}
console.log(sum(3,2));

Bu konuya Chrome JS Nasıl İşletir yazımın içerisinde AST’den biraz bahsetmişttim. JavaScript kaynak kodu pipeline içerisinde önce parser tarafından AST dönüştürüğünü daha sonrada Interpreter tarafından bytecode dönüştürülüp V8 veya Chakra, JavascriptCore, SpiderMonkey gibi JS Engine tarafından işletildiğini anlatmıştım. JS işletilmesi hakkında daha fazla bilgi edinmek için EventLoop, Heap ve Stackve Execution Context, Lexical Environment, Scope ve Clousure Anlamak yazılarımı okuyabilirsiniz.

JS Pipeline

Her neyse biz konumuza geri dönelim. Parser bizim toplama fonksiyonumuzu alıp arkaplanda makinenin anlayabileceği bir söz dizimine dönüştürür. Artık diğer bir program bu çıktıyı algılayıp işleyebilecek seviye gelir çünkü ağaç yapısına dönüşen kod üzerinde istenilen programlar çalıştırılabilir.

AST Çıktısı

ASTExplorer bu işlevi görselleştiren çok başarılı bir uygulama, bu uygulama içerisinden bir kaç görüntü ile durumu daha net anlatabileceğimi düşünüyorum. Aşağıdaki görüntülerde CSS, GLSL, Go, GraphQL, GraphVis, HandleBars, HTML ve birçok dilin aslında arkaplanda AST dönüştürebildiğini görebilirsiniz. Tabi her dilin kendine göre bir parser olması gerekiyor. Sağ kısımda da seçilen dile göre hangi parser’ların bunları AST çevirdiğini görebilirsiniz.

Programlama Dilleri ve Parser.

Okumaya Devam Et 😃

Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store