[Wecode] TIL 2022-09-21

배열의 조작

1. unshift()

기존에 알고 사용했던 push()는 배열의 끝에 요소를 추가하는 메서드였다. unshift()는 배열의 첫 부분에 요소를 추가하는 메서드임으로, 사용할 경우를 나눠 사용할 수 있다.

2. pop()

기존에 정리했던 내용이나 보자마자 어떤 내용인지 떠오르지 않아 다시 정리한다. pop()은 배열의 마지막 요소를 제거하고, 그 제거한 요소를 반환한다. 이 때, 원래 배열은 pop으로 제거된 요소를 제외한 나머지 요소들이 자리하고 있다.

const cities = ["서울", "대전", "대구"]
cities.pop() // 반환되는 값은 마지막 요소인 "대구"
console.log(cities) // 마지막 요소인 "대구"가 제거된 ["서울", "대전]이 출력된다.

3. 문제풀이

문제 개요

배열의 요소들 중 10과 같거나 작은 값은 맨 앞으로, 10보다 큰 값은 맨 뒤로 재구성하여 결과를 리턴하는 문제.
특히, 맨 뒤 요소부터 결과값에 대입해야하기 때문에 기본적인 push, unshift말고 pop 메서드를 사용해야 하는 것이 고민되었던 문제.

function divideArrayInHalf(array) {
  let arrayLength = array.length;
  let result = [];

  for(i=0; i < arrayLength; i++) {
    const lastNumber = array.pop();
    if(lastNumber <= 10) {
      result.unshift(lastNumber);
    } else {
      result.push(lastNumber);
    }
  } return result;
}

풀이 방법

1) pop메서드를 사용하면 배열의 길이가 계속해서 줄어들기 때문에 원하는만큼 for문을 돌릴 수 없다. 때문에, for문의 밖에서 배열의 길이를 변수에 저장하여 변하지 않게 함.

2) 마지막 요소를 반환하는 pop메서드를 변수로 지정하고, 배열의 길이만큼 for문을 돌려 계속 마지막 요소들을 result라는 빈 배열에 unshift와 push로 넣어줬다.

풀이 중 생겼던 오류상황

1) 맨 뒤의 요소부터 시작해야 했던 부분을 for문을 거꾸로 돌려서 해결하려 했음.

for(i=array.length - 1; i <= 0; i--)

해당 방식으로 for문을 i를 배열의 길이로 초기화하고, i가 0이 될때까지 i를 빼는식으로 거꾸로 돌렸으나, 작동하지 않음.
작동하지 않은 이유는 비교연산자들을 잘못 사용하고 있었음. 결론적으로는 for문을 거꾸로 돌려도 맞는 풀이가 있었음.

//for문을 거꾸로 돌린 풀이
function test(array) {
  let arrayLength = array.length;
  let result = [];

  for(i=arrayLength - 1; i >= 0; i--) {
  if(array[i] <= 10) {
    result.unshift(array[i])
  } else {
    result.push(array[i])
  } 
} return result;
}

2) 배열의 길이가 계속적으로 줄어들어 원하는만큼 반복문이 돌아가지 않음.
pop메서드는 배열의 마지막 요소를 제거하는 메서드이기 때문에, 반복문이 돌아갈 때 마다 하나의 요소씩 사라져 길이가 계속 변화하는 것을 파악했음. 때문에, 변수에 배열의 길이를 숫자로 저장하는 방식으로 해소할 수 있었음. (for문의 바깥공간에서 선언해야 함)

function divideArrayInHalf(array) {
  let arrayLength = array.length; // 배열의 길이를 숫자형식으로 고정
  let result = [];

  for(i=0; i < arrayLength; i++) {
    const lastNumber = array.pop();
    if(lastNumber <= 10) {
      result.unshift(lastNumber);
      
    } else {
      result.push(lastNumber);
    }
  } return result;
}

데이터 타입

typeof

typeof null

null값을 typeof로 연산하면 "object"가 반환되는데, null값은 기본적으로 object타입이며, 그 이유는 null은 빈 객체(object)를 참조하고 있기 때문이다.

typeof array

array(배열)은 확장된 객체로써 typeof로 연산하면 "object"를 반환한다. array의 타입이 object인 이유는 거꾸로 이해하면 조금 더 편하다.

• 배열은 원시타입이 아닌 참조타입이다.
• 객체 또한 참조타입인데 배열은 객체의 하위타입이기 때문에 배열은 객체이다.

※ 객체와 배열이 따로 존재하는 이유는 객체는 원하는 순서에 데이터를 삽입할 수 없고, 순서와 길이에 관련된 메서드가 없기 때문에 순서가 중요한 로직을 구현하는데는 객체보다는 배열이 더 용이하기 때문.

String

1. slice()

텍스트를 잘라주는 함수로, 인자로는 자를 시작위치와 자를 끝위치 slice(시작,끝) 이 들어가게 된다. 인자는 숫자로 들어가게 되고, 잘릴 끝위치에 있는 문구는 자르지 않는다.

2. indexOf()

인자로 들어가는 텍스트의 시작되는 index를 반환한다. index는 숫자로 반환되며, slice메서드와 연계하여 문장에서 불필요한 단어를 찾아 삭제 또는 수정할 수 있다.
만약 값이 존재하지 않는다면 -1을 반환한다.

3. 문제풀이

문제개요

주어진 주소에서 도시를 찾아 삭제하고 새로운 주소를 리턴해야한다. 도시는 무조건 "시"로 끝나고, "시"는 주소에 무조건 한 번만 포함되어 있다.
예를 들면, "경기도 성남시 분당구 중앙공원로 53"은 "경기도 분당구 중앙공원로 53"으로 바뀌어야한다.

function sliceCityFromAddress(address) {
  const cityIndex = address.indexOf("시")
  const provIndex = address.indexOf("도")
  const lastIndex = address.length;  
    if(provIndex !== -1 && cityIndex !== -1) { // 도, 시가 다 있는경우
    const provCityAddress = address.slice(0, provIndex + 2) + address.slice(cityIndex - (lastIndex - 2), lastIndex);
    return provCityAddress;
  } else if(provIndex === -1 && cityIndex !== -1) { // 시만 있을 경우
    const CityAddress = address.slice(cityIndex - (lastIndex - 2), lastIndex);
    return CityAddress;
  } else if(cityIndex === -1) { // 시가 없으면
   return address; }
}

풀이방법

1) 제외시킬 텍스트의 인덱스가 4~6이라면 시작점부터 4까지의 텍스트와 6부터 끝까지의 텍스트를 붙히면 자연스럽게 4~6의 텍스트를 없앨 수 있다.

2) 제외시킬 텍스트의 인덱스와 앞 뒤로 있는 문장들의 인덱스를 구한다.

• 서울특별시처럼 앞에 도가 붙어있지 않은 주소가 있기 때문에 도의 인덱스와 시의 인덱스를 알 필요성이 있었기 때문에 나눠서 선언.

• 과제제출 이후, address.length가 중복되어 lastIndex로 선언하고 사용함.

const cityIndex = address.indexOf("시")
const provIndex = address.indexOf("도") 
// cityIndex부터 끝까지 텍스트의 index는 address.slice(cityIndex, address.length)로 구할 수 있었음.

3) 서울특별시 같이 도가 없는 주소도 존재하니 도가 있고 없고를 확인하는 조건문을 만든다.

• indexOf는 값이 존재하지 않으면 -1을 반환하기 때문에, 도, 시가 다 있는 경우는 !== 연산자를 통해 확인할 수 있다.

• 도, 시가 다 있는 경우 return할 provCityAddress를 새로 선언하고, 도는 포함되어야 하기 때문에, slice시 0(첫부분) 부터 provIndex(도)를 해줬다. 이 때, 마지막 인덱스가 포함되지 않기 때문에 +1 을 해주었고, 이후 띄어쓰기 한 칸이 있기 때문에 +2를 해주었다.

• 그리고 빼야할 cityIndex의 시작부터 + 2를 해주어 3글자를 빼줬는데, 작성하다보니 + 2 가 아니라, lastIndex에서 -2를 뺀 값을 cityIndex에서 빼주는게 맞다 (이유는 동두천시 같이 4글자 도시가 있을 수 있기 때문)

• 같은 로직으로 시만 있을 경우에는 시를 제외한 나머지 인덱스 값을 slice해주면 된다.

• 마지막으로 시가 없으면 그대로 받은 address를 반환하면 된다.

      if(provIndex !== -1 && cityIndex !== -1) { // 도, 시가 다 있는경우
    const provCityAddress = address.slice(0, provIndex + 2) + address.slice(cityIndex - (lastIndex - 2), lastIndex);
    return provCityAddress;
  } else if(provIndex === -1 && cityIndex !== -1) { // 시만 있을 경우
    const CityAddress = address.slice(cityIndex - (lastIndex - 2), lastIndex);
    return CityAddress;
  } else if(cityIndex === -1) { // 시가 없으면
   return address; }

풀이 중 생겼던 오류상황

1) 처음엔 제외시킬 텍스트를 slice하였는데, 그 이후로는 도통 방법이 떠오르지 않았다가 거꾸로 제외시킬 텍스트의 인덱스를 구하고, 그 인덱스의 앞 뒤 부분을 잘라 붙히려는 방법을 선택하니 쉽게 풀렸음.