AST Explorer JS Code AST

JAVASCRIPT’IN TARIHÇESI

Abstract Syntax Tree (AST) Nedir?

Çok fazla kişinin adını çok duymadığı ama tüm programlama veya script dilllerinin çalıştırılmasında kullanılan veya üzerinde bir takım araçların çalıştırılması ile ilgili kaynakdan daha fazla bilgi almamızı sağlayan temel araçlardan birisi olan AST yani Abstract Syntax Tree üzerinde konuşacağız.

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.