JavaScript’te kod yazarken zaman kazandıracak bazı yöntemler

19 Ocak 2021

Herhangi bir programlama dilinin kısaltılmış kodlama teknikleri, daha temiz ve optimize edilmiş kod yazmamıza yardımcı olur ve hedefimize daha az kodlama ile ulaşmamızı sağlar.

1. Değişken Bildirimi (Declaring variables)


// longhand
let x;
let y = 20;
 
// Shorthand
let x, y = 20;

// longhand

let x;

let y = 20;

// Shorthand

let x, y = 20;

2. Birden çok değişkene değer atama
destructuring özelliği ile bir satırda birden çok değişkene değer atayabiliriz.


//Longhand
let a, b, c;

a = 5;
b = 8;
c = 12;

//Shorthand
let [a, b, c] = [5, 8, 12];

//Longhand

let a, b, c;

a = 5;

b = 8;

c = 12;

//Shorthand

let [a, b, c] = [5, 8, 12];

3. Ternary operator
Ternary operator ile 5 satırlık kodu tek satıra düşürebiliriz.


//Longhand 
let marks = 26; 
let result; 
if(marks >= 30) {
   result = 'Pass'; 
} else { 
   result = 'Fail'; 
} 

//Shorthand 
let result = marks >= 30 ? 'Pass' : 'Fail';

//Longhand

let marks = 26;

let result;

if(marks >= 30) {

result = 'Pass';

} else {

result = 'Fail';

}

//Shorthand

let result = marks >= 30 ? 'Pass' : 'Fail';

4. Varsayılan değer atama
Beklenen değerin olmaması durumunda bir değişkene varsayılan bir değer atamak için OR (||) operatörünü kullanabiliriz.


//Longhand
let imagePath;

let path = getImagePath();

if(path !== null && path !== undefined && path !== '') {
    imagePath = path;
} else {
    imagePath = 'default.jpg';
}

//Shorthand
let imagePath = getImagePath() || 'default.jpg';

//Longhand

let imagePath;

let path = getImagePath();

if(path !== null && path !== undefined && path !== '') {

imagePath = path;

} else {

imagePath = 'default.jpg';

}

//Shorthand

let imagePath = getImagePath() || 'default.jpg';

5. AND(&&) operatörü kullanımı
Bir değişkenin true olup olmadığını kontrol ediyorsanız, alternatif olarak AND (&&) operatörünü kullanabilirsiniz.


//Longhand
if (isLoggedin) {
    goToHomepage();
 }

//Shorthand
isLoggedin && goToHomepage();

//Longhand

if (isLoggedin) {

goToHomepage();

}

//Shorthand

isLoggedin && goToHomepage();

6. İki değişkeni değiştirme (Swap two variables)
İki değişkenin değerlerini destructing yardımı ile kolayca değiştirebiliriz.


let x = 'Hello', y = 55;

//Longhand
const temp = x;
x = y;
y = temp;

//Shorthand
[x, y] = [y, x];

// Çıktı:
// x: 55
// y: Hello

let x = 'Hello', y = 55;

//Longhand

const temp = x;

x = y;

y = temp;

//Shorthand

[x, y] = [y, x];

// Çıktı:

// x: 55

// y: Hello

7. Arrow Function


//Longhand
function add(num1, num2) {
  return num1 + num2;
}

//Shorthand
const add = (num1, num2) => num1 + num2;

//Longhand

function add(num1, num2) {

return num1 + num2;

}

//Shorthand

const add = (num1, num2) => num1 + num2;

8. Template Literals

String değerlerini değişkenlerle birleştirmek için normalde + operatörünü kullanırız. ES6 Template Literals ile bunu daha basit bir şekilde yapabiliriz.


//Longhand
console.log('You got a missed call from ' + number + ' at ' + time);

//Shorthand
console.log(`You got a missed call from ${number} at ${time}`);

//Longhand

console.log('You got a missed call from ' + number + ' at ' + time);

//Shorthand

console.log(`You got a missed call from ${number} at ${time}`);

9. Çok Satırlı Dizeler (Multi-line String)

Çok satırlı dize için normalde + operatörünü yeni satıra geçiş \n operatörü ile birlikte kullanırız. Yeni dize tanımlama backsticks ile bunu daha kolay bir şekilde yapabiliriz.


//Longhand
console.log('JavaScript, often abbreviated as JS, is a\n' + 'programming language that conforms to the \n' + 'ECMAScript specification. JavaScript is high-level,\n' + 'often just-in-time compiled, and multi-paradigm.');


//Shorthand
console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

//Longhand

console.log('JavaScript, often abbreviated as JS, is a\n' + 'programming language that conforms to the \n' + 'ECMAScript specification. JavaScript is high-level,\n' + 'often just-in-time compiled, and multi-paradigm.');

//Shorthand

console.log(`JavaScript, often abbreviated as JS, is a programming language that conforms to the ECMAScript specification. JavaScript is high-level, often just-in-time compiled, and multi-paradigm.`);

10. Çoklu koşul kontrolü (Multiple condition checking)

Çoklu değer eşleştirme için tüm değerleri diziye koyabilir ve indexOf () yöntemini kullanabiliriz.


//Longhand
if (value === 1 || value === 'one' || value === 2 || value === 'two') {
  // Execute some code
}

// Shorthand 1
if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {
   // Execute some code
}

// Shorthand 2
if ([1, 'one', 2, 'two'].includes(value)) { 
    // Execute some code 
}

//Longhand

if (value === 1 || value === 'one' || value === 2 || value === 'two') {

// Execute some code

}

// Shorthand 1

if ([1, 'one', 2, 'two'].indexOf(value) >= 0) {

// Execute some code

}

// Shorthand 2

if ([1, 'one', 2, 'two'].includes(value)) {

// Execute some code

}

11. Nesneye değer atama (Object Property Assignment)

Değişken adı ve nesne özellik adı aynıysa, nesne değişkenlerinde hem özellik hem de değer yerine sadece değişken adını belirtebiliriz. JavaScript, nesne özelliğini otomatik olarak değişken adıyla aynı şekilde ayarlayacak ve değeri değişkenin değeri olarak atayacaktır.


let firstname = 'John';
let lastname = 'Mark';

//Longhand
let obj = {firstname: firstname, lastname: lastname};

//Shorthand
let obj = {firstname, lastname};

let firstname = 'John';

let lastname = 'Mark';

//Longhand

let obj = {firstname: firstname, lastname: lastname};

//Shorthand

let obj = {firstname, lastname};

12. Dizeleri sayılara dönüştürme

Bir dizeyi sayıya dönüştürmek için parseInt ve parseFloat gibi yöntemler vardır. Bunu, dize değerinin önüne (+) koyarak da yapabiliriz.


//Longhand
let total = parseInt('453');
let average = parseFloat('42.6');

//Shorthand
let total = +'453';
let average = +'42.6';

//Longhand

let total = parseInt('453');

let average = parseFloat('42.6');

//Shorthand

let total = +'453';

let average = +'42.6';

13. Bir dizeyi birkaç kez tekrarlama

Bir dizeyi belirli bir süre boyunca tekrarlamak için bir for döngüsü kullanabilirsiniz. Ancak repeat() yöntemini kullanarak bunu tek bir satırda yapabiliriz.


//Longhand
let str = '';
for(let i = 0; i < 5; i ++) {
  str += 'Hello ';
}
console.log(str); // Hello Hello Hello Hello Hello

// Shorthand
'Hello '.repeat(5);

//Longhand

let str = '';

for(let i = 0; i < 5; i ++) {

str += 'Hello ';

}

console.log(str); // Hello Hello Hello Hello Hello

// Shorthand

'Hello '.repeat(5);

14. Üs Alma

Bir sayının üssünü bulmak için Math.pow () yöntemini kullanabiliriz. Bir başka yöntem de çift yıldız operatörünü (**) kullanmak.


//Longhand
const power = Math.pow(4, 3); // 64

// Shorthand
const power = 4**3; // 64

//Longhand

const power = Math.pow(4, 3); // 64

// Shorthand

const power = 4**3; // 64

15. Sayıları aşağıya yuvarlama

Sayıları aşağıya yuvarlamak için Math.floor yöntemini kullanırız. (~~) operatörü ile de aynı işlem yapılabiliyor.


//Longhand
const floor = Math.floor(6.8); // 6

// Shorthand
const floor = ~~6.8; // 6

//Longhand

const floor = Math.floor(6.8); // 6

// Shorthand

const floor = ~~6.8; // 6

Not: Math.floor() yöntemi sayı ne olursa olsun aşağı yuvarlar.

16. Dizideki maksimum ve minimum sayıları bulmak

Dizilerdeki maksimum ve minimum değerleri bulmak için genelde döngü yapabilir ya da Array.reduce () yöntemini kullanabiliriz.

Fakat, Spread operatörünü kullanarak bunu tek bir satırda yapabiliyoruz.


// Shorthand
const arr = [2, 8, 15, 4];
Math.max(...arr); // 15
Math.min(...arr); // 2

// Shorthand

const arr = [2, 8, 15, 4];

Math.max(...arr); // 15

Math.min(...arr); // 2

17. For loop

JS’de farklı farklı döngü yöntemleri bulunmakta, bir dizide döngü yapmak için genellikle for döngüsünü kullanırız. Diziler arasında yineleme yapmak için for… of döngüsünü de kullanabiliriz. Her değerin dizinine erişmek için ise for… in döngüsünü kullanabiliriz.


let arr = [10, 20, 30, 40];

//Longhand
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
}

//Shorthand
//for of loop
for (const val of arr) {
  console.log(val);
}

//for in loop
for (const index in arr) {
  console.log(arr[index]);
}

let arr = [10, 20, 30, 40];

//Longhand

for (let i = 0; i < arr.length; i++) {

console.log(arr[i]);

}

//Shorthand

//for of loop

for (const val of arr) {

console.log(val);

}

//for in loop

for (const index in arr) {

console.log(arr[index]);

}

Ayrıca for… in döngüsünü kullanarak nesne özelliklerinde döngü yapabiliriz.


let obj = {x: 20, y: 50};

for (const key in obj) {
  console.log(obj[key]);
}

let obj = {x: 20, y: 50};

for (const key in obj) {

console.log(obj[key]);

}

18. Dizilerin birleştirilmesi


let arr1 = [20, 30];

//Longhand
let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Shorthand
let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

let arr1 = [20, 30];

//Longhand

let arr2 = arr1.concat([60, 80]); // [20, 30, 60, 80]

//Shorthand

let arr2 = [...arr1, 60, 80]; // [20, 30, 60, 80]

19. Dizeden karakter alma


let str = 'jscurious.com';

//Longhand
str.charAt(2); // c

//Shorthand
str[2]; // c

let str = 'jscurious.com';

//Longhand

str.charAt(2); // c

//Shorthand

str[2]; // c

20. Dinamik nesne

ES6 ile birlikte, daha önce tanımladığımız değişkeni köşeli parantezler içerisine alarak nesne içerisinde dinamik olacak şekilde kullanabiliyoruz.


const dynamic = "email";

const user = {
  name : 'John',
  lastname : 'Doe',
  [dynamic] : 'john@example.com',
};

console.log(user);

// {
//   name: "John",
//   lastname: "Doe",
//   email: "john@example.com"
// }

const dynamic = "email";

const user = {

name : 'John',

lastname : 'Doe',

[dynamic] : 'john@example.com',

};

console.log(user);

// {

// name: "John",

// lastname: "Doe",

// email: "john@example.com"

// }

Bu yazıda olmayan diğer bazı faydalı yöntemlere buradan ulaşabilirsiniz.

Kaynaklar:https://jscurious.com/20-javascript-shorthand-techniques-that-will-save-your-time/

Etiketler: JavaScript kısayol teknikleri , JavaScript kısayolları

BLOG

JavaScript’te kod yazarken zaman kazandıracak bazı yöntemler

KATEGORİ

EN SON YAZILAR

Javascript’te Rest ve Spread Operatörleri kullanımı ve farkları

ES6 modules nedir? Nasıl kullanılır?

JavaScript’te kod yazarken zaman kazandıracak bazı yöntemler

POPÜLER ETİKETLER