Learn JavaScript

lesson ১ / ৮ · প্রথম program: console, let আর const, type, typeof

Module ১ · প্রথম program: console, let আর const, type, typeof

এক লাইন করে একটা program: console.log, সংখ্যা আর text

Freeপড়া

এই lesson-এ যা শিখবে

  • ছোট একটা program লিখতে পারবে, যেটা লেখা, একটা সংখ্যা আর একটা যোগফল ছাপে।
  • ছয়টা arithmetic operator ব্যবহার করতে পারবে, আর বুঝিয়ে বলতে পারবে 7 / 2 কেন 3.5 ছাপে, 3 না।
  • প্রথম program ভুল টাইপ হলে Node 22 যে message দেখায়, সেগুলো পড়তে পারবে, আর প্রতিটা ঠিক করতে পারবে।

Maria-র নানু বিরিয়ানির রেসিপিটা একটা কার্ডে লিখে রাখেন। কার্ডে ধাপগুলো পরপর লেখা, আর ক্রমটা জরুরি: চাল আগে ধোবে, তারপর রাঁধবে, উল্টোটা কখনো না। Program-ও ঠিক এরকম একটা তালিকা। Computer ওটা উপর থেকে পড়ে, এক লাইন করে, আর প্রতিটা লাইন যা বলে হুবহু তাই করে। এই lesson রেসিপির কার্ডটাকে একটা program বানাবে, তারপর সেই program-কে দিয়ে অঙ্ক করাবে।

রেসিপির কার্ড, এবার program হিসেবে

এই হলো কার্ডটা, JavaScript-এর চার লাইনে। প্রতিটা লাইন একটা করে ধাপ ছাপে।

console.log("1. Wash the rice.");
console.log("2. Fry the onions until brown.");
console.log("3. Add the meat and the spices.");
console.log("4. Add the rice and cook on low heat.");
1. Wash the rice.
2. Fry the onions until brown.
3. Add the meat and the spices.
4. Add the rice and cook on low heat.

চার লাইন ঢুকল, চার লাইন বেরোল, একই ক্রমে। প্রতিটা console.log নিজের লেখাটা ছাপে, তারপর নতুন লাইনে চলে যায়। তাই লাইন ভাঙাটা তোমাকে নিজে টাইপ করতে হয় না।

প্রতিটা লাইন একটা statement: একটা পুরো নির্দেশ, শেষে একটা semicolon। Engine প্রথম statement চালায়, তারপর দ্বিতীয়টা, এভাবে শেষটা পর্যন্ত। Statement ফুরিয়ে গেলে program শেষ।

Statement উপর থেকে নিচে চলে, আর প্রতিটা console.log console-এ একটা করে লাইন যোগ করে Program Console লাইন 1: console.log("1. Wash ..."); লাইন 2: console.log("2. Fry ..."); লাইন 3: console.log("3. Add ..."); লাইন 4: console.log("4. Add ..."); 1. Wash the rice. 2. Fry the onions ... 3. Add the meat ... 4. Add the rice ... প্রতিটা console.log একটা করে লাইন যোগ করে, statement যে ক্রমে চলে সেই ক্রমে

তাহলে program হলো statement-এর একটা তালিকা, উপর থেকে নিচে চলে, আর console ঠিক সেই ক্রমেই দেখায় ওরা কী ছাপল।

একটা statement, টুকরো ধরে ধরে

প্রথম লাইনটা খুলে দেখা যাক। এতে ছয়টা টুকরো আছে, আর প্রতিটার নিজের একটা কাজ আছে।

টুকরোএটা কী
consoleএকটা তৈরি করা object, Node আর প্রতিটা browser তোমার program-কে এটা দিয়ে দেয়। এর ভেতরে ছাপার tool রাখা আছে।
."এর ভেতর থেকে এটা নাও।" Dot-টা console-এর ভেতরে হাত ঢুকিয়ে ওর একটা tool বের করে আনে।
logযে tool ছাপে। এভাবে যে tool চালানো হয়, তাকে বলে function (Module 5)।
( ... )Call: function-টা এখনই চালাও, bracket-এর ভেতরে যা আছে সেটা দিয়ে। ভেতরে যা বসে, তার নাম argument।
"1. Wash the rice."একটা string: quote-এর মাঝে একটুকরো লেখা। Quote দুইটা ছাপা হয় না।
;Statement-এর শেষ, বাক্যের শেষে দাঁড়ির মতো।

একটা console.log statement

console.log(value1, value2, ...);
  • console.log হলো ছাপার function, বানান হুবহু এরকম, সব ছোট হাতের অক্ষরে।
  • value1, value2, ... হলো argument: যতগুলো খুশি value, মাঝে comma দিয়ে।
  • Value-গুলো এক লাইনে ছাপা হয়, দুইটার মাঝে একটা করে space, তারপর লাইন শেষ।
  • ; statement-টা শেষ করে। এই track সব সময় এটা লেখে, আর কেন, সেটা বলবে lesson 06।

JavaScript বড় হাতের অক্ষর আলাদা করে দেখে। console.log কাজ করে, আর Console.log লিখলে program একটা error দিয়ে থেমে যায়, নিচের "যে ভুলগুলো সবাই করে" অংশে দেখবে। তাই একটা statement মানে বাঁধা ক্রমে কয়েকটা টুকরো, আর প্রতিটা টুকরোর বানান হুবহু ঠিক।

এক call-এ কয়েকটা value

console.log যতগুলো খুশি argument নেয়। ক্রম ধরে ছাপে, প্রতি জোড়ার মাঝে একটা করে space দিয়ে। সংখ্যার জন্য quote লাগে না।

console.log("Rice:", 450, "taka");
console.log("Items:", 3);
console.log(2026);
console.log();
console.log("The line above is empty.");
Rice: 450 taka
Items: 3
2026

The line above is empty.

Output-এর প্রথম লাইনটা দেখো। Colon-এর পরে তুমি কোনো space টাইপ করোনি, তবু একটা space আছে। Argument-গুলোর মাঝের space console.log নিজেই বসায়, তাই "Rice:"-এর নিজের কোনো space লাগে না। কোনো argument ছাড়া call করলে একটা ফাঁকা লাইন ছাপা হয়।

তাই comma দিয়ে value আলাদা করো, space-গুলো console.log তোমার হয়ে বসিয়ে দেবে।

অঙ্ক: ছয়টা operator

Program-এর ভেতরের একটা সংখ্যা অঙ্কে অংশ নিতে পারে। 120 + 45 লেখো, engine ছাপার আগে হিসাবটা করে ফেলবে। Code-এর যে টুকরো একটা value তৈরি করে, যেমন 120 + 45, তাকে বলে expression। মাঝখানের চিহ্নটা হলো operator।

console.log(120 + 45);
console.log(120 - 45);
console.log(12 * 5);
console.log(7 / 2);
console.log(7 % 2);
console.log(2 ** 10);
165
75
60
3.5
1
1024
Operatorনামউদাহরণফল
+যোগ120 + 45165
-বিয়োগ120 - 4575
*গুণ12 * 560
/ভাগ7 / 23.5
%ভাগশেষ7 % 21
**power2 ** 101024

ক্রমটা স্কুলের অঙ্কের মতোই। *, / আর % আগে হয়, + আর - পরে, আর ** হয় সবার আগে। Bracket থাকলে সেটা তারও আগে।

console.log(2 + 3 * 4);
console.log((2 + 3) * 4);
console.log(10 - 4 - 3);
console.log(2 * 3 ** 2);
14
20
3
18

2 + 3 * 4 মানে 2 + 12, আর bracket দিলে সেটা হয়ে যায় 5 * 4। 10 - 4 - 3 বাঁ দিক থেকে হিসাব হয়, তাই এটা 6 - 3। ক্রম নিয়ে সন্দেহ হলে bracket দিয়ে দাও: খরচ নেই, আর পরের পাঠক তোমাকে ধন্যবাদ দেবে। তাই expression-এর হিসাব আগে হয়, স্কুলের ক্রমে, আর console.log-এর কাছে পৌঁছায় শুধু তার value-টা।

ভাগ করলে ভগ্নাংশ থেকে যায়

7 / 2 ছাপল 3.5। JavaScript-এ পূর্ণসংখ্যা আর দশমিক, দুইটার জন্য একই রকম সংখ্যা, তাই ভাগ কখনো ভগ্নাংশটা ফেলে দেয় না। ওই এক রকম সংখ্যাকে কাছ থেকে দেখাবে lesson 03।

শুধু পূর্ণ অংশটা চাইলে সেটা স্পষ্ট করে চেয়ে নাও, Math.floor দিয়ে। এটা argument-টাকে নিচের দিকে নামিয়ে আনে, সমান বা তার নিচের পূর্ণসংখ্যায়। Math হলো আরেকটা তৈরি করা object, console-এর মতোই, সংখ্যার tool-এ ভরা।

console.log(7 / 2);
console.log(Math.floor(7 / 2));
console.log(10 / 3);
console.log(9 / 3);
3.5
3
3.3333333333333335
3

9 / 3 ছাপে 3, 3.0 না, কারণ ফল পূর্ণসংখ্যা হলে পূর্ণসংখ্যা হিসেবেই ছাপা হয়। 10 / 3-এর শেষে আছে একটা 5, যেখানে তুমি হয়তো 3 আশা করেছিলে। ওই শেষ অঙ্কটা সত্যি, আর ওটা কোথা থেকে আসে, বলবে lesson 03।

C জানা থাকলে

C-তে দুইটা int value-র মধ্যে 7 / 2 হলো 3: integer division ভগ্নাংশটা ফেলে দেয়। JavaScript-এ কোনো int type নেই, তাই একই expression-এর ফল 3.5। C-র অভ্যাস এখানে নিয়ে এলে উত্তর ভুল আসবে, অথচ কোনো error আসবে না। Positive সংখ্যার C-র মতো ভাগ চাইলে লেখো Math.floor(a / b)।

তাই / সব সময় ভগ্নাংশ রাখে, আর জেনেবুঝে সেটা ফেলতে চাইলে Math.floor।

ভাগশেষ আর power

% দেয় ভাগের পরের ভাগশেষ। 17 % 5 হলো 2, কারণ 17-এ 5 তিনবার যায়, আর 2 বাকি থাকে। এর সবচেয়ে চেনা কাজ হলো একটা সংখ্যা জোড় কি না দেখা: জোড় n-এর জন্য n % 2 হয় 0, আর বিজোড়ের জন্য 1।

Negative সংখ্যায় উত্তরের চিহ্ন বাঁ দিকেরটা মানে। Bob আশা করে -7 % 3 হবে 2, কিন্তু হয় না।

console.log(17 % 5);
console.log(-7 % 3);
console.log(7 % -3);
console.log(4.5 % 2);
2
-1
1
0.5

-7 % 3 হলো -1: -7 থেকে দুইবার 3 বের করে নাও, বাকি থাকে -1, চিহ্নটা -7-এর। % দশমিকেও কাজ করে, তাই 4.5 % 2 হলো 0.5।

** একটা সংখ্যার power বের করে। 2 ** 10 মানে দশটা 2 পরপর গুণ করা, 1024। Power 0.5 হলে সেটা বর্গমূল, তাই 2 ** 0.5 ছাপে 1.4142135623730951। তাই % হলো ভাগশেষ, চিহ্ন বাঁ দিকেরটা, আর ** হলো power।

Quote-এর ভেতরে লেখা

String double quote বা single quote, দুইটার মাঝেই বসতে পারে। "Hello" আর 'Hello' একই string। এই track double quote লেখে, কারণ Prettier-এর default ওটাই, আর Prettier হলো সেই formatter যেটা বেশিরভাগ JavaScript team চালায় (lesson 06)।

লেখার ভেতরেই quote থাকলে দুই রকম quote কাজে আসে। String-টা অন্য রকম quote-এ রাখো, নয়তো quote-এর আগে একটা backslash দাও।

console.log("It's Zara's turn.");
console.log('She said "go".');
console.log("She said \"go\".");
It's Zara's turn.
She said "go".
She said "go".

\"-এর backslash engine-কে বলে, এই quote-টা লেখার অংশ, string-এর শেষ না। একে বলে escape, আর backslash-টা ছাপা হয় না। তাই string যে রকম quote দিয়ে খোলে, সেই রকম quote দিয়েই বন্ধ হয়, আর ভেতরের quote হয় অন্য রকমের, নয়তো escape করা।

Example 1: সবচেয়ে ছোট program

একটা statement-ই একটা পুরো program। Zara সবকিছুর আগে Playground-এ এটাই চালায়।

console.log("Hello, JavaScript.");
Hello, JavaScript.

শুরুর কোনো প্রস্তুতির লাইন নেই, শেষের কোনো লাইনও নেই। File-এ একটাই statement, engine সেটা চালায়, আর program শেষ।

Run in Compiler
Example 2: Kenji-র বিল, হিসাব করে দিল program

Kenji কেনে 60 টাকা করে দুইটা খাতা, 25 টাকার একটা কলম আর 450 টাকার একটা ব্যাগ। যোগ-গুণের কাজটা সে program-কে দিয়ে করায়।

console.log("Notebooks:", 2 * 60);
console.log("Pen:", 25);
console.log("Bag:", 450);
console.log("Total:", 2 * 60 + 25 + 450);
Notebooks: 120
Pen: 25
Bag: 450
Total: 595

2 * 60 + 25 + 450 মানে 120 + 25 + 450, কারণ * আগে হয়। Label-গুলো string আর টাকার অঙ্কগুলো expression, এক call-এই পাশাপাশি।

Run in Compiler
Example 3: মিনিট থেকে ঘণ্টা আর মিনিট

একটা সিনেমা 135 মিনিটের, আর Amara এটাকে ঘণ্টা আর মিনিটে দেখতে চায়। Math.floor দেয় পুরো ঘণ্টাগুলো, আর % দেয় বাকি মিনিট।

console.log("Film length:", 135, "minutes");
console.log("That is", Math.floor(135 / 60), "h", 135 % 60, "min");
Film length: 135 minutes
That is 2 h 15 min

135 / 60 হলো 2.25, আর Math.floor সেটাকে বানায় 2। 135 % 60 হলো দুই ঘণ্টা পুরো হওয়ার পরে যা বাকি থাকে, 15। এই জুটি, Math.floor আর %, সেকেন্ড, মিনিট, সেন্টিমিটার আর খুচরা পয়সাও এভাবেই ভাগ করে।

Run in Compiler
Example 4: এমন গড়, যেটা পূর্ণসংখ্যা না

Alice-এর তিনটা পরীক্ষার নম্বর: 72, 65 আর 80। সে গড়টা চায়, আর হিসাবের ক্রমটাও নিজের চোখে দেখতে চায়।

console.log("Sum:", 72 + 65 + 80);
console.log("Average:", (72 + 65 + 80) / 3);
console.log("Without brackets:", 72 + 65 + 80 / 3);
Sum: 217
Average: 72.33333333333333
Without brackets: 163.66666666666666

Bracket যোগটা আগে করিয়ে নেয়। Bracket না থাকলে শুধু 80-কে 3 দিয়ে ভাগ করা হয়, আর "গড়" হয়ে যায় প্রতিটা নম্বরের চেয়েও বড়। ভুল program-এর প্রথম লক্ষণ এটাই: এমন উত্তর, যেটা সত্যি হতেই পারে না। ষোলোটা অঙ্কের বদলে 72.33 কীভাবে ছাপতে হয়, দেখাবে Module 2।

Run in Compiler

এটা কোথায় কাজে লাগে

  • Chrome DevTools. Web page-এর প্রতিটা console.log ছাপা হয় browser-এর developer tools-এর Console panel-এ। Frontend developer-রা কাজের সময় ওই panel খুলেই রাখে।
  • Node.js server. Node-এ console.log লেখে standard output-এ, মানে program-এর মূল output-এর ধারায়। Container ওখানে যা ছাপে, Docker সব রেখে দেয়, আর docker logs সেটা দেখায়।
  • এই track-এর judge. Judge করা problem-এর উত্তর হলো তোমার program standard output-এ যা ছাপে, সেটাই। তাই এই track-এর প্রতিটা উত্তর জমা পড়ে console.log দিয়েই।
  • Debugging. Program-এর মাঝখানে একটা console.log বসালে ওই মুহূর্তের একটা value দেখা যায়। বেশিরভাগ beginner প্রথমে এই tool-টাই ধরে। VS Code-এ একটা আসল debugger-ও আছে, যেটা program-কে একটা লাইনে থামিয়ে রাখে (Module 17)।

যে ভুলগুলো সবাই করে

১. Quote ছাড়া লেখা।

console.log(Hello);

Playground-এ run শেষ হয় Runtime error দিয়ে, সাথে ReferenceError: Hello is not defined। Quote না থাকলে Hello একটা নাম, আর ওই নামে এখনো কিছু নেই (নাম বানানো শেখাবে lesson 02)। লেখো console.log("Hello");। Quote তুমি ভুলবে, কারণ তোমার চোখে শব্দটা লেখার মতোই দেখায়, আর তুমি কী বোঝাতে চাইছ, engine সেটা দেখতে পায় না।

২. Quote দুইটা মেলে না।

console.log("Hello');

Program শুরুই হয় না: SyntaxError: Invalid or unexpected token। String খুলেছে double quote দিয়ে, তাই শেষ হবে শুধু আরেকটা double quote-এ, আর সেটা নেই। Word processor থেকে paste করা বাঁকা quote, যেমন “Hello”, থেকেও একই message আসে। দুই মাথায় একই সোজা quote দাও।

৩. বড় হাতের C।

Console.log("Hello");

ReferenceError: Console is not defined। JavaScript-এর কাছে Console আর console দুইটা আলাদা নাম, আর আছে শুধু দ্বিতীয়টা। তুমি বড় হাতের C টাইপ করবে, কারণ বাক্য তো বড় হাতের অক্ষর দিয়েই শুরু হয়। Dot-এর পরে বানান ভুল হলে, যেমন console.lg, আসে অন্য message: TypeError: console.lg is not a function।

৪. Power-এর আগে minus চিহ্ন।

console.log(-2 ** 2);

Program শুরুই হয় না: SyntaxError: Unary operator used immediately before exponentiation expression. Parenthesis must be used to disambiguate operator precedence। এর মানে 4 না -4, এই নিয়ে গণিতবিদ আর programmer-দের মধ্যে মতের মিল নেই, তাই JavaScript আন্দাজ করতে রাজি না। 4 চাইলে লেখো (-2) ** 2, -4 চাইলে -(2 ** 2)।

মাথা খাটাও

Bob আগে C লিখেছে। Run করার আগে সে এই program-এর চারটা লাইন আন্দাজ করে, আর তার দুইটা ভুল হয়।

console.log(7 / 2);
console.log(Math.floor(7 / 2));
console.log(7 % 2);
console.log(Math.floor(-7 / 2));

চারটা লাইনই লিখে ফেলো, তারপর run করো। Bob কোন দুইটা ভুল করল, আর শেষটা কেন?

Math.floor কী করে, আবার পড়ো: এটা নিচের দিকে নামায়। সংখ্যারেখায় -3.5 থেকে নিচের দিক কোনটা?

অনুশীলন ১সহজ

David-এর একটা ছোট দোকান আছে। একজন কাস্টমার কেনেন 15 টাকা করে 3 কাপ চা, 20 টাকা করে 2টা সমুচা আর 55 টাকার 1টা কেক। একটা রসিদ ছাপো: প্রতিটা জিনিসের জন্য এক লাইন, তার দামসহ, তারপর মোট। প্রতিটা গুণ আর যোগফল program-কে দিয়েই করাও।

Output. হুবহু এই চার লাইন।

Tea: 45
Samosa: 40
Cake: 55
Total: 140
// Print the receipt, one console.log per line.
// Write the costs as sums, such as 3 * 15, not as 45.

Grade হয় না। তোমার output উপরের চার লাইনের সঙ্গে মিলিয়ে দেখো, character ধরে ধরে।

Run in Compiler
অনুশীলন ২সহজ

Zara একটা বাগানে বেড়া দিচ্ছে, যেটা 12 মিটার লম্বা আর 5 মিটার চওড়া। ঘাসের বীজের জন্য তার লাগবে বাগানের ক্ষেত্রফল, আর বেড়ার জন্য পরিসীমা।

Output. হুবহু এই দুই লাইন।

Area: 60
Perimeter: 34
// The area is length times width.
// The perimeter is twice the length plus twice the width.
// Use brackets where the order matters.

Grade হয় না। তারপর 12-কে 12.5 করে দাও, আর দুইটা উত্তরই হাতে হিসাব করে মিলিয়ে নাও।

Run in Compiler

সচরাচর যে প্রশ্নগুলো আসে

  • শুধু print না লিখে console.log কেন?

    JavaScript বানানো হয়েছিল web page-এর জন্য, আর ভাষাটার নিজের কোনো ছাপার statement নেই। Browser আর Node, দুইজনেই তোমার program-এর হাতে ছাপার জন্য একটা console object ধরিয়ে দেয়। Browser-এ print()-এর মানে আগে থেকেই অন্য কিছু: ওটা page-টা কাগজে ছাপার dialog খোলে।

  • Semicolon কি লিখতেই হবে?

    অনেক সময় ওটা ছাড়াও program চলে, কারণ engine কিছু নিয়ম মেনে বাদ পড়া semicolon নিজেই বসিয়ে নেয়। ওই নিয়মগুলোর একটা case মানুষকে চমকে দেয়। এই track প্রতিটা semicolon লেখে, আর case-টা দেখাবে lesson 06।

  • "450" আর 450 কি একই?

    না। প্রথমটা লেখা, যেটায় শুধু অঙ্কগুলো দেখা যাচ্ছে, আর দ্বিতীয়টা একটা সংখ্যা। console.log দুইটা একইভাবে ছাপে, তাই পার্থক্যটা চোখে পড়ে না। + কিন্তু দুইটাকে এক চোখে দেখে না, Module 2-এ দেখবে।

  • 10 / 3-এর শেষে 5 কেন?

    JavaScript-এ সংখ্যা রাখা হয় binary-তে, আর বেশিরভাগ দশমিক ভগ্নাংশ হুবহু রাখা যায় না। শেষ অঙ্কটা সেই খুব ছোট পার্থক্যটাই দেখায়। বিখ্যাত উদাহরণটা, 0.1 + 0.2, দেখাবে lesson 03।

মূল কথা

  • Program হলো statement-এর একটা তালিকা, উপর থেকে নিচে চলে; প্রতিটা শেষ হয় semicolon দিয়ে।
  • console.log তার argument-গুলো এক লাইনে ছাপে, মাঝে space দিয়ে, তারপর লাইন শেষ করে।
  • ছয়টা operator হলো + - * / % **, হিসাব হয় স্কুলের ক্রমে; bracket সবার আগে।
  • / ভগ্নাংশ রাখে, তাই 7 / 2 হলো 3.5; Math.floor জেনেবুঝে সেটা ফেলে দেয়, আর % হলো ভাগশেষ, চিহ্ন বাঁ দিকেরটা।
  • String বসে মিলে যাওয়া দুইটা quote-এর মাঝে; এই track double quote লেখে।
  • টাইপে ভুল হলে Node message দিয়ে program থামায়: SyntaxError মানে program শুরুই হয়নি, আর ReferenceError বা TypeError আসে যে লাইনে আটকেছে সেখান থেকে।

এরপর lesson 02 একটা value-কে একটা নাম দেবে, যাতে program একটা সংখ্যা রেখে দিতে পারে আর পরে সেটা বদলাতে পারে।

lesson ১ শেষ

শেষ হলে চিহ্ন দিন, অগ্রগতি আপনার সাথে থাকবে।

পরেরটা: let আর const: একটা value-র একটা নাম, আর var না কেন

এক লাইন করে একটা program: console.log, সংখ্যা আর text | Learn JavaScript | Progsity