ES6 Gelen Özellikler

Projenin oluşturulmsı

npm init komutunu kullanarak yeni bir node projesi başlatıyorum.

console


❯ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (es6-gelen-ozellikler) features-es6
version: (1.0.0) 
description: "ES6 Tanıyalım
entry point: (index.js) 
test command: 
git repository: 
keywords: es6
author: sefademirtas
license: (ISC) MIT
About to write to /Users/sefademirtas/Desktop/react-note/es6-gelen-ozellikler/package.json:

{
  "name": "features-es6",
  "version": "1.0.0",
  "description": "\"ES6 Tanıyalım",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "es6"
  ],
  "author": "sefademirtas",
  "license": "MIT"
}


Is this OK? (yes) y

package,json Yapılandırma

scripts değişiklik yaparak terminal komutlarımı program başlatırken daha proje için anlamlı hale getiriyorum. Yaptığım bu değişiklik npm start komutu terminale girildiğinde index.js dosyasını dikkate alarak projeyi başlatacaktır.

console

 "scripts": {
    "start": "node index"
  },

package.json dosyasına eğer oluşturduğum dosyalarını projemin herhangi br yerinde kullanmak istersem import keyword ünü kullanmak için types özelliğini module olarak dosyaya içerisine bildirebiliriz. Proje ilerledikçe bağımlılıklar eklenebilir projenin bağımlıkları ayrı olucan node_modules dosyasında bulunur. Ana dosya korunduğu sürece bu dosya silinmesi veya projenin başka ortamlara transferi gerçekleşse bile bu dosya transfer edilmesine gerek yoktur. package.json dosyasının bulunduğu dizinde npm install komutu kullanılarak. Dosya içerisindeki bağımlılıklar(dependencies) yüklenir.

console

{
  "name
  ": "features-es6",
  "version": "1.0.0",
  "description": "\"ES6 Tanıyalım",
  "main": "index.js",
  "type": "module",
  "scripts": {
    "start": "node index"
  },
  "keywords": [
    "es6"
  ],
  "author": "sefademirtas",
  "license": "MIT"
}

Projenin Oluşturulması

Bir sonraki aşamada ise kendi modülümü import ediyorum. functions.js basit bir dosya bu dosya içerisinde bazı fonksiyonlar tanımlayarak ES& nın özelliklerine değneceğim. Bu başlangıçları biraz uzun tutmamın sebebi ise neyin nasıl yapıldığını temelden anlayabilirsek üzerine inşası kolay olur. Düşüncesindeyim.

Kavramlar

imports Çalışılan dosya içerisine başka bir modülün dahil edileceğini belirtir. Dahil edilecek modülün içe aktarılacak ismi yazılır ve from kelimesinden sonra dosyanın path yazılır. İhtiyaçlarla birlikte *import ve dosyanın path de verilerek kullanılabilir.
export: Dosyada bulunan fonksiyonun, değerlerin vb. dışarı aktarılmasını sağlayan bir anahtar kelimedir. Sadeece export kelimesi kullanılırsa module kullanacak dosya name şeklinde projesşne dahil eder.
export defaul modül içerinden modüle import edildiğinde varsayılan olarak kullanılan birimdir.
backtick `` MACOS(alt ve , )ES& ile birlikte gelen string veya ifadelerde parametre elamanını istadiğiniz bir yerden kullanmamızı sağlar. ifade backtick içerisinde name kullanılır

functions.js

export default function sum(a, b) {
    return a + b;
}

//Arrow Functions
export const sumArrow = (a, b) => {
    return a + b;
}

// Tek satırda olması durumunda daha basit bir gösterim
export const extraction = (a, b) => a - b

index.js

import sum, { sumArrow } from "./functions.js";

console.log(sum(3,1));

//Arrow Function
console.log(sumArrow(3,1));

functions.js

const hello =(name)=> `Hello ${name}`
const title = "ES6 öğreniyorum."
const sum = (a, b) => a + b;
const lesson = {
    title: "React Öğreniyorum",
    author: "Sefa Demirtaş"
}

const lessons = [
    {
        title:"React Öğreniyorum.",
        author:"Sefa Demirtaş"
    },
    {
        title:"Java",
        author:"Sefa Demirtaş"
    }
]

export default hello;
export {
    title,
    sum,
    lesson,
    lessons
}

index.js

import hello, { title, lesson, sum, lessons } from "./functions.js";

console.log(hello("Sefa"));
console.log(sum(3, 2));
console.log(title);
console.log(lesson);
console.log(lessons);

console

Hello Sefa
5
ES6 öğreniyorum.
{ title: 'React Öğreniyorum', author: 'Sefa Demirtaş' }
[
  { title: 'React Öğreniyorum.', author: 'Sefa Demirtaş' },
  { title: 'Java', author: 'Sefa Demirtaş' }
]

Sefa DemirtaşSoftware DeveloperSend an email

Sefa Demirtaş

ESMAScript6(ES6)

ES6 Gelen Özellikler

Projenin oluşturulmsı

Projenin Oluşturulması

Kavramlar