Array

배열이란?

선언하는 방법

배열 요소에 접근하기

배열의 요소 수정, 길이 구하기, 추가, 삭제

1. 배열의 요소 수정하기
2. 배열의 길이 구하기
3. 배열의 요소 추가하기
4. 배열의 요소 삭제하기

배열 속에 배열 추가하기

배열의 가장 마지막 요소 구하기

🥝 Array 1. - 배열이란?

배열(array)은 이름과 인덱스로 참조되는 정렬된 값의 집합으로 정의된다. 배열을 구성하는 각각의 값을 배열 요소(element)라고 하며, 배열에서의 위치를 가리키는 숫자를 인덱스(index)라고 한다.

하나의 공통되거나 비슷한 목적이나 특징에 속하는 요소들을 하나의 그릇에 순서대로 담아서 보관한다고 생각하면 쉽다. 가령 과일(fruits)이라는 주제에는 바나나(Banana), 딸기(Strawberry), 메론(Melon), 자몽(Grapefruit) 의 하위 과일 목록이 있다고 하자. 배열은 과일이라는 변수를 선언하고 배열에 각종 하위 분류 되는 바나나, 딸기 등의 과일 요소를 순서대로 담아서 묶는 것이라고 생각하면 된다.

let myFruits = [52, 'Strawberry', 'Banana', '복숭아', true]

자바스크립트에서 배열의 특징은 다음과 같다.

1. 위의 예시처럼 배열 요소에 다양한 데이터 타입이 올 수 있다.

2. 배열 요소들은 저장될 때 고유한 식별자(숫자)를 갖게 된다. 그것이 인덱스이다.

3. 프로그래밍에서는 숫자 0부터 넘버링 하기 때문에 이처럼 배열 요소의 인덱스는 언제나 0부터 시작한다. 가령 52 라는 숫자는 myArray의 0번이다. true 라는 불리언 타입은 4번이다.

4. 하나의 함수는 하나의 값만을 반환(return)할 수 있기 때문에 데이터가 다양하면 각각의 데이터 정보를 반환하는 함수를 만들어야한다. 하지만 배열은 하나의 변수 안에 여러 데이터를 담을 수 있어 효율적이고 인덱스로 인하여 필요한 정보를 골라서 사용할 수 있다.
   
   

🥝 Array 2. - 선언하는 방법

배열 선언 문법에는 2가지 방법이 있다. 하나는 Array literal 다른 하나는 Array Constructor 이다.

Array literal 은 상대적으로 간단하다. 콤마로 구분되어 있는 배열 요소들의 목록과 그 목록을 감싸는 대괄호로 구성되어 있다.

var stringArray = ["one", "two", "three"];

var numericArray = [1, 2, 3, 4];

var booleanArray = [True, False, True, False]

Array Constructor는 new 키워드를 사용하여 배열을 초기화할 수 있다. 그리고 아래 3가지 형식으로 쓰인다.

var arrayName = new Array();

var arrayName = new Array(Number length);

var arrayName = new Array(element1, element2, element3,... elementN);

아래는 위 형식에 대한 예시다.

var stringArray = new Array();
stringArray[0] = "one";
stringArray[1] = "two";
stringArray[2] = "three";
stringArray[3] = "four";

var numericArray = new Array(3);
numericArray[0] = 1;
numericArray[1] = 2;
numericArray[2] = 3;

var mixedArray = new Array(1, "two", 3, "four");

🥝 Array 3. - 배열 요소에 접근하기

내가 접근하고자 하는 배열의 변수를 적고 대괄호와 그 사이에 내가 접근하고자 하는 인덱스 번호를 적어준다.

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

let first = fruits[0]
console.log(first)	// Banana

console.log(fruits[1])	// Strawberry

🥝 Array 4. - 배열의 요소 수정, 길이 구하기, 추가, 삭제

1. 배열의 요소 수정하기

배열 요소를 수정하는 방법으로는 해당 배열의 변수와 수정하고자 하는 위치를 가리키는 인덱스 숫자가 적힌 대괄호에 변경해주고자 하는 배열의 요소를 할당해준다.

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits[0] = 'avocado';
fruits[2] = 'Grapefruit'
console.log(fruits)	// ["avocado", "Strawberry", "Grapefruit", "Peaches"]

2. 배열의 길이 구하기

배열의 변수에 .length 를 붙여주면 해당 배열의 길이를 알 수 있다.
배열의 길이 = 인덱스 가장 마지막 값 + 1

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

console.log(fruits.length)	// 4

3. 배열의 요소 추가하기

배열의 요소를 추가하는 메소드 중 대표적인 3가지를 알아본다.
Array.push(), Array.unshift(), Array.splice() 로 구성되어 있다.

1) .push() - 배열의 끝에 요소를 추가한다.

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits.push('Mango')
console.log(fruits)	// ["Banana", "Strawberry", "Grape", "Peaches", "Mango"]

2) .unshift() - 배열의 앞에 요소를 추가한다.

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits.unshift('Mango')
console.log(fruits)	// ["Mango", "Banana", "Strawberry", "Grape", "Peaches"]

3) .splice() - 원하는 배열의 위치에 하나 이상의 요소를 추가할 수 있다.
예 - array.splice("위치", 0, ["element1", "element2" ... ])

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits.splice(2, 0, 'Mandarin', 'Kiwi')
console.log(fruits) // ["Banana", "Strawberry", "Mandarin", "Kiwi", "Grape", "Peaches"]

4. 배열의 요소 삭제하기

배열의 요소를 삭제하는 메소드 중 대표적인 3가지를 알아본다.
Array.pop(), Array.shift(), Array.splice() 로 구성되어 있다.

1) .pop() - 배열의 마지막 요소를 삭제한다.

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits.pop()
console.log(fruits)	// ["Banana", "Strawberry", "Grape"]

2) .shift() - 배열의 첫 번째 요소를 삭제한다.

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits.shift()
console.log(fruits)	// ["Strawberry", "Grape", "Peaches"]

3) .splice() - 원하는 배열의 위치에서 하나 이상의 요소를 삭제한다.
예 - array.splice("시작위치", "제거건수")

let fruits = ['Banana', 'Strawberry', 'Grape', 'Peaches']

fruits.splice(1, 2)
console.log(fruits)		// ["Banana", "Peaches"]

문제 1)

• splice 메서드를 이용해 175cm 이상인 사람은 뒤에 설 수 있도록 코드를 작성하기

let extractedPeople = [{'철수':'150cm'}, {'영희': '153cm'},
{'바둑이': '155cm'},{'밍키': '160cm'}, {'살구' : '168cm'},
{'두팔': '175cm'}, {'여름': '180cm'}, {'소헌': '181cm'}];

function extractOver175(list) {
  //괄호 안은 음수만 들어가야 합니다.
  let result = extractedPeople.splice(-3, 3)
  return result;
}

console.log(extractOver175())
// [[object Object] {두팔: "175cm"}, [object Object] {여름: "180cm"}, [object Object] {소헌: "181cm"}]

문제 2)

• 중첩된 for문에서 '곰팡이'라는 단어를 제거한다.

let basket = [['양파','곰팡이'],['곰팡이','빵','딸기잼'],['귤','곰팡이','사과']];

function removeGerm(arr) {
  for(let i = 0; i < arr.length; i++) {
    for(let j = 0; j < arr[i].length; j++) {
      if(arr[i][j] === '곰팡이') {
        arr[i].splice(j, 1);
      }
    }
  }
  return arr;
}

removeGerm(basket)

i의 영역은 ['양파','곰팡이'] 와 같은 묶음 배열 단위를 가리키고 j의 영역은 묶음 배열 속의 단위 요소인 '양파', '곰팡이' 를 가리킨다.

🥝 Array 5. - 배열 속에 배열 추가하기

배열 속에 배열이 겹으로 중첩되어 있다고 하여 중첩 Array 혹은 Nested Array 라고 한다. 중첩 배열에는 배열의 요소로 하나 혹은 그 이상의 배열을 가지고 있다.
아래와 같이 2개의 nested array가 있는 경우에는 두 쌍의 대괄호를 사용하여 나타내고자 하는 배열과 그 배열 속에 있는 요소를 나타낼 수 있다. 예를 들어 'Europe' 을 반환하고 싶다면 myArr[0][1] 으로 입력할 수 있다.

let myArr = [['UK', 'Europe', 44], ['ROK', 'Asia', 82]]
           
console.log(myArr[0][0] + " is located in " + myArr[0][1] + " and uses " + myArr[0][2])
console.log(myArr[1][0] + " is located in " + myArr[1][1] + " and uses " + myArr[1][2])

// UK is located in Europe and uses 44
// ROK is located in Asia and uses 82

🥝 Array 6. - 배열의 가장 마지막 요소 구하기

배열의 인덱스와 길이를 활용하여 배열의 가장 마지막 요소에 접근하는 방법을 알아볼 것이다. 간단하고 짧은 배열의 코드가 있을 때에는 해당 배열의 마지막 요소가 어떤 것인지 금방 파악할 수 있다. 하지만 배열의 요소가 1억개가 있다고 가정한다면, 또 그 배열들이 많다면 우리는 각 배열의 마지막 요소를 파악하기 어려울 것이다. 이를 해결하기 위해서 우리는 배열의 길이를 구하는 방법과 연관지어 생각해볼 수 있다.

배열의 길이는 해당 배열의 변수에 .length 를 입력하면 구할 수 있다고 배웠다. 또한 우리가 배열의 가장 마지막 요소를 구하기 위해서는 인덱스를 활용하여 구해야 한다. 이를 조합해본다면 배열의 가장 마지막 요소, 혹은 뒤에서 n번째의 요소도 구할 수 있다.

let unitedKingdom = ["England", "Welsh", "Scotland", "Northern Island"]
let climate = ["Tropical rainy", "dry", "Temperate marine", "Temperate continental", "Polar", "highlands"]
let states = ["CA", "NY", "TX", "OR", "MS"]

console.log(unitedKingdom[unitedKingdom.length - 1])	// Northern Island
console.log(climate[climate.length - 1])		// Highlands
console.log(states[states.length - 2])			// OR

---

<출처>
TCPschool
생활코딩
tutorialsteacher
MDN
젠트의 프로그래밍 세상