JS’nin Gizemli Dünyasına Hızlı Bir Giriş

Öncelikle merhaba. Birçok dilde kod yazdım artık javascript bu kadar popülerken yerimizi biz de alalım diyorsanız, bir an önce hızlıdan bir giriş yapalım diyorsanız, backend benden sorulur artık full-stack yazılıma adım atayım diyorsanız hızlı bir giriş için bu yazının verimli olacağını düşünüyorum.

Şunu da belirtmeliyim ki bu bir javascript konu rehberi değil. Benim kendimce dile hızlı bir şekilde giriş yapmak için naçizane önemli bulduğum konuları barındıran bir nevi js 101 diyebilirim. O zaman haydi başlayalım :)

Aslında bir dili eğer ezberlemeye değil de programlama temellerinin o dilde nasıl olduğunu öğrenmeye çalıştığımızda bir dilden diğerine geçiş çok da zor olmuyor. Birkaç syntax değişikliği ve o dilin kendine has özelliklerini kavradığımızda bir dilden diğerine geçiş çok da zor olmuyor.

Şimdi müsadenizle bir js framework öğrenmek için bizi hızlı şekilde javascript kullanımına aşina edecek bazı kavramlar ile devam etmek istiyorum.

Temel Syntax (Basic Syntax):

• Yorum satırları : // veya /* …… */ şeklinde kullanılır.
• Case sensivity var. Yani let lastname,lastName dendiğinde iki farklı değişken tanımlanmış olur.
• İlgili satır bittiğinde “;” koymak zorunluluk olmamakla birlikte tercih edilen bir yöntemdir.

Değişkenler (Variables):

Bu farklar özetle “var”ın eski bir tanımlama şekli olduğunu, “let” ile tanımlanan değişkenlerin blok kapsamına sahip olduğunu ve “const” ile tanımlanan değişkenlerin sabit değerlere sahip olduğunu göstermektedir. ES6'dan itibaren “let” ve “const” genellikle tercih edilen tanımlama şekilleri olmuştur, çünkü daha güvenli ve tutarlı davranışlar sunarlar.

Şart İfadeleri (Conditionals)

If- Else kullanımı:

num = -3
if (num > 0) {
  console.log(`${num} is a positive number`)
} else {
  console.log(`${num} is a negative number`)
}

Switch-Case kullanımı:

let weather = 'cloudy'
switch (weather) {
  case 'rainy':
    console.log('You need a rain coat.')
    break
  case 'cloudy':
    console.log('It might be cold, you need a jacket.')
    break
  case 'sunny':
    console.log('Go out freely.')
    break
  default:
    console.log(' No need for rain coat.')
}

Ternay Operator kullanımı:

let isRaining = true
isRaining
  ? console.log('You need a rain coat.')
  : console.log('No need for a rain coat.')

Döngüler(Loops)

For kullanımı:

const countries = ['Türkiye', 'Sweden', 'Denmark', 'Norway', 'Iceland']
const newArr = []
for(let i = 0; i < countries.length; i++){
  newArr.push(countries[i].toUpperCase())
}

While kullanımı:

let i = 0
while (i <= 5) {
  console.log(i)
  i++
}

Fonksiyonlar (Functions)

Parametresiz fonksiyon kullanımı:

function square() {
  let num = 2
  let square = num * num
  console.log(square)
}

square() // 4

Parametreli fonksiyon kullanımı:

function sumTwoNumbers(numOne, numTwo) {
  let sum = numOne + numTwo
  console.log(sum)
}
sumTwoNumbers(10, 20)

Hata Yönetimi (Error Handling)

try {
  let lastName = 'Yigit'
  let fullName = fistName + ' ' + lastName
} catch (err) {
  console.error(err) // we can use console.log() or console.error()
} finally {
  console.log('In any case I will be executed')
}

Nesneler (Objects)

const person = {
  firstName: 'Asabeneh',
  lastName: 'Yetayeh',
  age: 250,
  country: 'Finland',
  city: 'Helsinki',
  skills: [
    'HTML',
    'CSS',
    'JavaScript',
    'React',
    'Node',
    'MongoDB',
    'Python',
    'D3.js'
  ],
  getFullName: function() {
    return `${this.firstName}${this.lastName}`
  },
  'phone number': '+3584545454545'
}

Kapsam Alanları (Scopes)

Not: var, let veya const olmadan tanımlanan her değişken global scope olarak geçerlidir.

let a = 'JavaScript' // bu dosyanın herhangi bir yerinde erişilebilecek global bir kapsamdır.
let b = 10 // bu dosyanın herhangi bir yerinde erişilebilecek global bir kapsamdır.

// Function scope
function letsLearnScope() {
  console.log(a, b) // JavaScript 10, erişilebilir
  let value = false
// block scope
  if (true) {
    let a = 'Python'
    let b = 20
    let c = 30
    let d = 40
    value = !value
    console.log(a, b, c, value) // Python 20 30 true
  }
  //c değişkenine erişemiyoruz çünkü c değişkeni sadec if bloğunda geçerli bir değişkendir
  console.log(a, b, c, value) // JavaScript 10 undefined true
}

This Keyword

• Bir nesne metodu içinde, this ifadesi nesneye atıfta bulunur.
• Yalnızca this ifadesi global nesneye atıfta bulunur.
• Bir fonksiyon içinde, this ifadesi global nesneye atıfta bulunur.
• Bir olayda, this ifadesi olayı alan öğeye atıfta bulunur.
• call(), apply() ve bind() gibi yöntemler this ifadesini herhangi bir nesneye atayabilir.

Tuzak Kısımlar

let x = "John";             
let y = new String("John");
(x === y) // is false because x is a string and y is an object.

let x = new String("John");             
let y = new String("John");
(x == y) // is false because you cannot compare objects.

1 == "1";       // true
1 === "1";      // false

let x = 5 + 7;       // x.valueOf() is 12,  typeof x is a number
let x = 5 + "7";     // x.valueOf() is 57,  typeof x is a string
let x = "5" + 7;     // x.valueOf() is 57,  typeof x is a string
let x = 5 - 7;       // x.valueOf() is -2,  typeof x is a number
let x = 5 - "7";     // x.valueOf() is -2,  typeof x is a number
let x = "5" - 7;     // x.valueOf() is -2,  typeof x is a number
let x = 5 - "x";     // x.valueOf() is NaN, typeof x is a number

let x = 0.1;
let y = 0.2;
let z = x + y            // the result in z will not be 0.3

if (x == 19);
{
  // code block 
} 
//Because of a misplaced semicolon, this code block will execute regardless of the value of x.

Teorikten ziyade tamamen uygulamalı olarak örnekleri paylaştım. Eğer örnekler dikkatli bir şekilde anlaşılıp sindirilirse bence temel javascript çoğunlukla anlaşılacaktır diye düşünüyorum. Elbette bu benim naçizane bir yazım, şu olmadan kesinlikle bir framework öğrenme diyenlere de saygı duyarım.

Bu yazıyı hazırlarken faydalandığım kaynaklar:

• https://github.com/Asabeneh/30-Days-Of-JavaScript
• https://www.w3schools.com/js/default.asp

Bu konuda bahsedeceklerim bu kadar. Bana ulaşmak ve open-source projelerimi incelemek için :

LinkedIn : https://www.linkedin.com/in/yigittanyel/

GitHub: https://github.com/yigittanyel