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 an’ + ‘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 an’ + ‘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]);
}
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
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] : ‘[email protected]’,
};
console.log(user);
// {
// name: “John”,
// lastname: “Doe”,
// email: “[email protected]”
// }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const dynamic = “email” ;
const user = { name : ‘John’ , lastname : ‘Doe’ , [ dynamic ] : ‘[email protected]’ , } ;
console . log ( user ) ;
// { // name: “John”, // lastname: “Doe”, // email: “[email protected]” // }
|
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/