(TIL) D+9 배열

여러 개의 데이터를 한 번에 처리하는 방법에 대한 고민
대량의 데이터를 쉽게 다룰 수 있게 해주는 데이터 타입 => 배열과 객체
배열이나 객체를 사용하면 여러 번의 선언과 할당을 해야만 했던 작업을 단 한 번의 선언으로 해결

배열은 순서에 대한 정보(index) 를 가지고 있는 (참조형) 데이터 타입

배열을 잘 다루기 위해서는
배열의 요소를 추가하거나 변경, 삭제하는 방법, 다양한 메서드를 확실하게 알고 활용!

• 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경
• length 속성을 이용하여 배열의 길이 조회
• 배열의 요소가 배열인 이중 배열의 요소를 조회하거나 변경
• 배열의 각 요소에 대하여, 반복하는 코드를 실행
• 배열에서 사용되는 다양한 메서드
  • split(), join(), slice(), splice(), Array.isArray(), push(), unshift(), pop(), shift(), indexOf(), includes()

배열 : 순서가 있는 값

• 순서 : 인덱스(index)
• 값 : 요소(element)

값은 인덱스를 이용해 접근한다!
예) myNumber 라는 변수에 할당한 배열 객체의 3번째 인덱스를 조회
⇒ myNumber[3]; // 61

• 인덱스 범위를 벗어난 값을 조회하면 ⇒ undefined

• 이중배열 접근(조회) 방법

let myNumber = [[13, 30], [73, 8], [44, 17]];

// 73 값에 접근하려면, 중복해서 
myNumber[1][0];

• 기타 배열 관련 메서드

. 을 이용해서 배열 변수가 가지고 있는 속성에 접근

let myNumber = [73, 98, 86, 61];

// 배열의 길이 arr.length
myNumber.length; // 4

// addToBack 요소 추가(마지막에) arr.push(마지막 값)
myNumber.push(96); // 배열 끝에 인자로 넣은 값을 추가  [73, 98, 86, 61, 96]

// removeFromBack 요소 삭제(마지막 값) arr.pop()
myNumber.pop(); // 배열 제일 끝에 값을 삭제 [73, 98, 86, 61]

// removeFromFront 요소 삭제(맨 처음 인덱스의 값) arr.shift()
myNumber.shift();

// addToFront 요소 추가(맨 처음 인덱스에) arr.unshift(처음 값)
myNumber.unshift(40);

• 배열과 반복문의 조합 사용(자주씀, 중요)

let myNum = [73, 98, 86, 61];

for (let n= 0; n < myNum.length; n++) {
	console.log(myNum[n]);
}

• 누적 연산 관련 초기값 설정시 주의사항
  undefined + 10 ⇒ 10이 아니라 NaN이 나오므로 주의!
  따라서 초기값은 undefined가 아니라 0으로 해줘야 연산 누적이 정상적으로 진행됨

배열다루기

• 배열인지 판별하기

// 배열인지 판별 Array.isArray(객체)

let words = ['피'. '땀', '눈물'];

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

// 배열에 element 추가 삭제

• array 의 변화가 어떠한지 보는 방법 : console.table(arr)

• 어떤 특정한 문자열(string)이 배열에 들어있는지 확인해보는 방법
  arr.indexOf(찾을거)

let words = ['Radagast', 'the', 'Brown'];

words.indexOf('the') // 1   (해당값은 인덱스번호가 리턴됨) => 즉 있는 경우는 값의 위치에 따른 인덱스 번호를 리턴하므로 매번 달라짐

// 배열에 없는 단어를 찾아달라고 인자로 넣으면?
words.indexOf('없으면') // -1   (없는 값을 조회 요청하면 -1이 리턴됨) => 없는 경우는 무조건 -1을 리턴함 => 따라서 이 결과(없는 것에 대한 결과)를 활용

// 이 원리를 이용해 존재여부(있는지 없는지) 확인하려면
words.indexOf('Brown') !== -1 // true (있다는 얘기)
words.indexOf('없는단어') !== -1 // false (없다는 얘기)

// 주의사항 : 대소문자를 구분하므로 제대로 구분하지 않으면 없는걸로 인식하니 유의할 것!

• 유틸리티 함수를 만들어 활용하는 방법

// hasElement(배열, 찾을 엘리먼트) // true or false

let words = ["Radagast", "the", "Brown"];

function hasElement(arr, element) {
  if (arr.indexOf(element) !== -1) {
    return "있네요";
  } else {
    return "없네요";
  }
}

hasElement(words, "the");
	

• 그러나 자바스크립트는 이 노가다를 줄이기 위해 내장함수를 만들어 두었으니..

// arr.includes(찾을 엘리먼트)

words.includes('Brown'); // true

words.includes('없는것'); // false

그럼 indexOf 랑 includes 중에서 우선 뭘 알아두는게 좋을까?
=> indexOf 추천
=> 엘리먼트 존재 여부 외에도 인덱스 정보도 확인할 수 있으니까! 더 유용함!
=> includes 메서드는 존재여부만 확인가능, 아직까지 브라우저 호환성면에서 익스플로러에서는 지원안됨

추가공부 배열 메서드

• split(), join(), slice(), splice()

✅  arr.splice()

• 만능 맥가이버, 자유자재 => 요소 추가, 삭제, 교체 모두 가능
• arr.splice(적용 시작할 인덱스, 제거하고자하는 요소의 개수, 배열에 추가할 요소)

요소 삭제
- 원본배열을 바꿈

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 1개를 제거

alert( arr ); // ["I", "JavaScript"]

요소 삭제, 교체

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

cf) splice는 삭제된 요소로 구성된 배열을 반환 가능

• splice 메서드로 처리되어 원본 배열이 변경 되지만
• 메서드로 처리한(삭제한) 요소들을 변수에 담으면 그것은 삭제된 요소로 구성된 새로운 배열이 됨
  ⇒ 음, 잘라서 가져다 붙이거나 재사용 할 수 있겠구먼..
  

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음 두 개의 요소를 삭제함
let removed = arr.splice(0, 2);

alert( removed ); // "I", "study" <-- 삭제된 요소로 구성된 배열

요소 추가

• 두번째 매개변수인 제거할 요소의 개수를 0으로 설정하는게 핵심!
• 첫번째 매개변수로 추가할 시작 위치도 정할 수 있음!

let arr = ["I", "study", "JavaScript"];

// 인덱스 2부터 (핵심2. 추가할 시작점 위치!)
// 0개의 요소를 삭제합니다.(핵심1. 삭제는 0!!)
// 그 후, "complex"와 "language"를 추가합니다.
arr.splice(2, 0, "complex", "language");

alert( arr ); // "I", "study", "complex", "language", "JavaScript"

✅ arr.slice()

• splice와 유사하지만 훨 간단
• arr.slice([start], [end])
• start 인덱스부터 end 인덱스까지(end 인덱스 값은 제외)의 요소를 복사한 새 배열을 반환(immutable)
• 문자열 메서드인 str.slice 와 유사하게 동작

let arr = ["t", "e", "s", "t"];

console.log(arr.slice(1, 3)); 
// ['e', 's'] (인덱스가 1인 요소부터 인덱스가 3인 요소까지를 복사(인덱스가 3인 요소는 제외))

console.log(arr.slice(-2)); 
// ['s', 't'] (인덱스가 -2인 요소부터 제일 끝 요소까지를 복사)

• 이 메서드로 기존 arr의 복사한 새로운 복사본 배열을 만들 수 있음! (자주씀) ⇒ 방법 : arr.slice() 인수를 하나도 넘기지 않고 호출하면 됨!
  

✅ str.split()

• 입력받은 문자열을 배열로 바꿀때 (입력: 문자열, 출력: 배열)
• 쉼표로 구분된 긴 문자열 형태의 수신자 리스트를 배열 형태로 전환 처리할 때

let names = 'Bilbo, Gandalf, Nazgul';

let arr = names.split(', '); // 구분자

for (let name of arr) {
  alert( `${name}에게 보내는 메시지` ); // Bilbo에게 보내는 메시지
}

• 두번째 인수로 숫자받을 수 있음 ⇒ 배열의 길이를 제한해줄 수 있음(실무에서는 많이 안씀)

let arr = 'Bilbo, Gandalf, Nazgul, Saruman'.split(', ', 2);

alert(arr); // Bilbo, Gandalf

✅ arr.join()

• 인수를 접착제처럼 사용하여 배열 요소를 모두 합쳐 하나의 문자열로 만들어줌
• (입력 : 배열 => 출력 : 문자열)

let arr = ['Bilbo', 'Gandalf', 'Nazgul'];

let str = arr.join(';'); // 배열 요소 모두를 ;를 사용해 하나의 문자열로 합칩니다.

alert( str ); // Bilbo;Gandalf;Nazgul

✅ arr.concat()

• arr.concat 은 기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용할 수 있습니다.
• arr.concat(arg1, arg2...)
• 인수엔 배열이나 값이 올 수 있는데, 인수 개수엔 제한이 없음
  
• 메서드를 호출하면 arr에 속한 모든 요소와 arg1, arg2 등에 속한 모든 요소를 한데 모은 새로운 배열이 반환됩니다.
  
• 인수 argN가 배열일 경우 배열의 모든 요소가 복사됩니다. 그렇지 않은경우(단순 값인 경우)는 인수가 그대로 복사됩니다.
  

let arr = [1, 2];

// arr의 요소 모두와 [3,4]의 요소 모두를 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4]) ); // 1,2,3,4

// arr의 요소 모두와 [3,4]의 요소 모두, [5,6]의 요소 모두를 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], [5, 6]) ); // 1,2,3,4,5,6

// arr의 요소 모두와 [3,4]의 요소 모두, 5와 6을 한데 모은 새로운 배열이 만들어집니다.
alert( arr.concat([3, 4], 5, 6) ); // 1,2,3,4,5,6

Mutable Method : 원본 배열 직접 변경

• push(), pop(), shift(), unshift()
• splice()

Immutable Method : 원본 배열 변경하지 않음, 새로운 배열을 생성하여 반환

• Array.slice() : ctrl + C 같음
• Array.concat(),
• join()

https://ko.javascript.info/array-methods

코플릿

피보나치 수열과 어려웠던 것들, 핵심 부분들 다시 연습하고 정리

for in for of 찾아보기