DevCodeBlog

Anasayfa

Numpad Kullanımı

Published on Nisan 22, 2024

Giriş Arduino, elektronik projelerinizi kolayca kontrol etmenizi sağlayan bir platformdur. Bu makalede, Arduino ile bir numpad kullanarak çeşitli projelerde nasıl kullanabileceğinizi adım adım öğreneceksiniz. 1. Numpad Nedir? Numpad, klavyelerde bulunan…

Devamını okuyunuz…

Yorum Bırak

Arduino ile Step Motor Kullanımı

Published on Nisan 14, 2024

Adım Motorları: Çalışma Prensibi ve Uygulamaları Adım motorları, dijital kontrol sinyalleriyle dönme açısının kesin adımlarla kontrol edilebildiği elektromekanik bir cihazdır. Bu motorlar, her bir adımın tek bir adım ilerlemesine neden…

Devamını okuyunuz…

Yorum Bırak

TailwindCss Kurulum

Published on Mart 16, 2024

Node.js’yi yüklemek için aşağıdaki adımları izleyebilirsiniz: Resmi Node.js web sitesini ziyaret edin: İlk adım, Node.js web sitesine gitmektir. Node.js’i indirmek için en güvenli ve en güncel yöntem budur. Web sitesine…

Devamını okuyunuz…

Yorum Bırak

DHT 11 Kütüphanesi

Published on Mart 11, 2024

#include <LiquidCrystal.h>
#include <dht11.h> // dht11 kütüphanesini ekliyoruz.
int DHT11_pin=7; // DHT11_pin olarak Dijital 2'yi belirliyoruz.
dht11 DHT11_sensor; // DHT11_sensor adında bir DHT11 nesnesi oluşturduk.
const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;
// devcodeblog.com
LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {
  lcd.begin(16, 2);
}
void loop() {
  int chk = DHT11_sensor.read(DHT11_pin);
  lcd.print("Nem=");  
  lcd.print((float)DHT11_sensor.humidity, 2);
  lcd.setCursor(0, 1);
  lcd.print("Sicaklik="); 
  lcd.print((float)DHT11_sensor.temperature, 2);
  lcd.print("  ");
  delay(2000);
}

#include <LiquidCrystal.h>

#include <dht11.h> // dht11 kütüphanesini ekliyoruz.

int DHT11_pin=7; // DHT11_pin olarak Dijital 2'yi belirliyoruz.

dht11 DHT11_sensor; // DHT11_sensor adında bir DHT11 nesnesi oluşturduk.

const int rs = 12, en = 11, d4 = 5, d5 = 4, d6 = 3, d7 = 2;

// devcodeblog.com

LiquidCrystal lcd(rs, en, d4, d5, d6, d7);

void setup() {

lcd.begin(16, 2);

}

void loop() {

int chk = DHT11_sensor.read(DHT11_pin);

lcd.print("Nem=");

lcd.print((float)DHT11_sensor.humidity, 2);

lcd.setCursor(0, 1);

lcd.print("Sicaklik=");

lcd.print((float)DHT11_sensor.temperature, 2);

lcd.print(" ");

delay(2000);

}

Kaynak : Tıkla dht11-master

Yorum Bırak

JS – Rest Pattern ve Parametreler

Published on Şubat 17, 2024

Rest pattern ve rest parametreleri, programlamada sıkça kullanılan iki kavramdır. Her ikisi de verilerin işlenmesini ve yönetilmesini kolaylaştırır. Rest Pattern: Rest pattern, bir nesnenin veya dizinin kalan öğelerini tek bir…

Devamını okuyunuz…

Yorum Bırak

Js – Yıkım Genel

Published on Şubat 14, 2024

//1. Basit Dizi Yıkımı:

const arr = [1, 2, 3];

const a = arr[0];
const b = arr[1];
const c = arr[2];

// Ekrana sıradan dizi erişimi ile elemanları basar.
console.log(a, b, c); // 1 2 3

const [d, e, f] = arr;

// d,e,f değişkenlerini ekrana yazar.
console.log(d, e, f); // 1 2 3

//1. Basit Dizi Yıkımı:

const arr = [1, 2, 3];

const a = arr[0];

const b = arr[1];

const c = arr[2];

// Ekrana sıradan dizi erişimi ile elemanları basar.

console.log(a, b, c); // 1 2 3

const [d, e, f] = arr;

// d,e,f değişkenlerini ekrana yazar.

console.log(d, e, f); // 1 2 3

//2. Kalan Operatörü ile Kalan Elemanları Yakalamak:

const arr = [1, 2, 3, 4, 5];

const [x, y, ...z] = arr;

// x: 1, y: 2, z: [3, 4, 5]
console.log(x, y, z);

//2. Kalan Operatörü ile Kalan Elemanları Yakalamak:

const arr = [1, 2, 3, 4, 5];

const [x, y, ...z] = arr;

// x: 1, y: 2, z: [3, 4, 5]

console.log(x, y, z);

//3. Varsayılan Değerler ile Eleman Eksikliğini Yönetmek:
const arr = [1, 2];

const [a, b = 3, c = 4] = arr;

// a: 1, b: 2, c: 4
console.log(a, b, c);

//3. Varsayılan Değerler ile Eleman Eksikliğini Yönetmek:

const arr = [1, 2];

const [a, b = 3, c = 4] = arr;

// a: 1, b: 2, c: 4

console.log(a, b, c);

//4. Nesne Yıkımı:
const person = {
  name: "John Doe",
  age: 30,
  city: "İstanbul",
};

const { name, age } = person;

// name: "John Doe", age: 30
console.log(name, age);

//4. Nesne Yıkımı:

const person = {

age: 30,

city: "İstanbul",

};

const { name, age } = person;

// name: "John Doe", age: 30

console.log(name, age);

//5. İç İçe Dizi Yıkımı:
const arr = [[1, 2], [3, 4]];

const [[x, y], [a, b]] = arr;

// x: 1, y: 2, a: 3, b: 4
console.log(x, y, a, b);

//5. İç İçe Dizi Yıkımı:

const arr = [[1, 2], [3, 4]];

const [[x, y], [a, b]] = arr;

// x: 1, y: 2, a: 3, b: 4

console.log(x, y, a, b);

//6. Fonksiyon Parametresi Olarak Dizi Yıkımı:
function printNumbers([a, b, c]) {
  console.log(a, b, c);
}

const arr = [1, 2, 3];

printNumbers(arr); // 1 2 3

//6. Fonksiyon Parametresi Olarak Dizi Yıkımı:

function printNumbers([a, b, c]) {

console.log(a, b, c);

}

const arr = [1, 2, 3];

printNumbers(arr); // 1 2 3

//7. Dizi Elemanlarını Değiştirmek:
const arr = [1, 2, 3];

const [a, b, c] = arr;

[a, b, c] = [c, b, a];

// arr: [3, 2, 1]
console.log(arr);

//7. Dizi Elemanlarını Değiştirmek:

const arr = [1, 2, 3];

const [a, b, c] = arr;

[a, b, c] = [c, b, a];

// arr: [3, 2, 1]

console.log(arr);

//8. Nesne Özelliklerini Yeniden Adlandırmak:
const person = {
  firstName: "John",
  lastName: "Doe",
};

const { firstName: name, lastName: surname } = person;

// name: "John", surname: "Doe"
console.log(name, surname);

//8. Nesne Özelliklerini Yeniden Adlandırmak:

const person = {

firstName: "John",

lastName: "Doe",

};

const { firstName: name, lastName: surname } = person;

// name: "John", surname: "Doe"

console.log(name, surname);

//9. Karmaşık Nesne Yıkımı:
const person = {
  name: "John Doe",
  age: 30,
  address: {
    city: "İstanbul",
    country: "Türkiye",
  },
};

const { name, age, address: { city } } = person;

// name: "John Doe", age: 30, city: "İstanbul"
console.log(name, age, city);

//9. Karmaşık Nesne Yıkımı:

const person = {

age: 30,

address: {

city: "İstanbul",

country: "Türkiye",

};

const { name, age, address: { city } } = person;

// name: "John Doe", age: 30, city: "İstanbul"

console.log(name, age, city);

//10. Fonksiyon Dönüş Değerini Yıkmak:
function getPerson() {
  return {
    name: "John Doe",
    age: 30,
  };
}

const { name, age } = getPerson();

// name: "John Doe", age: 30
console.log(name, age);

//10. Fonksiyon Dönüş Değerini Yıkmak:

function getPerson() {

return {

age: 30,

};

}

const { name, age } = getPerson();

// name: "John Doe", age: 30

console.log(name, age);

Yorum Bırak

Js – Nesne Yıkımı

Published on Şubat 14, 2024

// Data needed for first part of the section
const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  openingHours: {
    thu: {
      open: 12,
      close: 22,
    },
    fri: {
      open: 11,
      close: 23,
    },
    sat: {
      open: 0,
      close: 24,
    },
  },

  order: function (starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
};
// Nesne içinden eleman yıkımı
const { name, openingHours, categories } = restaurant;
console.log(name, openingHours, categories);
//Nesne içinden eleman yıkımı farklı adla adlandırma
const {
  name: restaurantName,
  openingHours: hours,
  categories: tags,
} = restaurant;
console.log(restaurantName, hours, tags);

// Varsayılan değer atama. [] boş diziyi ifade eder.
const { menu = [], starterMenu: starters = [] } = restaurant;
console.log(menu, starters);

//Nesnenin değerlerini değişkene atama
let a = 12;
let b = 15;
const obj = {
  a: 34,
  b: 34,
  c: 45,
};

({ a, b } = obj);
console.log(a, b);

// Nested Object - İç içe Nesne

const {
  fri: { open: o, close: c },
} = openingHours;

console.log(o, c);

// Data needed for first part of the section

const restaurant = {

location: 'Via Angelo Tavanti 23, Firenze, Italy',

categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],

starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],

mainMenu: ['Pizza', 'Pasta', 'Risotto'],

openingHours: {

thu: {

open: 12,

close: 22,

fri: {

open: 11,

close: 23,

sat: {

open: 0,

close: 24,

order: function (starterIndex, mainIndex) {

return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];

};

// Nesne içinden eleman yıkımı

const { name, openingHours, categories } = restaurant;

console.log(name, openingHours, categories);

//Nesne içinden eleman yıkımı farklı adla adlandırma

const {

openingHours: hours,

categories: tags,

} = restaurant;

console.log(restaurantName, hours, tags);

// Varsayılan değer atama. [] boş diziyi ifade eder.

const { menu = [], starterMenu: starters = [] } = restaurant;

console.log(menu, starters);

//Nesnenin değerlerini değişkene atama

let a = 12;

let b = 15;

const obj = {

a: 34,

b: 34,

c: 45,

};

({ a, b } = obj);

console.log(a, b);

// Nested Object - İç içe Nesne

const {

fri: { open: o, close: c },

} = openingHours;

console.log(o, c);

Yorum Bırak

JS – Dizi Yıkımı

Published on Şubat 14, 2024

'use strict';

 // Array Dest - Dizi Yıkımı

// Data needed for first part of the section
const restaurant = {
  name: 'Classico Italiano',
  location: 'Via Angelo Tavanti 23, Firenze, Italy',
  categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],
  starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],
  mainMenu: ['Pizza', 'Pasta', 'Risotto'],

  order: function (starterIndex, mainIndex) {
    return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];
  },
};

const arr = [2, 3, 4];
const a = arr[0];
const b = arr[1];
const c = arr[2];

// Ekrana sıradan dizi  erişimi ile elemanları basar.
console.log(a, b, c);

const [d, e, f] = arr;
// d,e,f değişkenlerini ekrana yazar.
console.log(d, e, f);
console.log(arr);

const { name } = restaurant;
console.log(name);

// Eleman seçimi
const [first, second] = restaurant.categories;
console.log('[first, second] ' + first, second); // İtalian Pizzeria

// seçilen elemanları değişkenlere atama

const [main, secondary] = [first, second];
console.log('[main ,secondary] ' + main, secondary);

// Atlamalı eleman seçimi
const [cfirst, , csecond] = restaurant.categories;
console.log(cfirst, csecond); // İtalian Vegatarian

// İki değişken elemanlarının yer değiştirmesi istenirse
let [j, k] = [55, 20];
console.log(j, k);

[j, k] = [k, j];
console.log(j, k);

const [l, m, n, o, p] = restaurant.categories;
console.log(l, m, n, o, p); // p undefined

// Fonksiyon ile yıkım çağırma
const [starterMenu, mainMenu] = restaurant.order(2, 0);
console.log(starterMenu, mainMenu);

const nested = [2, 3, 4, 5, [5, 6]];
const [x, , , , y] = nested;
console.log(y); //[5,6]

const [z, q, r = 9] = [8, 9];
console.log(z, q, r);

'use strict';

// Array Dest - Dizi Yıkımı

// Data needed for first part of the section

const restaurant = {

location: 'Via Angelo Tavanti 23, Firenze, Italy',

categories: ['Italian', 'Pizzeria', 'Vegetarian', 'Organic'],

starterMenu: ['Focaccia', 'Bruschetta', 'Garlic Bread', 'Caprese Salad'],

mainMenu: ['Pizza', 'Pasta', 'Risotto'],

order: function (starterIndex, mainIndex) {

return [this.starterMenu[starterIndex], this.mainMenu[mainIndex]];

};

const arr = [2, 3, 4];

const a = arr[0];

const b = arr[1];

const c = arr[2];

// Ekrana sıradan dizi erişimi ile elemanları basar.

console.log(a, b, c);

const [d, e, f] = arr;

// d,e,f değişkenlerini ekrana yazar.

console.log(d, e, f);

console.log(arr);

const { name } = restaurant;

console.log(name);

// Eleman seçimi

const [first, second] = restaurant.categories;

console.log('[first, second] ' + first, second); // İtalian Pizzeria

// seçilen elemanları değişkenlere atama

const [main, secondary] = [first, second];

console.log('[main ,secondary] ' + main, secondary);

// Atlamalı eleman seçimi

const [cfirst, , csecond] = restaurant.categories;

console.log(cfirst, csecond); // İtalian Vegatarian

// İki değişken elemanlarının yer değiştirmesi istenirse

let [j, k] = [55, 20];

console.log(j, k);

[j, k] = [k, j];

console.log(j, k);

const [l, m, n, o, p] = restaurant.categories;

console.log(l, m, n, o, p); // p undefined

// Fonksiyon ile yıkım çağırma

const [starterMenu, mainMenu] = restaurant.order(2, 0);

console.log(starterMenu, mainMenu);

const nested = [2, 3, 4, 5, [5, 6]];

const [x, , , , y] = nested;

console.log(y); //[5,6]

const [z, q, r = 9] = [8, 9];

console.log(z, q, r);

Yorum Bırak

JavaScript’te spread operatörü

Published on Şubat 1, 2024

JavaScript’te spread operatörü ( … ) genellikle nesne veya dizilerin kopyalarını oluşturmak, birleştirmek veya döndürmek için kullanılır. Spread operatörü, özellikle modern JavaScript (ES6 ve sonrası) üzerinde yaygın olarak kullanılmaktadır. İşte…

Devamını okuyunuz…

Yorum Bırak

Regular Func && Arrow Func

Published on Ocak 30, 2024

'use strict';

console.log(this); // Global nesneyi temsil eder.

const calcAge = function (birthYear) {
  console.log(2037 - birthYear);
  console.log(this);
};

calcAge(2000); // Bu durumda, this değeri global nesneyi temsil eder çünkü fonksiyon bağımsız bir şekilde çağrılmıştır.

const calcAgeArrow = birthYear => {
  console.log(2037 - birthYear);
  console.log(this);
};

calcAgeArrow(2000); // Global nesne

// Bu örnekte calcAgeArrow adında bir arrow fonksiyonu tanımlanmıştır. Bu fonksiyon bir doğum yılı parametresi alır, bu doğum yılına göre bir yaş hesaplar ve ardından this değerini ekrana yazdırır.

// Burada dikkat edilmesi gereken önemli bir nokta, arrow fonksiyonlarının this değerini oluşturmamasıdır. Arrow fonksiyonları, kendi this bağlamını oluşturmadıkları için, genellikle arrow fonksiyonları içinde kullanılan this, dışındaki kapsayıcı fonksiyonun this değerini miras alır.

// Ancak, bu durum arrow fonksiyonları ile normal fonksiyonlar arasındaki temel farklardan biridir. Normal fonksiyonlar, çağrıldıkları bağlama bağlı olarak this değerini değiştirirken, arrow fonksiyonları bu bağlamı değiştirmez ve dışındaki kapsayıcı fonksiyonun this değerini miras alır.

// Bu nedenle, calcAgeArrow fonksiyonunun içindeki this değeri arrow fonksiyonunun bağlı olduğu global bağlamı temsil eder. Yani, bu örnekte this değeri, genellikle global nesneyi temsil eden window (tarayıcıda) veya global (Node.js'te) olacaktır.

// AÇIKLAMA

// myMethod içindeki arrow fonksiyonu, kendi this değerini oluşturmadığı için dışındaki kapsayıcı fonksiyonun (bu durumda global kapsamın) this değerini miras alır.

// this.prop ifadesi, arrow fonksiyonu içinde this değerini ifade eder. Ancak, arrow fonksiyonlarının this değeri global bağlamı temsil ettiği için, bu ifade globalde tanımlanan prop değişkenini ifade eder.

// Benzer şekilde, this.number ifadesi de globalde tanımlanan number değişkenini ifade eder.

var prop = 'a'; // globalde tanımlanan 'prop' değişkeni
var number = 12; // globalde tanımlanan 'number' değişkeni

const myObject = {
  prop: 'Hello', // myObject içindeki 'prop' özelliği
  number: 12, // myObject içindeki 'number' özelliği

  // Arrow fonksiyonu: this değeri global bağlamı temsil eder
  myMethod: () => {
    console.log(this.prop); // globalde tanımlanan 'prop' değişkenini ifade eder ('a')
    console.log(this.number); // globalde tanımlanan 'number' değişkenini ifade eder (12)
  },
};

myObject.myMethod(); // Arrow fonksiyonunu çağırma

// Bu örnekte, arrow fonksiyonunun this değeri global bağlamı temsil ettiği için, içinde kullanılan this.prop ve this.number ifadeleri globalde tanımlanan değişkenleri ifade eder. Arrow fonksiyonlarının this davranışını anlamak, kullanımdan önce dikkatlice düşünülmesi gereken önemli bir konsepttir.

// AÇIKLAMA

// 1. myObject2 adında bir nesne oluşturulmuştur.
//    Bu nesnenin içinde prop ve number adında iki özellik bulunmaktadır.
const myObject2 = {
  prop: 'Hello',
  number: 12,

  // 2. myMethodArrow adında bir arrow fonksiyon tanımlanmıştır.
  //    Arrow fonksiyonları kendi this bağlamını oluşturmadığı için, this genellikle global nesneyi ifade eder.
  //    Bu nedenle, this.prop ve this.number ifadeleri muhtemelen undefined olacaktır.
  myMethodArrow: () => {
    console.log(this.prop); // 'Hello' değeri beklenir, ancak muhtemelen undefined olacaktır
    console.log(this.number); // 12 değeri beklenir, ancak muhtemelen undefined olacaktır
  },

  // 3. myMethodFunc adında bir normal fonksiyon tanımlanmıştır.
  //    Normal fonksiyonlar kendi this bağlamını oluştururlar ve genellikle çağrıldıkları nesneyi ifade ederler.
  //    Bu nedenle, this.prop ve this.number ifadeleri myObject2 nesnesini ifade eder.
  myMethodFunc: function () {
    console.log(this.prop); // 'Hello' değeri beklenir, çünkü normal fonksiyon çağrıldığı nesneyi temsil eder
    console.log(this.number); // 12 değeri beklenir, çünkü normal fonksiyon çağrıldığı nesneyi temsil eder
  },
};

// 4. myObject2 nesnesinin myMethodArrow ve myMethodFunc metodları çağrılmıştır.
//    myMethodArrow içinde this değeri genellikle global nesneyi ifade eder, bu nedenle this.prop ve this.number muhtemelen undefined olacaktır.
//    myMethodFunc içinde this değeri myObject2 nesnesini ifade eder, bu nedenle this.prop ve this.number myObject2 nesnesinin değerlerini ifade eder.
myObject2.myMethodArrow(); // 'Hello' ve 12 değerleri beklenir, ancak muhtemelen undefined olacaktır
myObject2.myMethodFunc(); // 'Hello' ve 12 değerleri beklenir

// AÇIKLAMA

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function () {
  console.log(this); // Button elementini temsil eder
});

//AÇIKLAMA

// 1. Person adında bir constructor fonksiyonu tanımlanmıştır.
//    Bu fonksiyon bir 'name' parametresi alır ve 'this' bağlamı içinde 'name' özelliğini tanımlar.
//    Ayrıca 'this' bağlamı içinde 'greet' adında bir fonksiyon tanımlar.
function Person(name) {
  // 'name' özelliği tanımlanır ve constructor fonksiyonuna geçilen 'name' parametresi ile atanır.
  this.name = name;

  // 'greet' fonksiyonu tanımlanır. Bu fonksiyon, 'this' bağlamı içinde tanımlanan 'name' özelliğini kullanarak bir selam mesajı yazdırır.
  this.greet = function () {
    console.log(`Hello, I'm ${this.name}`);
  };
}

// 2. Person constructor fonksiyonunu kullanarak bir nesne oluşturulur.
//    Oluşturulan nesne 'person2' adında bir değişkene atanır ve 'John' ismi ile ilişkilendirilir.
const person2 = new Person('John');

// 3. Oluşturulan nesnenin 'greet' metodu çağrılır.
//    'greet' metodu, 'this' bağlamı içindeki 'name' özelliğini kullanarak bir selam mesajı yazdırır.
person2.greet(); // Hello, I'm John

//AÇIKLAMA

class Person {
  // Kurucu fonksiyon (constructor)
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }

  // Bir metod ekleyelim
  greet() {
    console.log(
      `Merhaba, benim adım ${this.name} ve ben ${this.age} yaşındayım.`
    );
  }
}

// Person sınıfından bir örnek oluşturalım
const person1 = new Person('Ahmet', 25);

// Oluşturulan örnek üzerinden metod çağrısı yapalım
person1.greet(); // Merhaba, benim adım Ahmet ve ben 25 yaşındayım.

// AÇIKLAMA
function NormalFunction() {
  this.value = 1;
  // Normal fonksiyon içinde arrow function
  this.normalMethod = function () {
    setTimeout(function () {
      this.value++;
      console.log('Normal Function - Value:', this.value); // 'this' değeri değişir
    }, 1000);
  };

  // Arrow function içinde arrow function
  this.arrowMethod = function () {
    setTimeout(() => {
      this.value++;
      console.log('Arrow Function - Value:', this.value); // 'this' değeri değişmez
    }, 1000);
  };
}

const obj = new NormalFunction();
obj.normalMethod(); // Normal Function - Value: NaN (this.value, globalde tanımlı değil)
obj.arrowMethod(); // Arrow Function - Value: 2

// Bu örnekte, NormalFunction adında bir constructor fonksiyonu var. normalMethod içindeki iç fonksiyon normal bir fonksiyonken, arrowMethod içindeki iç fonksiyon arrow function'dır. normalMethod içindeki normal fonksiyon, kendi this değerini oluşturduğu için içindeki this.value, global bağlamında tanımlı olmadığı için NaN değerini alır. Ancak arrowMethod içindeki arrow function, dışındaki kapsayıcı fonksiyonun this değerini miras alır, bu nedenle this.value doğru bir şekilde güncellenir.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

'use strict';

console.log(this); // Global nesneyi temsil eder.

const calcAge = function (birthYear) {

console.log(2037 - birthYear);

console.log(this);

};

calcAge(2000); // Bu durumda, this değeri global nesneyi temsil eder çünkü fonksiyon bağımsız bir şekilde çağrılmıştır.

const calcAgeArrow = birthYear => {

console.log(2037 - birthYear);

console.log(this);

};

calcAgeArrow(2000); // Global nesne

// Bu örnekte calcAgeArrow adında bir arrow fonksiyonu tanımlanmıştır. Bu fonksiyon bir doğum yılı parametresi alır, bu doğum yılına göre bir yaş hesaplar ve ardından this değerini ekrana yazdırır.

// Burada dikkat edilmesi gereken önemli bir nokta, arrow fonksiyonlarının this değerini oluşturmamasıdır. Arrow fonksiyonları, kendi this bağlamını oluşturmadıkları için, genellikle arrow fonksiyonları içinde kullanılan this, dışındaki kapsayıcı fonksiyonun this değerini miras alır.

// Ancak, bu durum arrow fonksiyonları ile normal fonksiyonlar arasındaki temel farklardan biridir. Normal fonksiyonlar, çağrıldıkları bağlama bağlı olarak this değerini değiştirirken, arrow fonksiyonları bu bağlamı değiştirmez ve dışındaki kapsayıcı fonksiyonun this değerini miras alır.

// Bu nedenle, calcAgeArrow fonksiyonunun içindeki this değeri arrow fonksiyonunun bağlı olduğu global bağlamı temsil eder. Yani, bu örnekte this değeri, genellikle global nesneyi temsil eden window (tarayıcıda) veya global (Node.js'te) olacaktır.

// AÇIKLAMA

// myMethod içindeki arrow fonksiyonu, kendi this değerini oluşturmadığı için dışındaki kapsayıcı fonksiyonun (bu durumda global kapsamın) this değerini miras alır.

// this.prop ifadesi, arrow fonksiyonu içinde this değerini ifade eder. Ancak, arrow fonksiyonlarının this değeri global bağlamı temsil ettiği için, bu ifade globalde tanımlanan prop değişkenini ifade eder.

// Benzer şekilde, this.number ifadesi de globalde tanımlanan number değişkenini ifade eder.

var prop = 'a'; // globalde tanımlanan 'prop' değişkeni

var number = 12; // globalde tanımlanan 'number' değişkeni

const myObject = {

prop: 'Hello', // myObject içindeki 'prop' özelliği

number: 12, // myObject içindeki 'number' özelliği

// Arrow fonksiyonu: this değeri global bağlamı temsil eder

myMethod: () => {

console.log(this.prop); // globalde tanımlanan 'prop' değişkenini ifade eder ('a')

console.log(this.number); // globalde tanımlanan 'number' değişkenini ifade eder (12)

};

myObject.myMethod(); // Arrow fonksiyonunu çağırma

// Bu örnekte, arrow fonksiyonunun this değeri global bağlamı temsil ettiği için, içinde kullanılan this.prop ve this.number ifadeleri globalde tanımlanan değişkenleri ifade eder. Arrow fonksiyonlarının this davranışını anlamak, kullanımdan önce dikkatlice düşünülmesi gereken önemli bir konsepttir.

// AÇIKLAMA

// 1. myObject2 adında bir nesne oluşturulmuştur.

// Bu nesnenin içinde prop ve number adında iki özellik bulunmaktadır.

const myObject2 = {

prop: 'Hello',

number: 12,

// 2. myMethodArrow adında bir arrow fonksiyon tanımlanmıştır.

// Arrow fonksiyonları kendi this bağlamını oluşturmadığı için, this genellikle global nesneyi ifade eder.

// Bu nedenle, this.prop ve this.number ifadeleri muhtemelen undefined olacaktır.

myMethodArrow: () => {

console.log(this.prop); // 'Hello' değeri beklenir, ancak muhtemelen undefined olacaktır

console.log(this.number); // 12 değeri beklenir, ancak muhtemelen undefined olacaktır

// 3. myMethodFunc adında bir normal fonksiyon tanımlanmıştır.

// Normal fonksiyonlar kendi this bağlamını oluştururlar ve genellikle çağrıldıkları nesneyi ifade ederler.

// Bu nedenle, this.prop ve this.number ifadeleri myObject2 nesnesini ifade eder.

myMethodFunc: function () {

console.log(this.prop); // 'Hello' değeri beklenir, çünkü normal fonksiyon çağrıldığı nesneyi temsil eder

console.log(this.number); // 12 değeri beklenir, çünkü normal fonksiyon çağrıldığı nesneyi temsil eder

};

// 4. myObject2 nesnesinin myMethodArrow ve myMethodFunc metodları çağrılmıştır.

// myMethodArrow içinde this değeri genellikle global nesneyi ifade eder, bu nedenle this.prop ve this.number muhtemelen undefined olacaktır.

// myMethodFunc içinde this değeri myObject2 nesnesini ifade eder, bu nedenle this.prop ve this.number myObject2 nesnesinin değerlerini ifade eder.

myObject2.myMethodArrow(); // 'Hello' ve 12 değerleri beklenir, ancak muhtemelen undefined olacaktır

myObject2.myMethodFunc(); // 'Hello' ve 12 değerleri beklenir

// AÇIKLAMA

const myButton = document.getElementById('myButton');

myButton.addEventListener('click', function () {

console.log(this); // Button elementini temsil eder

});

//AÇIKLAMA

// 1. Person adında bir constructor fonksiyonu tanımlanmıştır.

// Bu fonksiyon bir 'name' parametresi alır ve 'this' bağlamı içinde 'name' özelliğini tanımlar.

// Ayrıca 'this' bağlamı içinde 'greet' adında bir fonksiyon tanımlar.

function Person(name) {

// 'name' özelliği tanımlanır ve constructor fonksiyonuna geçilen 'name' parametresi ile atanır.

this.name = name;

// 'greet' fonksiyonu tanımlanır. Bu fonksiyon, 'this' bağlamı içinde tanımlanan 'name' özelliğini kullanarak bir selam mesajı yazdırır.

this.greet = function () {

console.log(`Hello, I'm ${this.name}`);

};

}

// 2. Person constructor fonksiyonunu kullanarak bir nesne oluşturulur.

// Oluşturulan nesne 'person2' adında bir değişkene atanır ve 'John' ismi ile ilişkilendirilir.

const person2 = new Person('John');

// 3. Oluşturulan nesnenin 'greet' metodu çağrılır.

// 'greet' metodu, 'this' bağlamı içindeki 'name' özelliğini kullanarak bir selam mesajı yazdırır.

person2.greet(); // Hello, I'm John

//AÇIKLAMA

class Person {

// Kurucu fonksiyon (constructor)

constructor(name, age) {

this.name = name;

this.age = age;

}

// Bir metod ekleyelim

greet() {

console.log(

`Merhaba, benim adım ${this.name} ve ben ${this.age} yaşındayım.`

);

}

// Person sınıfından bir örnek oluşturalım

const person1 = new Person('Ahmet', 25);

// Oluşturulan örnek üzerinden metod çağrısı yapalım

person1.greet(); // Merhaba, benim adım Ahmet ve ben 25 yaşındayım.

// AÇIKLAMA

function NormalFunction() {

this.value = 1;

// Normal fonksiyon içinde arrow function

this.normalMethod = function () {

setTimeout(function () {

this.value++;

console.log('Normal Function - Value:', this.value); // 'this' değeri değişir

}, 1000);

};

// Arrow function içinde arrow function

this.arrowMethod = function () {

setTimeout(() => {

this.value++;

console.log('Arrow Function - Value:', this.value); // 'this' değeri değişmez

}, 1000);

};

}

const obj = new NormalFunction();

obj.normalMethod(); // Normal Function - Value: NaN (this.value, globalde tanımlı değil)

obj.arrowMethod(); // Arrow Function - Value: 2

// Bu örnekte, NormalFunction adında bir constructor fonksiyonu var. normalMethod içindeki iç fonksiyon normal bir fonksiyonken, arrowMethod içindeki iç fonksiyon arrow function'dır. normalMethod içindeki normal fonksiyon, kendi this değerini oluşturduğu için içindeki this.value, global bağlamında tanımlı olmadığı için NaN değerini alır. Ancak arrowMethod içindeki arrow function, dışındaki kapsayıcı fonksiyonun this değerini miras alır, bu nedenle this.value doğru bir şekilde güncellenir.

Yorum Bırak

DevCodeBlog Yazılar