JavaScriptの配列メソッド - パート1

What is an Array? An Array is a special object in JavaScript used to store multiple values in a single variable. Instead of creating separate variables, let student1 = " John " ; let student2 = " David " ; let student3 = " Alex " ; we can use an array: let students = [ " John " , " David " , " Alex " ]; Each value inside the array is called an element , and every element has an index starting from 0 . Index : 0 1 2 ------------------------- Array : | John | David | Alex | ------------------------- 1. Array length Definition The length property returns the total number of elements present in an array. It is not a function . It is a property of an array object. It is also writable, meaning you can change the length to increase or decrease the array size. Syntax array . length To modify the array length: array . length = newLength ; Parameters None. Returns Returns a number representing the total number of elements in the array. Internal Working Consider this array: let fruits = [ " Apple " , " Orange " , " Mango " ]; Memory representation: Index 0 → Apple 1 → Orange 2 → Mango length = 3 When JavaScript creates the array, it internally stores a special property: { 0 : "Apple" , 1 : "Orange" , 2 : "Mango" , length: 3 } Whenever you access: fruits . length JavaScript simply returns the value stored in the length property. It does not count the elements every time. This makes length very fast. Example 1 let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . length ); Output 3 Example 2 - Updating Length let numbers = [ 10 , 20 , 30 , 40 ]; numbers . length = 2 ; console . log ( numbers ); Output [ 10 , 20 ] JavaScript removes the remaining elements. Example 3 - Increasing Length let colors = [ " Red " , " Blue " ]; colors . length = 5 ; console . log ( colors ); Output [ "Red" , "Blue" , empty × 3 ] The new positions become empty slots . Real-Time Example Imagine an E-commerce Shopping Cart . let cart = [ " Laptop " , " Mouse " , " Keyboard " ]; console . log ( " Total Items: " , cart . length ); Output Total Items: 3 Amazon and Flipkart use similar logic to display: Cart (3 Items) Common Mistake let arr = [ 1 , 2 , 3 ]; console . log ( arr . length ()); Output TypeError Why? Because length is a property, not a method. Correct: arr . length Best Practices ✔ Use length inside loops. for ( let i = 0 ; i < arr . length ; i ++ ){ console . log ( arr [ i ]); } 2. Array toString() Definition The toString() method converts an array into a comma-separated string . The original array is not modified . Syntax array . toString () Parameters None. Returns Returns a string. Internal Working Suppose let fruits = [ " Apple " , " Orange " , " Banana " ]; Internally JavaScript joins every element using commas. Apple + " , " + Orange + " , " + Banana Result Apple,Orange,Banana Example let fruits = [ " Apple " , " Orange " , " Banana " ]; let result = fruits . toString (); console . log ( result ); Output Apple,Orange,Banana Example with Numbers let numbers = [ 10 , 20 , 30 ]; console . log ( numbers . toString ()); Output 10,20,30 Real-Time Example Sending array data through an API. let selectedItems = [ " Laptop " , " Mouse " , " Keyboard " ]; let apiData = selectedItems . toString (); console . log ( apiData ); Output Laptop,Mouse,Keyboard Common Mistake Many developers think it returns an array. Wrong. let result = [ 1 , 2 , 3 ]. toString (); console . log ( typeof result ); Output string Best Practice Use join() when you need a custom separator. 3. Array at() Definition The at() method returns the element at a specified index. Unlike bracket notation ( [] ), it also supports negative indexing . Syntax array . at ( index ) Parameters Parameter Description index Position of element Returns Returns the element. Returns undefined if the index is invalid. Internal Working Example let arr = [ " A " , " B " , " C " , " D " ]; 0 → A 1 → B 2 → C 3 → D When arr . at ( 2 ) JavaScript returns C When arr . at ( - 1 ) JavaScript converts length + (-1) 4 + (-1) =3 Returns D Example let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . at ( 1 )); Output Orange Negative Index let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . at ( - 1 )); Output Banana Real-Time Example Latest Notification let notifications = [ " Order Placed " , " Order Shipped " , " Delivered " ]; console . log ( notifications . at ( - 1 )); Output Delivered Common Mistake arr [ - 1 ] Output undefined Correct arr . at ( - 1 ) 4. Array join() Definition The join() method combines all array elements into a single string using a specified separator. Unlike toString() , you can choose the separator. The original array is not modified. Syntax array . join ( separator ) Parameters Parameter Description separator (optional) String inserted between elements. Default is "," . Returns A string containing all array elements joined together. Internal Working let fruits = [ " Apple " , " Orange " , " Banana " ]; If you call: fruits . join ( " - " ); JavaScript internally performs: "Apple" + " - " + "Orange" + " - " + "Banana" Result: Apple - Orange - Banana Example 1 let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . join ()); Output Apple,Orange,Banana Example 2 let fruits = [ " Apple " , " Orange " , " Banana " ]; console . log ( fruits . join ( " | " )); Output Apple | Orange | Banana Real-Time Example Suppose a user selects multiple skills in a job portal. let skills = [ " JavaScript " , " React " , " Node.js " ]; let profile = skills . join ( " , " ); console . log ( profile ); Output JavaScript, React, Node.js This is commonly used to display selected skills on a profile page. Common Mistake Developers sometimes expect join() to return an array. let result = [ " A " , " B " ]. join ( " - " ); console . log ( typeof result ); Output string What is the difference between join() and toString() ? join() toString() Allows a custom separator Always uses a comma Returns a string Returns a string Does not modify the array Does not modify the array Best Practices ✔ Use join() whenever you need a specific separator, such as spaces, hyphens, or pipes. 5. Array pop() Definition The pop() method removes the last element from an array and returns that removed element. The original array is modified . Syntax array . pop () Parameters None. Returns Returns the removed element. If the array is empty, it returns undefined . Internal Working Consider: let fruits = [ " Apple " , " Orange " , " Banana " ]; Memory before pop() : Index 0 → Apple 1 → Orange 2 → Banana length = 3 When you call: fruits . pop (); JavaScript: Retrieves the last element ( Banana ). Removes it from the array. Decreases the length property by 1. Returns the removed element. Memory after: Index 0 → Apple 1 → Orange length = 2 Example let fruits = [ " Apple " , " Orange " , " Banana " ]; let removed = fruits . pop (); console . log ( removed ); console . log ( fruits ); Output Banana [ "Apple" , "Orange" ] Real-Time Example Imagine a browser's recent tabs list. let recentTabs = [ " Home " , " Products " , " Cart " ]; let closedTab = recentTabs . pop (); console . log ( " Closed: " , closedTab ); console . log ( recentTabs ); Output Closed: Cart [ "Home" , "Products" ] Common Mistake let arr = []; console . log ( arr . pop ()); Output undefined Always check if the array has elements before calling pop() if your logic depends on a removed value. 1. Array.isArray() Note: isArray() is not an array method. It is a static method of the Array object. Definition The Array.isArray() method checks whether a given value is an array. It returns: true → if the value is an array false → otherwise Why do we need it? In JavaScript: typeof [] returns "object" So we cannot use typeof to determine whether a variable is an array. Instead, JavaScript provides: Array . isArray () Syntax Array . isArray ( value ) Parameter Parameter Description value The value to check Returns Boolean true false Internal Working Suppose let numbers = [ 10 , 20 , 30 ]; Internally JavaScript checks the object's internal type. numbers ↓ Object ↓ Internal Array Type? ↓ Yes ↓ Return true If let person = { name : " John " }; then person ↓ Object ↓ Internal Array Type? ↓ No ↓ Return false Example 1 let numbers = [ 10 , 20 , 30 ]; console . log ( Array . isArray ( numbers )); Output true Example 2 let student = { name : " David " }; console . log ( Array . isArray ( student )); Output false Example 3 console . log ( Array . isArray ( " JavaScript " )); console . log ( Array . isArray ( 100 )); console . log ( Array . isArray ( true )); Output false false false Real-Time Example Suppose an API returns data. function displayProducts ( products ){ if ( Array . isArray ( products )){ console . log ( " Displaying products... " ); } else { console . log ( " Invalid Data " ); } } displayProducts ([ " Laptop " , " Mouse " ]); Output Displaying products... Without checking, your application could crash when trying to iterate over non-array data. Common Mistake Wrong typeof [] Output object Correct Array . isArray ([]) Output true Best Practice Always validate API responses before looping. if ( Array . isArray ( data )){ data . forEach ( item => console . log ( item )); } 2. delete Operator (Array delete) Important: delete is not an array method. It is a JavaScript operator. Definition The delete operator removes an element from an array without changing the array length . Instead of removing the index, it creates an empty slot (hole) . Syntax delete array [ index ] Parameter Parameter Description index Position of element Returns Returns true if deletion succeeds. Internal Working Array let fruits = [ " Apple " , " Orange " , " Banana " ]; Memory 0 → Apple 1 → Orange 2 → Banana length = 3 After delete fruits [ 1 ]; Memory 0 → Apple 1 → Empty 2 → Banana length = 3 Notice Length remains 3 Example let fruits = [ " Apple " , " Orange " , " Banana " ]; delete fruits [ 1 ]; console . log ( f