[JavaScript] 배열, 배열 메서드(method)

• 배열(array) : 순서(index)가 있는 값
  • 순서(index)는 0부터 시작함
  • 각각의 값은 배열 요소 (element)라고 함

순서(Index)	[0]	[1]	[2]
요소(Element)	apple	banana	orange

---

배열 생성하기

// 1. 대괄호 사용하여 배열 생성
const arr1 = ['apple', 'banana', 'orange'];
console.log(arr1) // ['apple', 'banana', 'orange']

// 2. 배열 생성자(constructor) 사용하여 배열 생성
const arr2 = new Array('apple', 'banana', 'orange');
console.log(arr2) //['apple', 'banana', 'orange']

---

배열 관련 메서드(method)

Array.isArray()

• isArray() : 인자가 배열인지 아닌지 판별

let words = ['피', '땀', '눈물'];
console.log(Array.isArray(words)); // true

console.log(Array.isArray([])); // true

console.log(Array.isArray([1,2,3])); // true

let str = 'Hello World'
console.log(Array.isArray(str)); // false

console.log(Array.isArray('words')); // false

console.log(Array.isArray(100)); // false

 

Array.prototype.join(separator)

• join () : 배열을 문자열로 바꾸기
• separator : 구분자, 배열의 각 요소를 구분할 문자열 (선택)

const fruits = ['apple', 'banana', 'orange'];
// separator가 생략되었을 때는 쉼표(,)로 구분하여 문자열로 만듦
console.log(fruits.join()); // apple,banana,orange
// separator 사용
console.log(fruits.join('_')); // apple_banana_orange

 

String.prototype.split(separator, limit)

• split() : 문자열을 배열로 바꾸기
• separator : 원본 문자열을 끊어야 할 부분을 나타내는 문자열(선택)
• limit : 끊어진 문자열의 최대 개수를 나타내는 정수(선택)

const fruits = '🍎, 🥝, 🍌, 🍒';
console.log(fruits.split()); // [ '🍎, 🥝, 🍌, 🍒' ]
console.log(fruits.split(',')); // [ '🍎', ' 🥝', ' 🍌', ' 🍒' ]
console.log(fruits.split(',',2)); // [ '🍎', ' 🥝' ]

 

Array.prototype.reverse()

• reverse() : 배열의 순서를 반대로 바꾸기

const array = [1, 2, 3, 4, 5];
console.log(array.reverse()); // [ 5, 4, 3, 2, 1 ]

 

Array.prototype.slice([begin[, end]])

• slice() : 배열의 begin 부터 end 까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환

const array = [1, 2, 3, 4, 5];
console.log(array.slice(2,5)); // [ 3, 4, 5 ]
console.log(array); // [ 1, 2, 3, 4, 5 ], 원본 배열은 바뀌지 않음!

 

Array.prototype.push(element1[, ...[, elementN]])

• push() : 배열의 끝에 하나 이상의 요소를 추가하고 배열의 새로운 길이를 반환
• elementN : 추가할 N개의 요소

let animals = ['pigs', 'dogs', 'sheep'];
console.log(animals); // [ 'pigs', 'dogs', 'sheep' ]
console.log(animals.push('cats', 'cows')); // 5
console.log(animals); // [ 'pigs', 'dogs', 'sheep', 'cats', 'cows' ] 

 

Array.prototype.pop()

• pop() : 배열의 마지막 요소를 제거하고 그 요소를 반환

let animals = ['pigs', 'dogs', 'sheep'];
console.log(animals); // [ 'pigs', 'dogs', 'sheep' ]
console.log(animals.pop()); // sheep
console.log(animals); // [ 'pigs', 'dogs' ] 

 

Array.prototype.shift()

• shift(): 배열에서 첫 번째 요소를 제거하고, 제거된 요소를 반환

let animals = ['pigs', 'dogs', 'sheep'];
console.log(animals); // [ 'pigs', 'dogs', 'sheep' ]
console.log(animals.shift()); // pigs
console.log(animals); // [ 'dogs', 'sheep' ]

 

Array.prototype.unshift([...elementN])

• unshift() : 새로운 요소를 배열의 맨 앞쪽에 추가하고, 새로운 길이를 반환
• elementN : 추가할 N개의 요소

let animals = ['pigs', 'dogs', 'sheep'];
console.log(animals); // [ 'pigs', 'dogs', 'sheep' ]
console.log(animals.unshift('cat', 'tigers')); // 5
console.log(animals); // [ 'cat', 'tiger', 'pigs', 'dogs', 'sheep' ]

 

Array.prototype.indexOf(searchElement[, fromIndex])

• indexOf() : 배열에서 인수로 전달된 요소의 인덱스를 반환 (존재하지 않으면 -1을 반환)
• searchElement : 배열에서 찾을 요소 (대소문자 구분)
• fromIndex : 검색을 시작할 색인(index), 미입력 시 0부터 검색 (선택)

let animals = ['pigs', 'dogs', 'sheep'];
console.log(animals); // [ 'pigs', 'dogs', 'sheep' ]
console.log(animals.indexOf('sheep')); // 2 (존재하는 요소로, 요소의 인덱스 반환)
console.log(animals.indexOf('없는 요소')); // -1 (존재하지 않는 요소로 -1 반환)
console.log(animals.indexOf('Pigs')); // -1 (대소문자를 구분함, 존재하지 않는 요소로 -1 반환)

// indexOf 사용하여 함수 생성해보기
let searchElement = function(arr, el) {
  // 존재하지 않는 요소를 -1을 반환한다.
  // indexOf의 결과가 -1이 아니라면 존재하는 요소 이므로 true를 반환
  if (arr.indexOf(el) !== -1) {
    return true;
  } else {
    return false;
  }
}
let fruits = ['apple', 'banana', 'orange'];
console.log(searchElement(fruits, 'apple')); // true
console.log(searchElement(fruits, 'pineapple')); // false

 

Array.prototype.includes(valueToFind[, fromIndex])

• includes() : 배열이 특정 요소를 포함하고 있는지 판별
• valueToFind : 배열에서 찾을 특정 요소 (대소문자 구분)
• fromIndex : 검색을 시작할 색인(index), 미입력 시 0부터 검색 (선택)

let animals = ['pigs', 'dogs', 'sheep','sheep'];
console.log(animals.includes('sheep')); // true (존재하는 요소로, true 반환)
console.log(animals.includes('없는 요소')); // false (존재하지 않는 요소로, false 반환)
console.log(animals.includes('Pigs')); // false (대소문자를 구분함, 존재하지않는 요소로 false 반환)