[SEB_FE] Javascript - 배열

1. 배열

---

javascript의 array, 즉 리스트형태의 고수준 객체인 배열을 생성할 때 사용한다. javascript의 배열은 길이와 각 요소의 자료형이 고정되어 있지 않다. 인덱스로는 정수만 허용된다.

let fruits = ['사과', '바나나']

console.log(fruits.length)
// 2

let first = fruits[0]
// 사과

let last = fruits[fruits.length - 1]
// 바나나

• array.push(element) : 배열 끝에 항목 추가하기
• array.pop(element) : 배열 끝에 항목 제거하기
• array.shift(element): 배열 앞에 항목 제거하기
• array.unshift(element): 배열 앞의 항목 추가하기
• array.indexOf(element): 배열의 인덱스 찾기
• Array.isArray(array): 매개변수가 배열이면 참, 아니면 거짓 리턴

배열을 새로운 변수에 할당해도 배열이 복사되지 않는다. 새로운 변수에는 원본 배열을 가리키는 참조만 할당되며, 원본 배열의 값을 바꾸면 새 변수에서도 그 변경점이 반영된다!

let array1 = [1,2,3]
let array2 = array1;
array1[1] = 9;
console.log(array2);
// [1,9,3] , 변화가 반영됨.

2. slice(), splice

---

2-1. slice✈️

slice() 함수는 배열로 부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용한다. 첫번째 인자로 시작 인덱스, 두번째 인자로 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스 전까지 값을 복사하여 반환한다.

let arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19];
 arr.slice(5, 10);
// [5, 6, 7, 8, 9]

종료 인덱스가 가리키는 값은 포함하지 않는다. 두번째 인자를 작성하지 않으면 작성된 시작 인덱스부터 끝까지 복사한다. 첫번째 인자도 작성하지 않으면 전체를 복사한다.

arr.slice(10);
//[10, 11, 12, 13, 14, 15, 16, 17, 18, 19]

slice() 함수는 splice() 함수와 달리 아무리 많이 호출해도 원본 배열의 값은 절대 건드리지 않는다. 따라서 원본 배열이 그대로 보존되야 하는 상황에서 사용된다.

2-2. splice✈️

splice() 함수는 첫번째 인자로 시작 인덱스, 두번째 인자로 몇개의 값을 삭제할지, 그리고 세번째 인자부터는 추가할 값을 가변 인자로 넘길 수 있으며, 삭제된 값을 담고 있는 배열을 반환한다.

	arr.splice(5, 3) //인덱스 5번 부터 3개의 값
	//[5, 6, 7]
	arr
	//[0, 1, 2, 3, 4, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19
    

인자 하나만 입력할 경우 해당 인덱스부터 마지막 인덱스까지의 배열을 반환한다.

    arr.splice(15)
	//[15, 16, 17, 18, 19]

3. 예제문제

---

1. 문자열을 입력받아 문자열을 구성하는 각 단어를 요소로 갖는 배열을 리턴

function getAllWords(str) {
  let arr = [];
  if(str.length == 0){return arr;}
  arr = str.split(' ');
  return arr;
}

2. 문자열을 입력받아 문자열에서 가장 긴 단어를 리턴

function getLongestWord(str) {
  let arr = [];
  arr = str.split(' '); //공백이 있을때 배열에 추가
  let max = arr[0].length; //0번째 값을 max로 설정
  let maxresult = arr[0];
  for(let i =1; i<arr.length; i++){//1번째부터 비교 시작
    if(arr[i].length > max){//max보다 크면 교체
      maxresult = arr[i];
      max = arr[i].length;
    }
  }
  return maxresult;
}

3. 배열에서 n번째 인덱스 값만 제거할 때

function getAllElementsButNth(arr, n) {
  arr.splice(n,1); //인덱스 n 부터 1개의 값 제거
  return arr;
}

4. 전화번호 출력

function createPhoneNumber(arr) {
  let tel ='';
  tel = arr.join('');
  if(arr.length == 8){
     tel = '010'+tel;
     tel = '('+ tel.slice(0,3) + ')' + tel.slice(3,7) + '-' + tel.slice(7,11);
  }
  else{
    tel = '('+ tel.slice(0,3) + ')' + tel.slice(3,7) + '-' + tel.slice(7,11);
  }
  return tel;
}

4번 문제를 풀 때 나는 배열을 먼저 문자열로 변환하고, 길이에 따라 010을 더하는 여부를 나누어 주었다. 그 뒤 형식에 맞게 변환했다. 레퍼런스 코드는 문자열 변수 3개(head, body, tail)로 전화번호를 나누어 준다음 그 변수 각각에 slice()함수를 이용해 자른 배열들을 넣어준 코드였다. 그 뒤에 합쳐서 문자열로 리턴을 해주었다. 난 문자열로 변환 후 슬라이스 해주었고, 레퍼런스는 슬라이스 된 배열을 문자열로 변환한 것의 차이가 있었다.

참고 | MDN