JavaScript ES6: Understanding Default Parameters

🎯 What Are Default Parameters in JavaScript?

Imagine going to a coffee shop, and the barista automatically gives you a cappuccino because you didn't specify your order. That’s what JavaScript ES6 Default Parameters do! 🎉

📌 Before ES6: The Struggle Was Real

Before ES6, we had to manually check if a function parameter was provided. If not, we assigned a default value like this:

const greet = (name) => {
    name = name || 'Stranger';
    console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet(); // Output: Hello, Stranger!
        

This was okay but not elegant. JavaScript developers wanted a cleaner solution. And then came ES6... 🚀

✅ ES6 Default Parameters: The Smart Way

With ES6, we can directly assign default values in the function parameters. Check this out:

const greet = (name = 'Stranger') => {
    console.log(`Hello, ${name}!`);
}

greet('Alice'); // Output: Hello, Alice!
greet(); // Output: Hello, Stranger!
        

Much cleaner, right? No more `name = name || 'Stranger'` nonsense! 😎

🤔 Why Use Default Parameters?

• 💡 Prevents `undefined` values
• 🚀 Simplifies code
• ⏳ Saves time (because we devs are lazy 😂)
• 🎯 Improves code readability

🛠 More Fun with Default Parameters

Example 1: Calculating Discounted Price

const calculatePrice = (price, discount = 0.10) => {
    return price - (price * discount);
}

console.log(calculatePrice(100)); // Output: 90
console.log(calculatePrice(100, 0.20)); // Output: 80
        

Example 2: Multiplication Table

const multiplicationTable = (num = 1) => {
    for(let i = 1; i <= 10; i++) {
        console.log(`${num} x ${i} = ${num * i}`);
    }
}

multiplicationTable(5); // Outputs table of 5
multiplicationTable(); // Outputs table of 1
        

🚀 Advanced Use Cases

Default Parameters with Objects

const userInfo = (user = { name: 'Guest', age: 18 }) => {
    console.log(`User: ${user.name}, Age: ${user.age}`);
}

userInfo({ name: 'Alice', age: 25 });
userInfo();
        

Using Functions as Default Parameters

const randomNumber = () => Math.floor(Math.random() * 100);

const showNumber = (num = randomNumber()) => {
    console.log(`Generated number: ${num}`);
}

showNumber(); // Outputs a random number
showNumber(42); // Outputs 42
        

🎉 Final Thoughts

Default Parameters in ES6 are a game-changer! They make your code cleaner, smarter, and easier to read. Now, go and use them in your projects! 🚀

🔗 Share This Article

Share on Twitter

Read More

for of loop in javascript - ফর অব লুপ

 

জাভাস্ক্রিপ্ট ইএস৬(ES6) এ নতুন একটি লুপের সাথে পরিচয় করিয়ে দেওয়া হয়েছে যার নাম for...of লুপ । এই for...of লুপের সাহায্যে খুব সহজেই অ্যারে(array), সেট(set), ম্যাপ(map), স্ট্রিং(string) ইত্যাদিকে ইটারেট করা যায় ।

জাভাস্ক্রিপ্ট for...of লুপ সিনট্যাক্স :-

for (item of iterable) {
    // body of for...of
}

এখানে,

• iterable হলো যেকোনো একটি ইটারেবল(iterable) অবজেক্ট যেমন - অ্যারে(array), সেট(set), স্ট্রিং(string) ইত্যাদি ।
• item হলো ইটারেবল(iterable) অবজেক্টের ভ্যালু ।

এখন আমরা for...of লুপের ইউসকেস দেখবো অর্থাৎ এটি কিভাবে কাজ করে -

for...of with Arrays

কোনো একটা অ্যারেকে ইটারেট করার প্রয়োজন হলে আমরা for...of ব্যাবহার করতে পারি যেমন :-

// array
const friends = ['shakil', 'torikus', 'fahim'];
// using for...of
for ( let item of friends ) {
    // display the values
    console.log(item);
}

OUTPUT :-

shakil
torikus
fahim

উপরের প্রোগ্রামে friends আরেকে ইটারেট করা হয়েছে অর্থাৎ অ্যারের ভেতর লুপ থ্রো করা হয়েছে যা অ্যারের লেন্থ পর্যন্ত চলবে । এবং item of friends এই লাইনে item নামে একটা ভ্যারিয়েবল নেওয়া হয়েছে যা friends আরের ভ্যালুকে নির্দেশ করে ।

প্রত্যেকবার লুপটি ইটারেট করার সময় কনসোলে item কে লগ করে যার ফলে উপরোক্ত আউটপুট পেয়েছি । শেষে এটি অ্যারের লেন্থ পর্যন্ত চলে ইটেরেশনকে বন্ধ করে দেয় ।

for...of with Strings :-

for...of লুপ আমরা স্ট্রিং(String) কে ইটারেট করতেও ব্যাবহার করতে পারি যেমন :-

// string
const name = 'babu';

// using for...of loop
for (let i of name) {
    console.log(i);
}

OUTPUT :-

b
a
b
u

অ্যারের মতো সেইমভাবে স্ট্রিং ও ইটারেট করা হয়েছে । এখানে i স্ট্রিং এর প্রত্যেকটা ভালুকে নির্দেশ করে যার ফলে আমরা উপরোক্ত আউটপুট পেয়েছি ।

for...of with Sets :-

আমরা Set এর এলিমেন্টস গুলোকে ইটারেট করতে পারি সেইম ভাবে for...of লুপ ইউস করে যেমন :-

// define Set
const set = new Set([1, 2, 3]);

// looping through Set
for (let i of set) {
    console.log(i);
}

OUTPUT :-

1
2
3

সেইম ভাবে এখানে i Set এর প্রত্যেকটা এলিমেন্ট বা ভ্যালুকে নির্দেশ করে যার প্রমাণসরূপ প্রোগ্রামের আউটপুট ।

for...of with Maps:-

আমরা সেইমভাবে Map এলিমেন্টস ইটারেট করতে পারি for...of লুপ ইউস করে যেমন :-

// define Map
let map = new Map();

// inserting elements
map.set('name', 'Jack');
map.set('age', '27');

// looping through Map
for (let [key, value] of map) {
    console.log(key + '- ' + value);
}

OUTPUT :-

name- Jack
age- 27

আশা করি বুঝতে পারছেন ।

======== শেষের কথা ========

• for...of লুপ ইউস করা হয় শুধুমাত্র ইটারেবল(iterable) অব্জেক্টসের ভ্যালুসমূহ কে ইটারেট করতে ।
• যদি কোনো ইটারেবল(iterable) অব্জেক্টসের ইনডেক্স নিয়ে কাজ করার দরকার পরে তাহলে এই লুপ ইউস না করায় ভালো ।
• for...of লুপ অবজেক্টের(object) সাথে ইউস করা যায় নাহ ।

For more information, visit MDN's documentation on for...of

Read More

চেক প্যালিনড্রোম (Palindrome) - using Stack

 

আমি বেশ কিছুদিন আগে Stack এবং Queue ডাটা-স্ট্রাকচার নিয়ে আলোচনা করেছিলাম সাথে জাভাস্ক্রিপ্ট এবং পাইথন দিয়ে ইমপ্লিমেন্টও করেছিলাম । তো আজকে আমি, একটি সুপরিচিত এবং সহজ প্রব্লেম নিয়ে আলোচনা করবো এবং Stack ডাটা-স্ট্রাকচার দিয়ে সমাধান করবো ।

আমরা জানি, Stack ডাটা-স্ট্রাকচার LIFO(Last In First Out) প্যারাডাইম মেনে চলে অর্থাৎ এখানে কোনো ভ্যালু শেষে এড করা হলে তা প্রথমে ডিলিট হয়ে যাবে । আপনি যদি Stack ও Queue ডাটা-স্ট্রাকচার সম্পর্কে না জেনে থাকেন তাহলে নিচের দেওয়া লিঙ্কগুলো থেকে পরে নিতে পারেন -

• Stack ডাটা-স্ট্রাকচার ইন জাভাস্ক্রিপ্ট
• Queue ডাটা-স্ট্রাকচার ইন জাভাস্ক্রিপ্ট
• Stack ডাটা-স্ট্রাকচার ইন পাইথন
• Queue ডাটা-স্ট্রাকচার ইন পাইথন

এখন, আসল কাজে ফিরে আসা যাক - আপনাকে একটি ফাংশন লিখতে হবে যা প্যারামিটার হিসেবে একটি স্ট্রিং নিবে । যদি স্ট্রিং টি Palindrome হয় তাহলে true নতুবা false রিটার্ন করবে ।

Palindrome String :-

যদি কোনো স্ট্রিং ডানে এবং বামে অর্থাৎ উভয় থেকে একই হয় তাহলে তাকে Palindrome String বলা যায় । যেমন :- mam, madam, racecar ইত্যাদি ।

এখন এই প্রব্লেমটি আমরা অনেক ভাবেই সমাধান করতে পারি আবার এক লাইনেও সমাধান করতে পারি । কিন্তু আমরা অন্যভাবে প্রব্লেমটি সমাধান না করে Stack দিয়ে কিভাবে সমাধান করতে হয় তা দেখবো এবং বোঝার চেষ্টা করবো ।

ধরি, আমাদের কাছে একটি স্ট্রিং আছে "MaM" । আমরা চাইলে সরাসরি Stack ডাটা-স্ট্রাকচার ইমপ্লিমেন্ট করে তা দিয়ে সমাধান করতে পারি । কিন্তু, Stack ডাটা-স্ট্রাকচার সরাসরি ইমপ্লিমেন্ট না করেও জাভাস্ক্রিপ্টের অ্যারে অথবা পাইথনের লিস্ট দিয়ে খুব সহজেই Stack এর কাজ করে ফেলতে পারি তো চলুন শুরু করা যাক -

স্টেপ(০১) :- প্রথমে, "MaM" স্ট্রিং এর প্রত্যেকতা উপাদানকে একটি অ্যারে বা লিস্টে রাখতে হবে । সেক্ষেত্রে, আমাদের একটি ফাকা লিস্ট বা অ্যারে নিতে হবে -

contains = []

এরপর, স্ট্রিং এর প্রথম উপাদান "M" কে contains নামের অ্যারে বা লিস্টে এ পুশ করে দেই । এক্ষেত্রে, কিন্তু "M" উপাদানকে contains নামের অ্যারের শেষে রাখলাম । এখন অ্যারেটি যদি দেখি -

contains = ["M"]

স্টেপ(০২) :- এখন স্ট্রিং এর দ্বিতীয় উপাদান অর্থাৎ "a" কে contains নামের অ্যারে বা লিস্টে পুশ করে দেই । আবারও বলি পুশ করা মানে কিন্তু উপাদানকে অ্যারের শেষে যুক্ত করা এখন অ্যারেটি যদি আবার দেখি -

contains = ["M", "a"]

স্টেপ(০৩) :- স্ট্রিং এর শেষ উপাদান অর্থাৎ "M" কে contains নামের অ্যারে বা লিস্টে পুশ করে দিলাম -

contains = ["M", "a", "M"]

এখন লিস্ট বা অ্যারে থেকে প্রত্যেকটা উপাদান pop() করবো । pop() মানে হলো যে উপাদানটি আমরা সবার শেষে এড করেছি সেই উপাদান এখন সবার প্রথমে রিমুভ করে অন্য স্ট্রিং এ রাখবো । তারপর ফাংশনে প্যারামিটার হিসেবে পাওয়া স্ট্রিং এর সাথে তুলনা করে দেখবো যে স্ট্রিং টি Palindrome কি না ।

একটা ফাকা স্ট্রিং নিলাম word নামে - 

word = ""

এখন contains অ্যারে থেকে শেষের ভ্যালুকে রিমুভ অর্থাৎ pop() করে word স্ট্রিং এর মধ্যে রাখলাম । এখন contains অ্যারে হবে ২ উপাদান বিশিষ্ট এবং word স্ট্রিং টি হবে ১ উপাদান বিশিষ্ট -

word = "M" 

contains = ["M", "a"]

আবার, contains অ্যারে থেকে শেষের ভ্যালু রিমুভ অর্থাৎ pop() করে word এর মধ্যে রাখলাম -

word = "Ma" 

contains = ["M"]

এখন,  contains অ্যারে তে একটি মাত্র উপাদানই আছে সেইটাকেও রিমুভ অর্থাৎ pop() করে word এর মধ্যে রাখলাম -

word = "MaM" 

contains = []

এই word হলো আমাদের নতুন স্ট্রিং, এখন এই word এর সাথে function এর প্যারামিটার তুলনা করবো যদি দুইটা সমান হয় তাহলে true নতুবা false রিটার্ন করবে ।

যেহেতু, আমাদের প্যারামিটার এবং word এর মান একই সেহেতু "MaM" একটি Palindrome স্ট্রিং ।

আরেকটি উদাহরণ :-

ধরি আমাদের কাছে একটি str নামে স্ট্রিং আছে,

 str = "abc" ।

স্টেপ(০১) :- প্রথমে, "abc" স্ট্রিং এর প্রত্যেকতা উপাদানকে একটি অ্যারে বা লিস্টে রাখতে হবে । সেক্ষেত্রে, আমাদের একটি ফাকা লিস্ট বা অ্যারে নিতে হবে -

contains = []

এরপর, স্ট্রিং এর প্রথম উপাদান "a" কে contains নামের অ্যারে বা লিস্টে এ পুশ করে দেই । এক্ষেত্রে, কিন্তু "a" উপাদানকে contains নামের অ্যারের শেষে রাখলাম । এখন অ্যারেটি যদি দেখি -

contains = ["a"]

স্টেপ(০২) :- এখন স্ট্রিং এর দ্বিতীয় উপাদান অর্থাৎ "b" কে contains নামের অ্যারে বা লিস্টে পুশ করে দেই । আবারও বলি পুশ করা মানে কিন্তু উপাদানকে অ্যারের শেষে যুক্ত করা এখন অ্যারেটি যদি আবার দেখি -

contains = ["a", "b"]

স্টেপ(০৩) :- স্ট্রিং এর শেষ উপাদান অর্থাৎ "c" কে contains নামের অ্যারে বা লিস্টে পুশ করে দিলাম -

contains = ["a", "b", "c"]

এখন লিস্ট বা অ্যারে থেকে প্রত্যেকটা উপাদান pop() করবো । pop() মানে হলো, যে উপাদানটি আমরা সবার শেষে এড করেছি সেই উপাদান এখন সবার প্রথমে রিমুভ করে অন্য স্ট্রিং এ রাখবো । তারপর ফাংশনে প্যারামিটার হিসেবে পাওয়া স্ট্রিং এর সাথে তুলনা করে দেখবো যে স্ট্রিং টি Palindrome কি না ।

একটা ফাকা স্ট্রিং নিলাম word নামে - 

word = ""

এখন contains অ্যারে থেকে শেষের ভ্যালুকে রিমুভ অর্থাৎ pop() করে word স্ট্রিং এর মধ্যে রাখলাম । এখন contains অ্যারে হবে ২ উপাদান বিশিষ্ট এবং word স্ট্রিং টি হবে ১ উপাদান বিশিষ্ট -

word = "c" 

contains = ["a", "b"]

আবার, contains অ্যারে থেকে শেষের ভ্যালু রিমুভ অর্থাৎ pop() করে word এর মধ্যে রাখলাম -

word = "cb" 

contains = ["a"]

এখন, contains অ্যারে তে একটি মাত্র উপাদানই আছে সেইটাকেও রিমুভ অর্থাৎ pop() করে word এর মধ্যে রাখলাম -

word = "cba" 

contains = []

এই word হলো আমাদের নতুন স্ট্রিং, এখন এই word এর সাথে function এর প্যারামিটার তুলনা করবো যদি দুইটা সমান হয় তাহলে true নতুবা false রিটার্ন করবে ।

যেহেতু, আমাদের প্যারামিটার ছিলো "abc" এবং word এর মান "cba" সেহেতু "abc" একটি Palindrome স্ট্রিং নয়।

তো চলুন এখন কোড লিখা যাক -

জাভাস্ক্রিপ্টে ইমপ্লিমেন্টেশন -

const isPalindrome = (str) => {
  let contains = [];
  for (let i = 0; i < str.length; i++) {
    contains.push(str[i]);
  }

  let word = "";
  while (contains.length > 0) {
    word += contains.pop();
  }
  return word === str;
};

Output :

isPalindrome("MaM");  // true
isPalindrome("abc"); // false

পাইথনে ইমপ্লিমেন্টেশন :-

def isPalindrome(str):
    contains = []
    for item in str:
        contains.append(item)

    word = ""
    while len(contains) > 0:
        word += contains.pop()

    return word == str

Output :

isPalindrome("MaM"); # True
isPalindrome("abc"); # False

কোড বিশ্লেষণ :-

উপরোক্ত কোডে, প্রথমে contains নামে একটি অ্যারে বা লিস্ট নিয়েছি । তারপর, স্ট্রিং এ লুপ থ্রু করেছি এবং প্রত্যেকতা উপাদানকে contains নামের অ্যারে বা লিস্টে পুশ করে দিয়েছি ।

word নামে একটি ফাকা স্ট্রিং নিয়েছি এবং contains অ্যারেতে একটি লুপ থ্রু করেছি । লুপটি ততক্ষণ চলবে যতক্ষণ পর্যন্ত contains এর সাইজ 0 থেকে বড় থাকবে । এবং প্রত্যেক ইটারেশনে word এর সাথে contains এর শেষ উপাদানটি রিমুভ হয়ে যোগ হতে থাকবে । এক পর্যায়ে আমাদের লুপটি শেষ হবে । তখন যদি word এবং str সমান হয় তাহলে funciton টি আমাদেরকে true রিটার্ন করবে নতুবা false রিটার্ন করবে ।

কোডের টাইম ও স্পেস উভয় কমপ্লেক্সিটি হবে ওর্ডার অব এন অর্থাৎ O(n) ।

Read More

স্ট্রিং(string) মেথডস ইন জাভাস্ক্রিপ্ট ইএস৬(ES6)

 

জাভাস্ক্রিপ্ট ইএস৬(ES6) এ নতুন কয়েকটি স্ট্রিং মেথডস এসেছে । তার ভেতর সবচেয়ে বেশি ৪ টি মেথডস ব্যাবহার করা হয় :-

নিচে উল্লেখ করা হলো :-

• startsWith(str, index)
• endsWith(str, length)
• includes(str, index)
• repeat(number)

যদিও আমরা স্ট্রিং(string) কি , কিভাবে ডিক্লেয়ার করা হয় সবই জানি । যখন আমরা কোনো স্ট্রিং(string) ডিক্লেয়ার করি তখন ডিক্লেয়ারকৃত স্ট্রিং(string) টির প্রত্যেকটা ক্যারেক্টারের একটা করে ইন্ডেক্স নাম্বার থাকে যেমন :-

const Name = "SHAKIL MIA";

আমাদের কোনো ক্যারেক্টারের দরকার পরলে ইন্ডেক্স নাম্বার ব্যাবহার করে তা খুব সহজেই বের করতে পারি :-

const Name = "SHAKIL MIA";
console.log(Name[0]); // S
console.log(Name[1]); // H
console.log(Name[9]); // A

স্ট্রিং(string) নিয়ে আপনি অনেক কিছুই জানেন তারপরেও একটু আলোচনা করা হলো সবার জন্য । এবার চলুন জাভাস্ক্রিপ্ট ইএস৬(ES6) এ নতুন স্ট্রিং মেথডস নিয়ে আলোচনা করা যাক :-

১। startsWith() মেথড

সিনট্যাক্স -

string.startsWith(str, index) 

কোনো স্ট্রিং নির্দিষ্ট কোন ক্যারেক্টার বা ওয়ার্ড দিয়ে শুরু হয়েছে তা চেক করার জন্য startsWith() মেথড ব্যাবহার করা হয় । এটা সবসময় Boolean ভ্যালু true অথবা false রিটার্ন করে :-

const Name = "SHAKIL MIA";
console.log(Name.startsWith('S')); // true
console.log(Name.startsWith('SHA')); // true
console.log(Name.startsWith('SHAKIL')) // true   

উপরের, সবগুলো সঠিক তাই আউটপুট true দিয়েছে । এখন যদি স্ট্রিং যে ক্যারেক্টার বা ওয়ার্ড দিয়ে শুরু হয়েছে সেইটা বাদে অন্য কিছু দিয়ে চেক করি :-

const Name = "SHAKIL MIA";
console.log(Name.startsWith('Ab')); // false
console.log(Name.startsWith('abc')); // false 

এবার কিন্তু, আমাদের false রিটার্ন করেছে কারণ- আমরা যে ক্যারেক্টার বা ওয়ার্ড দিয়ে চেক করেছি সেইটা দিয়ে স্ট্রিং শুরু হয় নাই ।

startsWith() মেথড কেস-সেনসিটিভ অর্থাৎ ছোট হাতের এবং বড় হাতের একই ক্যারেক্টার এক নাহ । নিচে দেখুন :-

const Name = "SHAKIL MIA";
console.log(Name.startsWith('s')); // false
console.log(Name.startsWith('shakil')); // false

 

আমরা সিনট্যাক্স লিখার সময়ই দেখেছি startsWith() মেথড দুইটি প্যারামিটার নেয় । প্রথমটা স্ট্রিং আর দ্বিতীয়টা ইন্ডেক্স । দ্বিতীয় প্যারামিটার অর্থাৎ ইন্ডেক্স অপশনাল আপনি চাইলে পাস করতে পারেন আবার নাও পারেন । যদি পাস নাহ করা হয় তাহলে এটি ডিফল্ট(Default) হিসেবে প্রথম ইন্ডেক্সকেই পয়েন্ট(Point) করে যা আমরা এতক্ষণ দেখলাম ।

এবার যদি ইন্ডেক্সকে পাস করি তাহলে :-

const Name = "SHAKIL MIA";
console.log(Name.startsWith('IL',4 )); // true
console.log(Name.startsWith('M',7)); // true

একটু খেয়াল করলেই বুঝতে পারবেন যে, IL কিন্তু SHAKIL MIA এর 4 নাম্বার ইন্ডেক্স থেকেই শুরু হয়েছে তাই আমাদের আউটপুট হিসেবে true রিটার্ন করেছে ।

২। endsWith() মেথড

সিনট্যাক্স -

endsWith(str, length) 

কোনো স্ট্রিং নির্দিষ্ট কোন ক্যারেক্টার বা ওয়ার্ড দিয়ে শেষ হয়েছে তা চেক করার জন্য endsWith() মেথড ব্যাবহার করা হয় । এটা সবসময় Boolean ভ্যালু true অথবা false রিটার্ন করে -

const Name = "SHAKIL MIA";
console.log(Name.endsWith('A')); // true
console.log(Name.endsWith('MIA')); // true

console.log(Name.endsWith("S")); // false 

endsWith() মেথডও কেস-সেনসিটিভ(case-sensitive) :-

const Name = "SHAKIL MIA";
console.log(Name.endsWith('a')); // false 

 

endsWith() মেথডও দুইটি প্যারামিটার নেয় প্রথমটা স্ট্রিং আর দ্বিতীয়টা length যা অপশনাল । যদি পাস নাহ করা হয় তাহলে এটি ডিফল্ট(Default) হিসেবে শেস ইন্ডেক্সকেই পয়েন্ট(Point) করে যা আমরা এতক্ষণ দেখলাম । এবার যদি length কে পাস করি তাহলে -

const Name = "SHAKIL MIA";
console.log(Name.endsWith('M', 8)); // true 

ইন্ডেক্স অনুযায়ী 8 নাম্বার পজিশনে কিন্তু I আছে ।

তারপরেও true রিটার্ন করতেছে কারণ - endsWith() মেথড index নাহ length প্যারামিটার নেয় । সেই অনুযায়ী M কিন্তু 8 নাম্বার ভ্যালু, কারণ - আমরা জানি যে length সবসময় 1 থেকে কাউন্ট হয়।

আরেকটি উদাহরণ দেখি :-

const Name = "SHAKIL MIA";
console.log(Name.endsWith('H', 2)); // true 

৩। includes() মেথড

সিনট্যাক্স -

includes(str, index) 

কোনো স্ট্রিং(string) এ নির্দিষ্ট কোন ক্যারেক্টার বা ওয়ার্ড আছে কি নাহ তা চেক করার জন্য includes() মেথড ব্যাবহার করা হয় । এটাও সবসময় Boolean ভ্যালু true অথবা false রিটার্ন করে :-

const Name = "SHAKIL MIA";
console.log(Name.includes('H')); // true
console.log(Name.includes('MIA')); // true

console.log(Name.includes("Babu")); // false 

startsWith() এবং endsWith() এর মতো includes() মেথডও কেস-সেনসিটিভ(case-sensitive) :-

const Name = "SHAKIL MIA";
console.log(Name.includes('a')); // false 

includes() মেথডও দুইটি প্যারামিটার নেয় প্রথমটা স্ট্রিং আর দ্বিতীয়টা index যা অপশনাল । এবার যদি index কে পাস করি তাহলে :-

const Name = "SHAKIL MIA";
console.log(Name.includes('MIA',7 )); // true 

৪। repeat() মেথড

সিনট্যাক্স -

repeat(number) 

একটি স্ট্রিং কে বার বার লিখতে বা রিপিট(repeat) করতে এই মেথড ব্যাবহার করা হয়। এটি একটা number প্যারামিটার হিসেবে নেয় সেই অনুযায়ী স্ট্রিং রিপিট(repeat) হয় :-

const Name = "SHAKIL ";
console.log(Name.repeat(5));

// SHAKIL SHAKIL SHAKIL SHAKIL SHAKIL 

এই ছিলো জাভাস্ক্রিপ্ট ইএস৬ এর নতুন কিছু স্ট্রিং মেথডস । আশা করি বুঝতে পারছেন ধন্যবাদ সবাইকে ।

# javascript string methods

# string methods in es6

# new strings methods in es6


Read More

Template Literal in Javascript - জাভাস্ক্রিপ্টে টেমপ্লেট লিটারেল

 

জাভাস্ক্রিপ্ট ইএস ৬(ES6) এ নতুনভাবে স্ট্রিং ডিক্লেয়ার এবং কিছু মজার কাজ করার জন্যই এসেছে টেমপ্লেট লিটারেল(Template Literal) যাকে টেমপ্লেট স্ট্রিং (Template String) ও বলা হয়।

হ্যালো সুন্দর মানুষজন, 

আজকের এই নতুন আরটিকেলে আপনাকে স্বাগতম । আজকে আলোচনার বিষয় হচ্ছে টেমপ্লেট লিটারেল(Template Literal)। 

আজকে আমরা যা যা শিখবো :-

১। টেমপ্লেট লিটারেল(Template Literal) সম্পর্কে

২। মাল্টিলাইন স্ট্রিং

৩। ভ্যারিয়েবল, কনক্যাটানেশন ও এক্সপ্রেশন

৪। টেমপ্লেট ট্যাগ

১। টেমপ্লেট লিটারেল(Template Literal) সম্পর্কে -

আগেই বলেছি, জাভাস্ক্রিপ্ট ইএস ৬(ES6) এ এই স্মার্ট ফিচারটি এসেছে । এটি ব্যাবহার করা খুবই সহজ, আমরা যখন কোনো স্ট্রিং নিই তখন সিঙ্গেল('') বা ডাবল কোটেশন("") ইউস করে নিই তাই নাহ ? হুম একদম তাই ।

তো টেমপ্লেট স্ট্রিং (Template String) ইউস করে কোনো স্ট্রিং নিতে হলে সিঙ্গেল বা ডাবল কোটেশনের পরিবর্তে - ব্যাকটিক (``) ইউস করতে হয় । ব্যাকটিক যদি আপনি খুজে না পান তাহলে আপনার কীবোর্ড এর ট্যাব tab কীর উপরে লক্ষ্য করেন।

সিনট্যাক্স :-

const Name = `Shakil Babu`

এই ফিচারটি আমাদের কি কি সুবিধা দেয় ?

 ১। এই ফিচারটির মাধ্যমে খুব সহজেই মাল্টিলাইন লাইন স্ট্রিং নেওয়া যায় । 

২। স্ট্রিং এর ভেতর ডাইনামিক ভ্যারিয়েবল ও এক্সপ্রেশন নিয়ে কাজ করা যায় । 

৩। এবং টেমপ্লেট ট্যাগ DSL(Domain Specific Language) নিয়েও কাজ করা যায়, যেমন - React.js এর Styled Component ।

২। মাল্টিলাইন স্ট্রিং :-

আমাদের অনেক সময় একের অধিক অর্থাৎ মাল্টিলাইন স্ট্রিং নিয়ে কাজ করার দরকার পরে । তো, আমরা জাভাস্ক্রিপ্ট ইএস৫(ES5) এ মাল্টিলাইন স্ট্রিং নেওয়ার সময় কিন্তু এস্কেপ(Escape) ক্যারেক্টারের সাহায্যে নিয়ে থাকি :-

const sentence = " I am first line \
I am second line "

আমরা কিন্তু মাল্টিলাইন স্ট্রিং নিয়েছি এখন যদি এইটার আউটপুট দেখি :-

console.log(sentence);
// output : I am first line I am second line

দেখছেন ? আউটপুট কিন্তু এক লাইনেই পেলাম । কারণ হলো আমরা শুধু \ ব্যাবহার করেছি সেইজন্য মাল্টিলাইন স্ট্রিং লিখতে পারছি আউটপুট মাল্টিলাইন পাচ্ছি নাহ ।

আউটপুটও যদি মাল্টিলাইন পেতে চাই তাহলে \n ব্যাবহার করে নিউ লাইন নিতে হবে ।

const sentence = " I am first line \n \
I am second line "

console.log(sentence);
/*
output:  
    I am first line
    I am second line
*/

এখন আমরা মাল্টিলাইন অর্থাৎ দুই লাইনে আউটপুটও পেয়েছি ।

উপরোক্ত কাজগুলো জাভাস্ক্রিপ্ট ইএস ৬(ES6) এর টেমপ্লেট লিটারেল(Template Literal) দিয়ে করা যাক :-

const sentence = `I am first line
I am second line `

console.log(sentence);
/*
output:  
    I am first line
    I am second line
*/

একদম সেইম আউটপুট, তাছাড়া কোনো এস্কেপ ক্যারেক্টারও ব্যাবহার করতে হয় নি । শুধু যে লাইনের পরে আমরা নিউ লাইন চাচ্ছি সেখানে একটা এন্টার দিলেই মানে এক লাইনের পরে আরেক লাইন লিখলেই ওকে।

৩। ভ্যারিয়েবল, কনক্যাটানেশন ও এক্সপ্রেশন :-

আমরা একের অধিক ভ্যারিয়েবলকে এবং স্ট্রিং কে একসঙ্গে জোড়া লাগাতে ইএস৫ এ (+) সাইনের দ্বারা করে থাকি যেমন :-

const Name = 'Shakil Babu';
const town = 'Bogura';

console.log('I am ' + Name + ' from ' + town);
// output;
// I am Shakil Babu from Bogura

আমরা দুইটা ভ্যারিয়েবল নিয়েছি Name এবং town নামে । তারপর লগ করেছি স্ট্রিং এবং ভ্যারিয়েবল গুলো (+) সাইনের দ্বারা কনকেট করে। এখন একই কাজ যদি আমরা ইএস৬ এর টেমপ্লেট লিটারেলে করি :-

const Name = 'Shakil Babu';
const town = 'Bogura';

console.log(`I am ${Name} from ${town}`);
// output;
// I am Shakil Babu from Bogura

আগের তুলনায় অনেক সহজে আমরা কাজটা করতে পারলাম । একটা জিনিস মনে রাখবেন যেকোনো ভ্যারিয়েবল বা এক্সপ্রেশনই ইউস করেন নাহ কেন ${} এই সিনট্যাক্স এর ভেতরে করতে হবে ।

টেমপ্লেট লিটারেলের আরও কিছু ব্যাবহার দেখা যাক :-

আমরা চাইলে ছোট-খাটো এক্সপ্রেশনও ইউস করতে পারি :-

const number = 10;
console.log(`Number is ${number > 20 ? 'greator than 20':'less than 20'}`) 
// output:
// Number is less than 20

আরও একটি :-

const num = 10;
console.log(`Sum = ${num + 20 + 20}`);
// output:
// Sum = 50

৪। টেমপ্লেট ট্যাগ :-

টেমপ্লেট ট্যাগ জিনিসটা ইউস হয় সাধারণত বিভিন্ন লাইব্রেরির সাথে যেমন- Styled Component, Apollo and GraphQl ইত্যাদি । যদিও এই জিনিসটা আমাদের এখনই যে শিখতে হবে তা নাহ তাও হালকা ধারণা থাকা ভালো :-

এখন আমরা দেখবো Styled Component এর সাথে টেমপ্লেট স্ট্রিং কিভাবে ব্যাবহার হয় । Styled Component মূলত React.js এর একটা লাইব্রেরি যা কাস্টম স্টাইলসহ অনেক কাজেই ব্যাবহার হয় ।

Styled Component এ টেমপ্লেট স্ট্রিং ব্যাবহার করা হয় CSS লিখতে যেমন :-

const p = Styled.p`

font-size : 20px ; 
background-color: blue;
color: white 

উপরোক্ত ভাবে আমরা যেকোনো (div,h1-h6,span, button, section and etc) স্টাইল লিখতে পারি ।

টেমপ্লেট ট্যাগ এখনই আপনার বুঝতে হবে নাহ সময় হইলে এমনিই বুঝে যাবেন আপাতত ধারণা থাকলো একটু, কি মজা!

ধন্যবাদ সবাইকে । 

# template literals in es6

# template strings

# es6 template literals

Read More