# ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ: ਐਰੇ ਅਤੇ ਲੂਪ  > ਸਕੈਚਨੋਟ [Tomomi Imura](https://twitter.com/girlie_mac) ਵੱਲੋਂ ## ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼ [ਲੈਕਚਰ ਤੋਂ ਪਹਿਲਾਂ ਕਵੀਜ਼](https://ff-quizzes.netlify.app/web/quiz/13) ਕੀ ਤੁਸੀਂ ਕਦੇ ਸੋਚਿਆ ਹੈ ਕਿ ਵੈਬਸਾਈਟਾਂ ਖਰੀਦਦਾਰੀ ਕਾਰਟ ਆਈਟਮਾਂ ਨੂੰ ਕਿਵੇਂ ਟ੍ਰੈਕ ਕਰਦੀਆਂ ਹਨ ਜਾਂ ਤੁਹਾਡੇ ਦੋਸਤਾਂ ਦੀ ਸੂਚੀ ਕਿਵੇਂ ਦਿਖਾਉਂਦੀਆਂ ਹਨ? ਇਹ ਸਾਰਾ ਕੁਝ ਐਰੇ ਅਤੇ ਲੂਪ ਦੀ ਮਦਦ ਨਾਲ ਸੰਭਵ ਹੁੰਦਾ ਹੈ। ਐਰੇ ਡਿਜੀਟਲ ਕੰਟੇਨਰਾਂ ਵਾਂਗ ਹਨ ਜੋ ਕਈ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਇਕੱਠੇ ਰੱਖਦੇ ਹਨ, ਜਦਕਿ ਲੂਪ ਤੁਹਾਨੂੰ ਸਾਰਾ ਡਾਟਾ ਬਿਨਾਂ ਦੁਹਰਾਏ ਹੋਏ ਕੋਡ ਦੇ ਨਾਲ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਕੰਮ ਕਰਨ ਦਿੰਦੇ ਹਨ। ਇਹ ਦੋਨੋ ਸੰਕਲਪ ਇਕੱਠੇ ਮਿਲ ਕੇ ਤੁਹਾਡੇ ਪ੍ਰੋਗਰਾਮਾਂ ਵਿੱਚ ਜਾਣਕਾਰੀ ਨੂੰ ਸੰਭਾਲਣ ਲਈ ਬੁਨਿਆਦ ਰਚਦੇ ਹਨ। ਤੁਸੀਂ ਹਰੇਕ ਕਦਮ ਨੂੰ ਹੱਥੋਂ ਲਿਖਣ ਤੋਂ ਬਚ ਕੇ ਸੌਖਾ ਅਤੇ ਕੁਸ਼ਲ ਕੋਡ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋਵੋਗੇ ਜੋ ਸੈਂਕੜੇ ਜਾਂ ਹਜ਼ਾਰਾਂ ਆਈਟਮਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰਕਿਰਿਆ ਕਰ ਸਕਦਾ ਹੈ। ਇਸ ਪਾਠ ਦੇ ਅੰਤ ਤੱਕ, ਤੁਸੀਂ ਸਿਰਫ ਕੁਝ ਲਾਈਨਾਂ ਦੇ ਕੋਡ ਨਾਲ ਜਟਿਲ ਡਾਟਾ ਕੰਮਾਂ ਨੂੰ ਪੂਰਾ ਕਰਨ ਦਾ ਤਰੀਕਾ ਸਮਝ ਜਾਵੋਗੇ। ਆਓ, ਇਨ੍ਹਾਂ ਜ਼ਰੂਰੀ ਪ੍ਰੋਗਰਾਮਿੰਗ ਸੰਕਲਪਾਂ ਦੀ ਖੋਜ ਕਰੀਏ। [](https://youtube.com/watch?v=1U4qTyq02Xw "Arrays") [](https://www.youtube.com/watch?v=Eeh7pxtTZ3k "Loops") > 🎥 ਉੱਪਰ ਦਿੱਤੀਆਂ ਤਸਵੀਰਾਂ 'ਤੇ ਕਲਿਕ ਕਰੋ ਐਰੇ ਅਤੇ ਲੂਪ ਬਾਰੇ ਵੀਡੀਓ ਦੇਖਣ ਲਈ। > ਤੁਸੀਂ ਇਹ ਪਾਠ [Microsoft Learn](https://docs.microsoft.com/learn/modules/web-development-101-arrays/?WT.mc_id=academic-77807-sagibbon) 'ਤੇ ਲੈ ਸਕਦੇ ਹੋ! ## ਐਰੇ ਐਰੇ ਨੂੰ ਡਿਜੀਟਲ ਫਾਈਲਿੰਗ ਕੈਬਿਨੇਟ ਵਾਂਗ ਸੋਚੋ - ਇੱਕ ਦਰਾਜ਼ ਵਿੱਚ ਇੱਕ ਦਸਤਾਵੇਜ਼ ਸਟੋਰ ਕਰਨ ਦੀ ਬਜਾਏ, ਤੁਸੀਂ ਕਈ ਸਬੰਧਤ ਆਈਟਮਾਂ ਨੂੰ ਇੱਕ ਸੰਗਠਿਤ ਕੰਟੇਨਰ ਵਿੱਚ ਰੱਖ ਸਕਦੇ ਹੋ। ਪ੍ਰੋਗਰਾਮਿੰਗ ਦੇ ਤੌਰ 'ਤੇ, ਐਰੇ ਤੁਹਾਨੂੰ ਕਈ ਜਾਣਕਾਰੀ ਦੇ ਟੁਕੜਿਆਂ ਨੂੰ ਇੱਕ ਸੰਗਠਿਤ ਪੈਕੇਜ ਵਿੱਚ ਸਟੋਰ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਚਾਹੇ ਤੁਸੀਂ ਫੋਟੋ ਗੈਲਰੀ ਬਣਾਉਣ, ਟੂ-ਡੂ ਸੂਚੀ ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਨ ਜਾਂ ਖੇਡ ਵਿੱਚ ਉੱਚ ਸਕੋਰ ਟ੍ਰੈਕ ਕਰਨ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰ ਰਹੇ ਹੋਵੋ, ਐਰੇ ਡਾਟਾ ਸੰਗਠਨ ਲਈ ਬੁਨਿਆਦ ਪ੍ਰਦਾਨ ਕਰਦੇ ਹਨ। ਆਓ ਵੇਖੀਏ ਇਹ ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ। ✅ ਐਰੇ ਹਰ ਜਗ੍ਹਾ ਹਨ! ਕੀ ਤੁਸੀਂ ਐਰੇ ਦਾ ਕੋਈ ਅਸਲ ਜ਼ਿੰਦਗੀ ਦਾ ਉਦਾਹਰਨ ਦੇ ਸਕਦੇ ਹੋ, ਜਿਵੇਂ ਕਿ ਸੂਰਜੀ ਪੈਨਲ ਐਰੇ? ### ਐਰੇ ਬਣਾਉਣਾ ਐਰੇ ਬਣਾਉਣਾ ਬਹੁਤ ਹੀ ਆਸਾਨ ਹੈ - ਸਿਰਫ਼ ਚੌਰਸ ਬ੍ਰੈਕਟ ਵਰਤੋ! ```javascript // Empty array - like an empty shopping cart waiting for items const myArray = []; ``` **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ?** ਤੁਸੀਂ ਸਿਰਫ਼ ਉਹ ਚੌਰਸ ਬ੍ਰੈਕਟ `[]` ਵਰਤ ਕੇ ਇੱਕ ਖਾਲੀ ਕੰਟੇਨਰ ਬਣਾਇਆ ਹੈ। ਇਸਨੂੰ ਇੱਕ ਖਾਲੀ ਲਾਇਬ੍ਰੇਰੀ ਸ਼ੈਲਫ ਵਾਂਗ ਸੋਚੋ - ਇਹ ਤਿਆਰ ਹੈ ਜੋ ਵੀ ਕਿਤਾਬਾਂ ਤੁਸੀਂ ਉੱਥੇ ਰੱਖਣਾ ਚਾਹੁੰਦੇ ਹੋ। ਤੁਸੀਂ ਆਪਣੇ ਐਰੇ ਨੂੰ ਸ਼ੁਰੂ ਤੋਂ ਹੀ ਮੁੱਖ ਮੁੱਲਾਂ ਨਾਲ ਭਰ ਸਕਦੇ ਹੋ: ```javascript // Your ice cream shop's flavor menu const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // A user's profile info (mixing different types of data) const userData = ["John", 25, true, "developer"]; // Test scores for your favorite class const scores = [95, 87, 92, 78, 85]; ``` **ਧਿਆਨ ਦੇਣ ਵਾਲੀਆਂ ਕੁਝ ਚੀਜ਼ਾਂ:** - ਤੁਸੀਂ ਇੱਕ ਹੀ ਐਰੇ ਵਿੱਚ ਟੈਕਸਟ, ਨੰਬਰ, ਜਾਂ ਸੱਚ/ਝੂਠ ਦੇ ਮੁੱਲ ਸਟੋਰ ਕਰ ਸਕਦੇ ਹੋ - ਸਿਰਫ਼ ਹਰ ਆਈਟਮ ਨੂੰ ਇੱਕ ਕਾਮਾ ਨਾਲ ਵੱਖ ਕਰੋ - ਆਸਾਨ! - ਐਰੇ ਸਬੰਧਤ ਜਾਣਕਾਰੀ ਨੂੰ ਇਕੱਠੇ ਰੱਖਣ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹਨ ### ਐਰੇ ਇੰਡੈਕਸਿੰਗ ਇੱਥੇ ਕੁਝ ਅਜਿਹਾ ਹੈ ਜੋ ਸ਼ੁਰੂ ਵਿੱਚ ਅਜਿਹਾ ਲੱਗ ਸਕਦਾ ਹੈ: ਐਰੇ ਆਪਣੇ ਆਈਟਮਾਂ ਨੂੰ 0 ਤੋਂ ਗਿਣਣਾ ਸ਼ੁਰੂ ਕਰਦੇ ਹਨ, 1 ਤੋਂ ਨਹੀਂ। ਇਹ ਜ਼ੀਰੋ-ਬੇਸਡ ਇੰਡੈਕਸਿੰਗ ਦਾ ਮੂਲ ਕਮਪਿਊਟਰ ਮੈਮੋਰੀ ਦੇ ਕੰਮ ਕਰਨ ਦੇ ਤਰੀਕੇ ਵਿੱਚ ਹੈ - ਇਹ ਕਮਪਿਊਟਿੰਗ ਭਾਸ਼ਾਵਾਂ ਜਿਵੇਂ ਕਿ C ਦੇ ਸ਼ੁਰੂਆਤੀ ਦਿਨਾਂ ਤੋਂ ਇੱਕ ਪ੍ਰੋਗਰਾਮਿੰਗ ਰਵਾਇਤ ਹੈ। ਐਰੇ ਵਿੱਚ ਹਰ ਸਥਾਨ ਨੂੰ ਆਪਣਾ ਪਤਾ ਨੰਬਰ ਮਿਲਦਾ ਹੈ ਜਿਸਨੂੰ **ਇੰਡੈਕਸ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ। | ਇੰਡੈਕਸ | ਮੁੱਲ | ਵੇਰਵਾ | |-------|-------|-------------| | 0 | "ਚਾਕਲੇਟ" | ਪਹਿਲਾ ਤੱਤ | | 1 | "ਸਟ੍ਰਾਬੇਰੀ" | ਦੂਜਾ ਤੱਤ | | 2 | "ਵੈਨਿਲਾ" | ਤੀਜਾ ਤੱਤ | | 3 | "ਪਿਸਟਾਚਿਓ" | ਚੌਥਾ ਤੱਤ | | 4 | "ਰਾਕੀ ਰੋਡ" | ਪੰਜਵਾਂ ਤੱਤ | ✅ ਕੀ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ ਕਿ ਐਰੇ ਜ਼ੀਰੋ ਇੰਡੈਕਸ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ? ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ, ਇੰਡੈਕਸ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਇਸ ਬਾਰੇ ਦਿਲਚਸਪ ਇਤਿਹਾਸ ਹੈ, ਜਿਸਨੂੰ ਤੁਸੀਂ [ਵਿਕੀਪੀਡੀਆ 'ਤੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ](https://en.wikipedia.org/wiki/Zero-based_numbering)। **ਐਰੇ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚ:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Access individual elements using bracket notation console.log(iceCreamFlavors[0]); // "Chocolate" - first element console.log(iceCreamFlavors[2]); // "Vanilla" - third element console.log(iceCreamFlavors[4]); // "Rocky Road" - last element ``` **ਇੱਥੇ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** - **ਵਰਤਦਾ ਹੈ** ਚੌਰਸ ਬ੍ਰੈਕਟ ਨੋਟੇਸ਼ਨ ਇੰਡੈਕਸ ਨੰਬਰ ਦੇ ਨਾਲ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚਣ ਲਈ - **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਉਸ ਖਾਸ ਸਥਾਨ 'ਤੇ ਸਟੋਰ ਕੀਤੇ ਮੁੱਲ ਨੂੰ - **ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** 0 ਤੋਂ ਗਿਣਣਾ, ਪਹਿਲਾ ਤੱਤ ਇੰਡੈਕਸ 0 ਬਣਾਉਂਦਾ ਹੈ **ਐਰੇ ਤੱਤਾਂ ਨੂੰ ਸੋਧਣਾ:** ```javascript // Change an existing value iceCreamFlavors[4] = "Butter Pecan"; console.log(iceCreamFlavors[4]); // "Butter Pecan" // Add a new element at the end iceCreamFlavors[5] = "Cookie Dough"; console.log(iceCreamFlavors[5]); // "Cookie Dough" ``` **ਉਪਰ ਦਿੱਤੇ ਵਿੱਚ, ਅਸੀਂ:** - **ਸੋਧਿਆ** ਇੰਡੈਕਸ 4 'ਤੇ ਤੱਤ "ਰਾਕੀ ਰੋਡ" ਤੋਂ "ਬਟਰ ਪੀਕਨ" ਵਿੱਚ - **ਨਵਾਂ ਤੱਤ ਜੋੜਿਆ** "ਕੁਕੀ ਡੌ" ਇੰਡੈਕਸ 5 'ਤੇ - **ਆਪਣੇ ਆਪ ਐਰੇ ਦੀ ਲੰਬਾਈ ਵਧਾਈ** ਜਦੋਂ ਮੌਜੂਦਾ ਸੀਮਾਵਾਂ ਤੋਂ ਬਾਹਰ ਤੱਤ ਜੋੜੇ ### ਐਰੇ ਦੀ ਲੰਬਾਈ ਅਤੇ ਆਮ ਤਰੀਕੇ ਐਰੇ ਵਿੱਚ ਬਿਲਟ-ਇਨ ਪ੍ਰਾਪਰਟੀਆਂ ਅਤੇ ਤਰੀਕੇ ਹੁੰਦੇ ਹਨ ਜੋ ਡਾਟਾ ਨਾਲ ਕੰਮ ਕਰਨਾ ਬਹੁਤ ਹੀ ਆਸਾਨ ਬਣਾਉਂਦੇ ਹਨ। **ਐਰੇ ਦੀ ਲੰਬਾਈ ਪਤਾ ਕਰਨਾ:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; console.log(iceCreamFlavors.length); // 5 // Length updates automatically as array changes iceCreamFlavors.push("Mint Chip"); console.log(iceCreamFlavors.length); // 6 ``` **ਯਾਦ ਰੱਖਣ ਵਾਲੇ ਮੁੱਖ ਬਿੰਦੂ:** - **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਐਰੇ ਵਿੱਚ ਤੱਤਾਂ ਦੀ ਕੁੱਲ ਗਿਣਤੀ - **ਆਪਣੇ ਆਪ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ** ਜਦੋਂ ਤੱਤ ਜੋੜੇ ਜਾਂ ਹਟਾਏ ਜਾਂਦੇ ਹਨ - **ਡਾਇਨਾਮਿਕ ਗਿਣਤੀ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** ਜੋ ਲੂਪ ਅਤੇ ਵੈਲੀਡੇਸ਼ਨ ਲਈ ਲਾਭਦਾਇਕ ਹੈ **ਮਹੱਤਵਪੂਰਨ ਐਰੇ ਤਰੀਕੇ:** ```javascript const fruits = ["apple", "banana", "orange"]; // Add elements fruits.push("grape"); // Adds to end: ["apple", "banana", "orange", "grape"] fruits.unshift("strawberry"); // Adds to beginning: ["strawberry", "apple", "banana", "orange", "grape"] // Remove elements const lastFruit = fruits.pop(); // Removes and returns "grape" const firstFruit = fruits.shift(); // Removes and returns "strawberry" // Find elements const index = fruits.indexOf("banana"); // Returns 1 (position of "banana") const hasApple = fruits.includes("apple"); // Returns true ``` **ਇਨ੍ਹਾਂ ਤਰੀਕਿਆਂ ਨੂੰ ਸਮਝਣਾ:** - **ਤੱਤ ਜੋੜਦਾ ਹੈ** `push()` (ਅੰਤ) ਅਤੇ `unshift()` (ਸ਼ੁਰੂਆਤ) ਨਾਲ - **ਤੱਤ ਹਟਾਉਂਦਾ ਹੈ** `pop()` (ਅੰਤ) ਅਤੇ `shift()` (ਸ਼ੁਰੂਆਤ) ਨਾਲ - **ਤੱਤਾਂ ਨੂੰ ਲੱਭਦਾ ਹੈ** `indexOf()` ਨਾਲ ਅਤੇ ਮੌਜੂਦਗੀ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ `includes()` ਨਾਲ - **ਵਾਪਸ ਕਰਦਾ ਹੈ** ਲਾਭਦਾਇਕ ਮੁੱਲ ਜਿਵੇਂ ਕਿ ਹਟਾਏ ਗਏ ਤੱਤ ਜਾਂ ਸਥਾਨ ਇੰਡੈਕਸ ✅ ਖੁਦ ਅਜ਼ਮਾਓ! ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਆਪਣਾ ਐਰੇ ਬਣਾਓ ਅਤੇ ਇਸਨੂੰ ਮੈਨਿਪੁਲੇਟ ਕਰੋ। ## ਲੂਪ ਚਾਰਲਸ ਡਿਕਨਜ਼ ਦੇ ਨਾਵਲਾਂ ਵਿੱਚ ਮਸ਼ਹੂਰ ਸਜ਼ਾ ਬਾਰੇ ਸੋਚੋ ਜਿੱਥੇ ਵਿਦਿਆਰਥੀਆਂ ਨੂੰ ਇੱਕ ਵਾਕ ਨੂੰ ਦੁਹਰਾਉਣਾ ਪੈਂਦਾ ਸੀ। ਸੋਚੋ ਕਿ ਤੁਸੀਂ ਸਿਰਫ਼ ਕਿਸੇ ਨੂੰ "ਇਹ ਵਾਕ 100 ਵਾਰ ਲਿਖੋ" ਕਹਿ ਸਕਦੇ ਹੋ ਅਤੇ ਇਹ ਆਪਣੇ ਆਪ ਹੋ ਜਾਵੇ। ਇਹੀ ਕੁਝ ਲੂਪ ਤੁਹਾਡੇ ਕੋਡ ਲਈ ਕਰਦੇ ਹਨ। ਲੂਪ ਇੱਕ ਅਜਿਹੇ ਸਹਾਇਕ ਵਾਂਗ ਹਨ ਜੋ ਕੰਮਾਂ ਨੂੰ ਬਿਨਾਂ ਗਲਤੀ ਦੇ ਦੁਹਰਾਉਂਦੇ ਹਨ। ਚਾਹੇ ਤੁਹਾਨੂੰ ਖਰੀਦਦਾਰੀ ਕਾਰਟ ਵਿੱਚ ਹਰ ਆਈਟਮ ਦੀ ਜਾਂਚ ਕਰਨ ਦੀ ਜ਼ਰੂਰਤ ਹੋਵੇ ਜਾਂ ਐਲਬਮ ਵਿੱਚ ਸਾਰੇ ਫੋਟੋ ਦਿਖਾਉਣ ਦੀ, ਲੂਪ ਇਹ ਕੰਮ ਕੁਸ਼ਲਤਾਪੂਰਵਕ ਕਰਦੇ ਹਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਕਈ ਕਿਸਮ ਦੇ ਲੂਪ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਆਓ ਹਰ ਇੱਕ ਨੂੰ ਵੇਖੀਏ ਅਤੇ ਸਮਝੀਏ ਕਿ ਕਦੋਂ ਇਸਨੂੰ ਵਰਤਣਾ ਹੈ। ### ਫੋਰ ਲੂਪ `for` ਲੂਪ ਇੱਕ ਟਾਈਮਰ ਸੈਟ ਕਰਨ ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਤੁਸੀਂ ਕੁਝ ਕਿੰਨੀ ਵਾਰ ਕਰਨਾ ਚਾਹੁੰਦੇ ਹੋ। ਇਹ ਬਹੁਤ ਹੀ ਸੰਗਠਿਤ ਅਤੇ ਭਰੋਸੇਯੋਗ ਹੈ, ਜੋ ਇਸਨੂੰ ਐਰੇ ਨਾਲ ਕੰਮ ਕਰਨ ਜਾਂ ਚੀਜ਼ਾਂ ਦੀ ਗਿਣਤੀ ਕਰਨ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਬਣਾਉਂਦਾ ਹੈ। **ਫੋਰ ਲੂਪ ਦੀ ਬਣਤਰ:** | ਹਿੱਸਾ | ਉਦੇਸ਼ | ਉਦਾਹਰਨ | |-----------|---------|----------| | **ਸ਼ੁਰੂਆਤ** | ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਸੈਟ ਕਰਦਾ ਹੈ | `let i = 0` | | **ਸ਼ਰਤ** | ਕਦੋਂ ਜਾਰੀ ਰੱਖਣਾ ਹੈ | `i < 10` | | **ਵਾਧਾ** | ਕਿਵੇਂ ਅੱਪਡੇਟ ਕਰਨਾ ਹੈ | `i++` | ```javascript // Counting from 0 to 9 for (let i = 0; i < 10; i++) { console.log(`Count: ${i}`); } // More practical example: processing scores const testScores = [85, 92, 78, 96, 88]; for (let i = 0; i < testScores.length; i++) { console.log(`Student ${i + 1}: ${testScores[i]}%`); } ``` **ਹਰ ਕਦਮ ਵਿੱਚ ਕੀ ਹੋ ਰਿਹਾ ਹੈ:** - **ਸ਼ੁਰੂ ਕਰਦਾ ਹੈ** ਕਾਊਂਟਰ ਵੈਰੀਏਬਲ `i` ਨੂੰ 0 'ਤੇ - **ਸ਼ਰਤ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** `i < 10` ਹਰ ਇਟਰੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ - **ਕੋਡ ਬਲਾਕ ਚਲਾਉਂਦਾ ਹੈ** ਜਦੋਂ ਸ਼ਰਤ ਸੱਚ ਹੈ - **ਵਾਧਾ ਕਰਦਾ ਹੈ** `i` ਨੂੰ 1 ਨਾਲ ਹਰ ਇਟਰੇਸ਼ਨ ਤੋਂ ਬਾਅਦ `i++` ਨਾਲ - **ਰੁਕਦਾ ਹੈ** ਜਦੋਂ ਸ਼ਰਤ ਝੂਠ ਬਣ ਜਾਂਦੀ ਹੈ (ਜਦੋਂ `i` 10 'ਤੇ ਪਹੁੰਚਦਾ ਹੈ) ✅ ਇਹ ਕੋਡ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਓ। ਕੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਾਊਂਟਰ, ਸ਼ਰਤ ਜਾਂ ਇਟਰੇਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਛੋਟੇ ਬਦਲਾਅ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇਸਨੂੰ ਪਿੱਛੇ ਚਲਾਉਣ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ, ਇੱਕ ਕਾਊਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ? ### ਵਾਇਲ ਲੂਪ `while` ਲੂਪ "ਇਹ ਕਰਦੇ ਰਹੋ ਜਦ ਤੱਕ..." ਵਾਂਗ ਹੈ - ਤੁਹਾਨੂੰ ਪਤਾ ਨਹੀਂ ਹੁੰਦਾ ਕਿ ਇਹ ਕਿੰਨੀ ਵਾਰ ਚੱਲੇਗਾ, ਪਰ ਤੁਹਾਨੂੰ ਪਤਾ ਹੁੰਦਾ ਹੈ ਕਿ ਕਦੋਂ ਰੁਕਣਾ ਹੈ। ਇਹ ਐਸੇ ਕੰਮਾਂ ਲਈ ਬਹੁਤ ਹੀ ਵਧੀਆ ਹੈ ਜਿਵੇਂ ਕਿ ਕਿਸੇ ਉਪਭੋਗਤਾ ਤੋਂ ਇਨਪੁਟ ਮੰਗਣਾ ਜਦ ਤੱਕ ਉਹ ਤੁਹਾਨੂੰ ਜੋ ਚਾਹੀਦਾ ਹੈ ਦੇਣ, ਜਾਂ ਡਾਟਾ ਵਿੱਚੋਂ ਲੱਭਣਾ ਜਦ ਤੱਕ ਤੁਸੀਂ ਜੋ ਲੱਭ ਰਹੇ ਹੋ ਉਹ ਮਿਲੇ। **ਵਾਇਲ ਲੂਪ ਦੀਆਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ:** - **ਜਾਰੀ ਰੱਖਦਾ ਹੈ** ਜਦ ਤੱਕ ਸ਼ਰਤ ਸੱਚ ਹੈ - **ਕਾਊਂਟਰ ਵੈਰੀਏਬਲਾਂ ਦਾ ਮੈਨੂਅਲ ਪ੍ਰਬੰਧਨ ਲੋੜਦਾ ਹੈ** - **ਸ਼ਰਤ ਦੀ ਜਾਂਚ ਕਰਦਾ ਹੈ** ਹਰ ਇਟਰੇਸ਼ਨ ਤੋਂ ਪਹਿਲਾਂ - **ਅਨੰਤ ਲੂਪ ਦਾ ਖਤਰਾ** ਜੇਕਰ ਸ਼ਰਤ ਕਦੇ ਝੂਠ ਨਹੀਂ ਬਣਦੀ ```javascript // Basic counting example let i = 0; while (i < 10) { console.log(`While count: ${i}`); i++; // Don't forget to increment! } // More practical example: processing user input let userInput = ""; let attempts = 0; const maxAttempts = 3; while (userInput !== "quit" && attempts < maxAttempts) { userInput = prompt(`Enter 'quit' to exit (attempt ${attempts + 1}):`); attempts++; } if (attempts >= maxAttempts) { console.log("Maximum attempts reached!"); } ``` **ਇਨ੍ਹਾਂ ਉਦਾਹਰਣਾਂ ਨੂੰ ਸਮਝਣਾ:** - **ਕਾਊਂਟਰ ਵੈਰੀਏਬਲ `i` ਦਾ ਪ੍ਰਬੰਧਨ ਕਰਦਾ ਹੈ** ਲੂਪ ਬਾਡੀ ਦੇ ਅੰਦਰ - **ਕਾਊਂਟਰ ਨੂੰ ਵਾਧਾ ਕਰਦਾ ਹੈ** ਅਨੰਤ ਲੂਪਾਂ ਤੋਂ ਬਚਣ ਲਈ - **ਪ੍ਰਯੋਗਿਕ ਵਰਤੋਂ ਦਾ ਕੇਸ ਦਿਖਾਉਂਦਾ ਹੈ** ਉਪਭੋਗਤਾ ਇਨਪੁਟ ਅਤੇ ਕੋਸ਼ਿਸ਼ਾਂ ਦੀ ਸੀਮਾ ਨਾਲ - **ਸੁਰੱਖਿਆ ਮਕੈਨਿਜ਼ਮ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ** ਅਨੰਤ ਕਾਰਜ ਤੋਂ ਬਚਣ ਲਈ ### ਆਧੁਨਿਕ ਲੂਪ ਵਿਕਲਪ ਜਾਵਾਸਕ੍ਰਿਪਟ ਆਧੁਨਿਕ ਲੂਪ ਸਿੰਟੈਕਸ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਜੋ ਤੁਹਾਡੇ ਕੋਡ ਨੂੰ ਹੋਰ ਪੜ੍ਹਨਯੋਗ ਅਤੇ ਘੱਟ ਗਲਤੀ-ਪ੍ਰਵਣ ਬਣਾਉਂਦਾ ਹੈ। **For...of ਲੂਪ (ES6+):** ```javascript const colors = ["red", "green", "blue", "yellow"]; // Modern approach - cleaner and safer for (const color of colors) { console.log(`Color: ${color}`); } // Compare with traditional for loop for (let i = 0; i < colors.length; i++) { console.log(`Color: ${colors[i]}`); } ``` **For...of ਦੇ ਮੁੱਖ ਫਾਇਦੇ:** - **ਇੰਡੈਕਸ ਪ੍ਰਬੰਧਨ ਅਤੇ ਸੰਭਾਵਿਤ ਗਲਤੀਆਂ ਨੂੰ ਖਤਮ ਕਰਦਾ ਹੈ** - **ਐਰੇ ਤੱਤਾਂ ਤੱਕ ਸਿੱਧੀ ਪਹੁੰਚ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** - **ਕੋਡ ਪੜ੍ਹਨਯੋਗਤਾ ਵਿੱਚ ਸੁਧਾਰ ਕਰਦਾ ਹੈ ਅਤੇ ਸਿੰਟੈਕਸ ਦੀ ਜਟਿਲਤਾ ਘਟਾਉਂਦਾ ਹੈ** **forEach ਤਰੀਕਾ:** ```javascript const prices = [9.99, 15.50, 22.75, 8.25]; // Using forEach for functional programming style prices.forEach((price, index) => { console.log(`Item ${index + 1}: $${price.toFixed(2)}`); }); // forEach with arrow functions for simple operations prices.forEach(price => console.log(`Price: $${price}`)); ``` **forEach ਬਾਰੇ ਤੁਹਾਨੂੰ ਕੀ ਜਾਣਨ ਦੀ ਲੋੜ ਹੈ:** - **ਹਰ ਐਰੇ ਤੱਤ ਲਈ ਇੱਕ ਫੰਕਸ਼ਨ ਚਲਾਉਂਦਾ ਹੈ** - **ਤੱਤ ਮੁੱਲ ਅਤੇ ਇੰਡੈਕਸ ਦੋਵੇਂ ਨੂੰ ਪੈਰਾਮੀਟਰ ਵਜੋਂ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ** - **ਜਲਦੀ ਰੁਕ ਨਹੀਂ ਸਕਦਾ** (ਪ੍ਰੰਪਰਾਗਤ ਲੂਪਾਂ ਦੇ ਵਿਰੁੱਧ) - **undefined ਵਾਪਸ ਕਰਦਾ ਹੈ** (ਨਵਾਂ ਐਰੇ ਨਹੀਂ ਬਣਾਉਂਦਾ) ✅ ਤੁਸੀਂ ਫੋਰ ਲੂਪ ਅਤੇ ਵਾਇਲ ਲੂਪ ਵਿੱਚੋਂ ਕਿਉਂ ਚੁਣਦੇ ਹੋ? 17K ਦਰਸ਼ਕਾਂ ਨੇ StackOverflow 'ਤੇ ਇਹੀ ਸਵਾਲ ਕੀਤਾ ਸੀ, ਅਤੇ ਕੁਝ ਰਾਏ [ਤੁਹਾਡੇ ਲਈ ਦਿਲਚਸਪ ਹੋ ਸਕਦੇ ਹਨ](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)। ## ਲੂਪ ਅਤੇ ਐਰੇ ਐਰੇ ਨੂੰ ਲੂਪਾਂ ਨਾਲ ਜੋੜਨਾ ਸ਼ਕਤੀਸ਼ਾਲੀ ਡਾਟਾ ਪ੍ਰਕਿਰਿਆ ਸਮਰੱਥਾ ਬਣਾਉਂਦਾ ਹੈ। ਇਹ ਜੋੜ ਕਈ ਪ੍ਰੋਗਰਾਮਿੰਗ ਕੰਮਾਂ ਲਈ ਬੁਨਿਆਦ ਹੈ, ਸੂਚੀਆਂ ਨੂੰ ਦਿਖਾਉਣ ਤੋਂ ਲੈ ਕੇ ਅੰਕੜੇ ਗਣਨਾ ਕਰਨ ਤੱਕ। **ਪ੍ਰੰਪਰਾਗਤ ਐਰੇ ਪ੍ਰਕਿਰਿਆ:** ```javascript const iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; // Classic for loop approach for (let i = 0; i < iceCreamFlavors.length; i++) { console.log(`Flavor ${i + 1}: ${iceCreamFlavors[i]}`); } // Modern for...of approach for (const flavor of iceCreamFlavors) { console.log(`Available flavor: ${flavor}`); } ``` **ਹਰ ਪਹੁੰਚ ਨੂੰ ਸਮਝੀਏ:** - **ਐਰੇ ਦੀ ਲੰਬਾਈ ਪ੍ਰਾਪਰਟੀ ਵਰਤਦਾ ਹੈ** ਲੂਪ ਸੀਮਾ ਨੂੰ ਨਿਰਧਾਰਤ ਕਰਨ ਲਈ - **ਪ੍ਰੰਪਰਾਗਤ ਫੋਰ ਲੂਪਾਂ ਵਿੱਚ ਇੰਡੈਕਸ ਦੁਆਰਾ ਤੱਤਾਂ ਤੱਕ ਪਹੁੰਚਦਾ ਹੈ** --- **ਅਸਵੀਕਰਤਾ**: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀ ਹੋਣ ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰਦੇ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁੱਤੀਆਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।