# ਜਾਵਾਸਕ੍ਰਿਪਟ ਬੁਨਿਆਦੀਆਂ: ਐਰੇ ਅਤੇ ਲੂਪ  > ਸਕੈਚਨੋਟ [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 ਹੈ। ਐਰੇ ਮੁੱਲਾਂ ਨੂੰ ਪ੍ਰਾਪਤ ਕਰਨ, ਬਦਲਣ ਜਾਂ ਸ਼ਾਮਲ ਕਰਨ ਲਈ ਇੰਡੈਕਸ ਨੂੰ ਚੌਰਸ ਬ੍ਰੈਕਟ ਨਾਲ ਵਰਤੋ। ✅ ਕੀ ਇਹ ਤੁਹਾਨੂੰ ਹੈਰਾਨ ਕਰਦਾ ਹੈ ਕਿ ਐਰੇ ਜ਼ੀਰੋ ਇੰਡੈਕਸ ਤੋਂ ਸ਼ੁਰੂ ਹੁੰਦੇ ਹਨ? ਕੁਝ ਪ੍ਰੋਗਰਾਮਿੰਗ ਭਾਸ਼ਾਵਾਂ ਵਿੱਚ, ਇੰਡੈਕਸ 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) ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਅਨੁਵਾਦ ਕੀਤਾ ਗਿਆ ਹੈ। ਜਦੋਂ ਕਿ ਅਸੀਂ ਸਹੀਤਾ ਲਈ ਯਤਨਸ਼ੀਲ ਹਾਂ, ਕਿਰਪਾ ਕਰਕੇ ਧਿਆਨ ਦਿਓ ਕਿ ਸਵੈਚਾਲਿਤ ਅਨੁਵਾਦਾਂ ਵਿੱਚ ਗਲਤੀਆਂ ਜਾਂ ਅਸੁਚੀਤਤਾਵਾਂ ਹੋ ਸਕਦੀਆਂ ਹਨ। ਮੂਲ ਦਸਤਾਵੇਜ਼ ਨੂੰ ਇਸਦੀ ਮੂਲ ਭਾਸ਼ਾ ਵਿੱਚ ਅਧਿਕਾਰਤ ਸਰੋਤ ਮੰਨਿਆ ਜਾਣਾ ਚਾਹੀਦਾ ਹੈ। ਮਹੱਤਵਪੂਰਨ ਜਾਣਕਾਰੀ ਲਈ, ਪੇਸ਼ੇਵਰ ਮਨੁੱਖੀ ਅਨੁਵਾਦ ਦੀ ਸਿਫਾਰਸ਼ ਕੀਤੀ ਜਾਂਦੀ ਹੈ। ਇਸ ਅਨੁਵਾਦ ਦੀ ਵਰਤੋਂ ਤੋਂ ਪੈਦਾ ਹੋਣ ਵਾਲੇ ਕਿਸੇ ਵੀ ਗਲਤਫਹਿਮੀ ਜਾਂ ਗਲਤ ਵਿਆਖਿਆ ਲਈ ਅਸੀਂ ਜ਼ਿੰਮੇਵਾਰ ਨਹੀਂ ਹਾਂ।