# ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੇਸਿਕਸ: ਐਰੇਜ਼ ਅਤੇ ਲੂਪਸ  > ਸਕੈਚਨੋਟ [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 let myArray = []; ``` ਇਹ ਇੱਕ ਖਾਲੀ ਐਰੇ ਹੈ, ਪਰ ਐਰੇਜ਼ ਨੂੰ ਪਹਿਲਾਂ ਹੀ ਡਾਟਾ ਨਾਲ ਭਰਿਆ ਹੋਇਆ ਘੋਸ਼ਿਤ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ। ਇੱਕ ਐਰੇ ਵਿੱਚ ਕਈ ਮੁੱਲਾਂ ਨੂੰ ਕਾਮਾ ਨਾਲ ਵੱਖ ਕੀਤਾ ਜਾਂਦਾ ਹੈ। ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; ``` ਐਰੇ ਮੁੱਲਾਂ ਨੂੰ ਇੱਕ ਵਿਲੱਖਣ ਮੁੱਲ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ ਜਿਸਨੂੰ **ਇੰਡੈਕਸ** ਕਿਹਾ ਜਾਂਦਾ ਹੈ, ਜੋ ਇਸਦੀ ਐਰੇ ਦੇ ਸ਼ੁਰੂਆਤ ਤੋਂ ਦੂਰੀ ਦੇ ਆਧਾਰ 'ਤੇ ਦਿੱਤਾ ਜਾਂਦਾ ਹੈ। ਉਪਰੋਕਤ ਉਦਾਹਰਨ ਵਿੱਚ, ਸਟ੍ਰਿੰਗ ਮੁੱਲ "Chocolate" ਦਾ ਇੰਡੈਕਸ 0 ਹੈ, ਅਤੇ "Rocky Road" ਦਾ ਇੰਡੈਕਸ 4 ਹੈ। ਇੰਡੈਕਸ ਨੂੰ ਚੌਰਸ ਬ੍ਰੈਕਟਸ ਨਾਲ ਵਰਤ ਕੇ, ਤੁਸੀਂ ਐਰੇ ਮੁੱਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ, ਬਦਲ, ਜਾਂ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ। ✅ ਕੀ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ ਕਿ ਐਰੇਜ਼ 0 ਇੰਡੈਕਸ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ? ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ, ਇੰਡੈਕਸ 1 ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ। ਇਸ ਬਾਰੇ ਇੱਕ ਦਿਲਚਸਪ ਇਤਿਹਾਸ ਹੈ, ਜਿਸਨੂੰ ਤੁਸੀਂ [ਵਿਕੀਪੀਡੀਆ](https://en.wikipedia.org/wiki/Zero-based_numbering) 'ਤੇ ਪੜ੍ਹ ਸਕਦੇ ਹੋ। ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; iceCreamFlavors[2]; //"Vanilla" ``` ਤੁਸੀਂ ਇੰਡੈਕਸ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਮੁੱਲ ਨੂੰ ਬਦਲ ਸਕਦੇ ਹੋ, ਇਸ ਤਰ੍ਹਾਂ: ```javascript iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan" ``` ਅਤੇ ਤੁਸੀਂ ਦਿੱਤੇ ਗਏ ਇੰਡੈਕਸ 'ਤੇ ਇੱਕ ਨਵਾਂ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ, ਇਸ ਤਰ੍ਹਾਂ: ```javascript iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough" ``` ✅ ਐਰੇ ਵਿੱਚ ਮੁੱਲ ਸ਼ਾਮਲ ਕਰਨ ਦਾ ਇੱਕ ਹੋਰ ਆਮ ਤਰੀਕਾ ਹੈ ਐਰੇ ਆਪਰੇਟਰ ਜਿਵੇਂ ਕਿ array.push() ਦੀ ਵਰਤੋਂ ਕਰਨਾ। ਪਤਾ ਕਰਨ ਲਈ ਕਿ ਇੱਕ ਐਰੇ ਵਿੱਚ ਕਿੰਨੇ ਆਈਟਮ ਹਨ, `length` ਪ੍ਰਾਪਰਟੀ ਦੀ ਵਰਤੋਂ ਕਰੋ। ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; iceCreamFlavors.length; //5 ``` ✅ ਖੁਦ ਅਜ਼ਮਾਓ! ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਇੱਕ ਐਰੇ ਬਣਾਓ ਅਤੇ ਮੈਨੇਜ ਕਰੋ। ## ਲੂਪਸ ਲੂਪਸ ਸਾਨੂੰ ਦੁਹਰਾਏ ਜਾਂ **ਇਟਰੇਟਿਵ** ਕੰਮ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ, ਅਤੇ ਕਾਫੀ ਸਮਾਂ ਅਤੇ ਕੋਡ ਬਚਾ ਸਕਦੇ ਹਨ। ਹਰ ਇਟਰੇਸ਼ਨ ਵਿੱਚ ਇਸਦੇ ਵੈਰੀਏਬਲ, ਮੁੱਲ ਅਤੇ ਸ਼ਰਤਾਂ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਹੋ ਸਕਦੇ ਹਨ। ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਵੱਖ-ਵੱਖ ਕਿਸਮ ਦੇ ਲੂਪਸ ਹਨ, ਅਤੇ ਉਹਨਾਂ ਵਿੱਚ ਛੋਟੇ-ਮੋਟੇ ਅੰਤਰ ਹਨ, ਪਰ ਅਸਲ ਵਿੱਚ ਉਹ ਸਾਰੇ ਇੱਕੋ ਕੰਮ ਕਰਦੇ ਹਨ: ਡਾਟਾ 'ਤੇ ਲੂਪ ਕਰਨਾ। ### ਫੋਰ ਲੂਪ `for` ਲੂਪ ਨੂੰ ਇਟਰੇਟ ਕਰਨ ਲਈ 3 ਹਿੱਸਿਆਂ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ: - `counter` ਇੱਕ ਵੈਰੀਏਬਲ ਜੋ ਆਮ ਤੌਰ 'ਤੇ ਇੱਕ ਨੰਬਰ ਨਾਲ ਸ਼ੁਰੂ ਕੀਤਾ ਜਾਂਦਾ ਹੈ ਜੋ ਇਟਰੇਸ਼ਨ ਦੀ ਗਿਣਤੀ ਕਰਦਾ ਹੈ - `condition` ਇੱਕ ਐਕਸਪ੍ਰੈਸ਼ਨ ਜੋ ਤੁਲਨਾ ਆਪਰੇਟਰਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ ਜਦੋਂ `false` ਹੋਵੇ ਤਾਂ ਲੂਪ ਨੂੰ ਰੋਕਣ ਲਈ - `iteration-expression` ਹਰ ਇਟਰੇਸ਼ਨ ਦੇ ਅੰਤ ਵਿੱਚ ਚਲਦਾ ਹੈ, ਆਮ ਤੌਰ 'ਤੇ ਕਾਊਂਟਰ ਮੁੱਲ ਨੂੰ ਬਦਲਣ ਲਈ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ```javascript // Counting up to 10 for (let i = 0; i < 10; i++) { console.log(i); } ``` ✅ ਇਸ ਕੋਡ ਨੂੰ ਬ੍ਰਾਊਜ਼ਰ ਕਨਸੋਲ ਵਿੱਚ ਚਲਾਓ। ਕੀ ਹੁੰਦਾ ਹੈ ਜਦੋਂ ਤੁਸੀਂ ਕਾਊਂਟਰ, ਸ਼ਰਤ ਜਾਂ ਇਟਰੇਸ਼ਨ ਐਕਸਪ੍ਰੈਸ਼ਨ ਵਿੱਚ ਛੋਟੇ-ਮੋਟੇ ਬਦਲਾਅ ਕਰਦੇ ਹੋ? ਕੀ ਤੁਸੀਂ ਇਸਨੂੰ ਪਿੱਛੇ ਚਲਾਉਣ ਲਈ ਬਦਲ ਸਕਦੇ ਹੋ, ਇੱਕ ਕਾਊਂਟਡਾਊਨ ਬਣਾਉਣ ਲਈ? ### ਵਾਇਲ ਲੂਪ `for` ਲੂਪ ਦੇ ਸਿੰਟੈਕਸ ਦੇ ਵਿਰੁੱਧ, `while` ਲੂਪਸ ਨੂੰ ਸਿਰਫ਼ ਇੱਕ ਸ਼ਰਤ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ ਜੋ ਲੂਪ ਨੂੰ ਰੋਕੇਗੀ ਜਦੋਂ ਸ਼ਰਤ `false` ਹੋਵੇਗੀ। ਲੂਪਸ ਵਿੱਚ ਸ਼ਰਤਾਂ ਆਮ ਤੌਰ 'ਤੇ ਹੋਰ ਮੁੱਲਾਂ ਜਿਵੇਂ ਕਿ ਕਾਊਂਟਰਾਂ 'ਤੇ ਨਿਰਭਰ ਕਰਦੀਆਂ ਹਨ, ਅਤੇ ਲੂਪ ਦੌਰਾਨ ਇਨ੍ਹਾਂ ਦਾ ਪ੍ਰਬੰਧਨ ਕੀਤਾ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਕਾਊਂਟਰਾਂ ਲਈ ਸ਼ੁਰੂਆਤੀ ਮੁੱਲਾਂ ਨੂੰ ਲੂਪ ਤੋਂ ਬਾਹਰ ਬਣਾਇਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ, ਅਤੇ ਸ਼ਰਤ ਨੂੰ ਪੂਰਾ ਕਰਨ ਲਈ ਕੋਈ ਵੀ ਐਕਸਪ੍ਰੈਸ਼ਨ, ਜਿਸ ਵਿੱਚ ਕਾਊਂਟਰ ਨੂੰ ਬਦਲਣਾ ਸ਼ਾਮਲ ਹੈ, ਲੂਪ ਦੇ ਅੰਦਰ ਰੱਖਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ```javascript //Counting up to 10 let i = 0; while (i < 10) { console.log(i); i++; } ``` ✅ ਤੁਸੀਂ ਫੋਰ ਲੂਪ ਦੀ ਬਜਾਏ ਵਾਇਲ ਲੂਪ ਕਿਉਂ ਚੁਣੋਗੇ? 17K ਦਰਸ਼ਕਾਂ ਨੇ StackOverflow 'ਤੇ ਇਹੀ ਸਵਾਲ ਪੁੱਛਿਆ ਸੀ, ਅਤੇ ਕੁਝ ਰਾਏ [ਤੁਹਾਡੇ ਲਈ ਦਿਲਚਸਪ ਹੋ ਸਕਦੀਆਂ ਹਨ](https://stackoverflow.com/questions/39969145/while-loops-vs-for-loops-in-javascript)। ## ਲੂਪਸ ਅਤੇ ਐਰੇਜ਼ ਐਰੇਜ਼ ਨੂੰ ਅਕਸਰ ਲੂਪਸ ਨਾਲ ਵਰਤਿਆ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਜ਼ਿਆਦਾਤਰ ਸ਼ਰਤਾਂ ਨੂੰ ਲੂਪ ਨੂੰ ਰੋਕਣ ਲਈ ਐਰੇ ਦੀ ਲੰਬਾਈ ਦੀ ਲੋੜ ਹੁੰਦੀ ਹੈ, ਅਤੇ ਇੰਡੈਕਸ ਵੀ ਕਾਊਂਟਰ ਮੁੱਲ ਹੋ ਸਕਦਾ ਹੈ। ```javascript let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"]; for (let i = 0; i < iceCreamFlavors.length; i++) { console.log(iceCreamFlavors[i]); } //Ends when all flavors are printed ``` ✅ ਆਪਣੇ ਬ੍ਰਾਊਜ਼ਰ ਦੇ ਕਨਸੋਲ ਵਿੱਚ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਲੂਪ ਕਰਨ ਦਾ ਅਨੁਭਵ ਕਰੋ। --- ## 🚀 ਚੁਣੌਤੀ ਐਰੇਜ਼ 'ਤੇ ਲੂਪ ਕਰਨ ਦੇ ਹੋਰ ਤਰੀਕੇ ਹਨ ਜਿਵੇਂ ਕਿ for ਅਤੇ while ਲੂਪਸ ਤੋਂ ਇਲਾਵਾ। [forEach](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach), [for-of](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Statements/for...of), ਅਤੇ [map](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array/map)। ਆਪਣੇ ਐਰੇ ਲੂਪ ਨੂੰ ਇਨ੍ਹਾਂ ਤਕਨੀਕਾਂ ਵਿੱਚੋਂ ਇੱਕ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਦੁਬਾਰਾ ਲਿਖੋ। ## ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼ [ਲੈਕਚਰ ਤੋਂ ਬਾਅਦ ਕਵਿਜ਼](https://ff-quizzes.netlify.app/web/quiz/14) ## ਸਮੀਖਿਆ ਅਤੇ ਖੁਦ ਪੜ੍ਹਾਈ ਜਾਵਾਸਕ੍ਰਿਪਟ ਵਿੱਚ ਐਰੇਜ਼ ਨਾਲ ਕਈ ਮੈਥਡ ਜੁੜੇ ਹੋਏ ਹਨ, ਜੋ ਡਾਟਾ ਮੈਨੇਜਮੈਂਟ ਲਈ ਬਹੁਤ ਹੀ ਲਾਭਦਾਇਕ ਹਨ। [ਇਨ੍ਹਾਂ ਮੈਥਡਸ ਬਾਰੇ ਪੜ੍ਹੋ](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Array) ਅਤੇ ਆਪਣੇ ਬਣਾਏ ਐਰੇ 'ਤੇ ਕੁਝ ਮੈਥਡ (ਜਿਵੇਂ ਕਿ push, pop, slice ਅਤੇ splice) ਦੀ ਕੋਸ਼ਿਸ਼ ਕਰੋ। ## ਅਸਾਈਨਮੈਂਟ [ਐਰੇ 'ਤੇ ਲੂਪ ਕਰੋ](assignment.md) **ਅਸਵੀਕਾਰਨਾ**: ਇਹ ਦਸਤਾਵੇਜ਼ AI ਅਨੁਵਾਦ ਸੇਵਾ [Co-op Translator](https://github.com/Azure/co-op-translator) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।