Bilmediğiniz 17 Pro JavaScript Hilesi

Kod yazmanın birçok yolu vardır, ancak çoğu insan için genellikle ilk yol çok uzundur ve biraz zaman alabilir. İşte JavaScript kodlarken verimliliğinizi ve üretkenliğinizi artıracak küçük bilgiler.

JavaScript: Bilmeniz Gereken Püf Noktaları

Üçlü operatör (The ternary operator)

Çaylaklar:

let hungry = true;
let eat; 
if (hungry == true) {
       eat = 'yes'; 
} else {
       eat = 'no';
}

Uzman:

let hungry = true;

Sayı metne / Metin sayıya (Number to string / string to number)

Çaylaklar:

let num = 15; 
let s = num.toString(); // number to string
let n = Number(s); // string to number

Uzman:

let num = 15;
let s = num + ""; // number to string
let n = +s; // string to number

Bir diziyi doldurmak

Çaylaklar:

for(let i=0; i < arraySize; i++){
       filledArray[i] {'hello' : 'goodbye'};
}

Uzman:

const filledArray = new Array(arraysize).fill({'hello' : 'goodbye'})

Nesnelerde dinamik özellikler

Çaylaklar:

let dynamic = "value"; 
let user = {
     id: 1
};
user[dynamic] = "other value";

Uzman:

let dynamic = "value"; 
let user = {
    id: 1,
    [dynamic] = "other value"
};

Yinelenenleri kaldırma

Çaylak:

let array = [100, 23, 23, 23, 23, 67, 45]; 
let outputArray = [];
let flag = false; 
for (j = 0; < array.length; j++) {
   for (k = 0; k < outputArray.length; k++) {
      if (array[j] == outputArray[k]) {
         flag = true;
       }
    }
    if (flag == false) {
      outputArray.push(array[j]);
     }
     flag = false;
}
//outputarray = [100, 23, 67, 45]

Uzman:

let array = [100, 23, 23, 23, 23, 67, 45]; 
let uniqueArray = [...new Set(array)];
//outputArray = [100, 23, 67, 45]

Nesneye dizi (Array to object)

Çaylak:

let arr = ["value1", "value2", "value3"]; 
let arrObject = {};
for (let i = 0; i < arr.length; ++i) {
   if (arr[i] !== undefined) {
     arrObject[i] = arr[i];
   }
}

Uzman:

let arr = ["value1", "value2", "value3"]; 
let arrObject = {...arr};

Diziye Nesne (Object to Array)

Çaylak:

let number = {
  one: 1, 
  two: 2,
};
let keys = []; 
for (let numbers in numbers) {
  if (number.hasOwnProperty(number)) {
     keys.push(number);
    }
}
// key = [ 'one', 'two' ]

Uzman:

let number = {
  one: 1, 
  two: 2,
};
let key = Object.keys(numbers); // key = [ 'one', 'two' ]
let value = Object.values(numbers);  // value = [ 1, 2 ]
let entry = Object.entries(numbers); // entry = [['one' : 1], ['two' : 2]]

Kısa koşullar (Short circuit conditionals)

Çaylak:

if (docs) {
    goToDocs();
}

Uzman:

docs && goToDocs()

Sayıların eşit olup olmadığını kontrol etmek için ^ kullanın

if(a!=123) // before // Çaylak

if(a^123) // after // Uzman

Bir nesnenin üzerinde döngü yapın

const age = {
   Rahul: 20,  
   max: 16
};

// Solution 1 - Get 'keys' and loop over
const keys = Object.keys(age); 
keys.forEach(key => age[key]++);

console.log(age); // { Rahul: 21, max: 16 }

// Solution 2 - for ..in loop
for(let key in age){
   age[key]++;
}

console.log(age); // { Rahul: 22, max: 18 }

Nesne anahtarları, ekleme sırasına göre saklanır

cosnt obj = {
  name: "Rahul", 
  age: 16, 
  address: "Earth", 
  profession: "Developer", 
}; 

console.log(Object.keys(obj)); // name, age, address, profession

Değerin bir dizi olup olmadığını kontrol edin

const arr = [1, 2, 3]; 
console.log(typeof arr); // object
console.log(Array.isArray(arr)); // true

N boyutunda bir diziyi başlatın ve varsayılan değerlerle doldurun

const size = 5;
const defaultValue = 0;
const arr = Array(size).fill(defaultValue);
console.log(arr); // [0, 0, 0, 0, 0]

True ve False değerler

False değerler => false, 0, ""(boş dize), null, undefined, ve NaN.

True değerler => "Values", "0", {}(boş bir nesne), [](boş dizi)

Çift eşit ve üçlü eşit arasındaki fark

// Double equal - Converts both the operands to the same type and then comapares
console.log(0 == '0'); // true

// Triple Equal - Does not convert t same type
console.log(0 === '0'); // false

Argümanları kabul etmenin daha iyi yolu

function downloadData(url, resourceId, searchTest, pageNo, limit) {}

downloadData(...); // need to remember the order

Yapmanın daha basit yolu:

function downloadData(
{ url, resourceId, searchTest, pageNo, limit } = {}
) {}

downloadData(
  { resourceId: 2, url: "/posts", searchText: "WebDev" }
);

null vs undefined

null => Bu bir değerdir, ancak tanımsız değildir.

null boş bir kutu gibidir ve tanımsız kutu değildir.

const fn = (x = 'default value') => console.log(x);

fn(undefined); // default value
fn(); // default value

fn(null); // null

Null geçildiğinde, varsayılan değer alınmaz . Oysa tanımsız veya hiçbir şey geçilmediğinde varsayılan değer alınır.

⚡ Okuduğunuz için Teşekkürler | Mutlu Kodlamalar

Kaynak: Rahul – 17 Pro JavaScript tricks you didn’t know