17. 배열 조작하기

17-1. 요소추가

요소가 없는 배열을 선언해보겠습니다.
let cities = [];
cities 라는 변수에 빈 배열을 할당해주었습니다. 그리고 아래와 같이 요소를 하나씩 추가할 수 있습니다.

cities[0] = "서울"; // ["서울"]
cities[1] = "대전"; // ["서울", "대전"]
cities[2] = "대구"; // ["서울", "대전", "대구"]

그리고 6번째 요소에 미리 "제주도"를 할당해 볼까요?

cities[5] = "제주도";

왠지 차례대로 요소를 추가해야할 것 같지만, 이렇게 원하는 위치에 마음대로 요소를 할당할 수 있습니다. cities 의 4, 5번째 요소를 console.log 로 출력하면 뭐라고 나오나요? 직접 작성해서 출력되는 값을 확인해보세요.

확인하셨나요? 아무것도 할당하지 않았기에 undefined 라고 출력됩니다. 이로써 다음과 같이 총 6개의 요소가 있는 배열이 되었습니다. ["서울", "대전", "대구", undefined, undefined, "제주도"]

요소를 수정하고 싶을 때는 아래와 같이 배열의 인덱스에 접근하여 값을 할당하면 됩니다.

cities[5] = "포항";
console.log(cities[5]);

17-2. push / unshift 메소드

다른 방법으로도 요소를 추가 할 수 있습니다.

let cities = [];
cities.push("경주", "전주");
cities.unshift("인천");

push() , unshift() 메소드는 배열에 요소를 추가해주는 함수입니다. 둘의 차이는 요소들이 배열에 추가되는 위치가 다르다는 것 입니다.

push 는 배열의 마지막 부분, 즉 꼬리에 요소들을 추가하고, unshift는 배열의 맨 앞부분, 즉 머리 부분에 요소를 추가합니다.

console.log 로 cities 배열이 어떻게 나오는지 확인하고 넘어가주세요.

console.log(cities);

그런데 생각해보면, cities 라는 변수는 방금 만든 변수인데 push 라는 메소드를 사용할 수 있게 되었네요?

결론부터 이야기 하자면, cities 라는 변수에 [] 배열을 할당하는 순간, cities 라는 변수는 Array형이 되었습니다.

Array형에는 기본적으로 제공되는 내장 메소드들이 많이 있습니다. 그 중에 방금 살펴본 push, unshift가 있는 것입니다.

정리하자면, 배열 조작 방법에는 2가지가 있습니다.

1. index로 접근하여 수정이나 추가
2. push, unshift 메소드로 추가

let day = ['m', 's', 'w', 't'];
day[1] = 't';
day[4] = 'f';
day[5] = 's'; // 방법 (1)

let month = [1, 2, 3, 4]
month.push(5); // 방법 (2)

17-3. pop 메소드

배열에 요소를 추가하는 것 말고도, 요소를 제거 할 수도 있습니다.

cities.pop();
console.log(cities)

pop메소드를 사용하면 마지막 요소가 제거되고, 마지막 요소의 값을 반환합니다.

let lastCity = cities.pop();
console.log(lastCity);

Assignment

divideArrayInHalf 함수를 다음과 같이 구현해주세요.

• divideArrayInHalf 함수는 array를 인자로 받습니다. 이 array는 숫자 값으로 만 구성되어 있으며 총 5개의 요소(element)들로 구성되어 있습니다.

• divideArrayInHalf 함수는 인자로 들어온 array 로 부터 새롭게 구성된 배열 result 을 리턴합니다.

• array 요소들 중 10과 같거나 작은 값의 요소들은 result의 맨 앞으로, 10보다 큰 값의 요소들은 result의 맨 뒤로 재구성된 배열을 리턴 해주세요.

• 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소까지 입니다. 즉, 배열의 뒷 요소 부터 재구성을 진행해주세요.

• 예를 들어, 인자로 들어오는 array가 다음과 같을 때,
  [1, 20, 10, 5, 100]

result 배열이 만들어 지는 순서는 다음과 같습니다.

• [100]
• [5, 100]
• [10, 5, 100]
• [10, 5, 100, 20]
• [1, 10, 5, 100, 20]
  따라서, 아래와 같은 result가 리턴 되어야 합니다.
  [1, 10, 5, 100, 20]

풀이

처음 풀었을 당시 for 문의 기본을 몰라서 헤맸던게 생각이 났다.
for문의 기본을 다시 공부해보니 for 문안에서 return을 사용하는 것은 for문을 멈추고 싶을 때 사용하는 것이라고 한다.
그렇기 때문에 결과를 return하고 싶다면 for문 바깥에서 return 해줘야한다고 한다.

그리고나서 다시 풀었을 때 어떻게 풀어야 할 지 하나씩 생각해봤다.

1. result = []; 함수 내에서 새로운 배열 선언한다.
   let result = [];

2. for 문 안에서 array[i] <= 10 라면 배열의 맨 앞으고 가야하므로 unshift method 사용, array > 10 라면 배열의 맨 뒤로 가야하므로 push method 사용해야한다.

	if (array[i] <= 10) {
        result.unshift(array[i]);
      } 
      
    if (array[i] > 10) {
        result.push(array[i]);
      }

3. 재구성이 되는 순서는 array의 맨 뒤 요소부터 맨 앞 요소 까지니까 'for'문에서 배열의 맨 뒤 요소부터 맨 앞 요소로 이동되게 설정해주고 return 해야한다.

for (i < array.length; i => 0; i--) {
  
} return result;

4. 위의 코드들을 합친다.

function divideArrayInHalf(array) {
  let result = []; //(1)
    
  for(let i = array.length - 1; i >= 0; i--) {
  	if (array[i] <= 10) {
      result.unshift(array[i]);
    } // (2)
      
    if (array[i] > 10) {
      result.push(array[i]);
    } // (2)
  } return result; // (3)
}

참고
https://www.w3schools.com/js/js_loop_for.asp