프로그래밍 기초 02(배열과 메서드)

오늘은 함수와 객체에 대해 배우는 시간이었다.

오늘 배운 내용을 조금 정리하고자한다. 

 

배열과 메서드

splice 

arr.splice(index[, deleteCount, elem1, ..., elemN])

첫번째 매개변수는 조작을 가할 첫 번째 요스를 가르키는 인덱스(index)입니다. 두번 째 매개변수는 deleteCount로, 제거하고자 하는 요소의 개수를 나타냅니다. elem1, ..., elemN은 배열에 추가할 요소를 나타냅니다. 

 

예시. 

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

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

console.log( 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"]

---

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

// 인덱스 2부터
// 0개의 요소를 삭제합니다.
// 그 후, "complex"와 "language"를 추가합니다.
arr.splice(2, 0, "complex", "language");

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

 

slice

arr.slice([start], [end])

"start" 인덱스부터 ("end"를 제외한) "end" 인덱스까지의 요소를 복사한 새로운 배열을 반환한다. 

start 와 end는 둘 다 음수일 수 있는데 이땐, 배열 끝에서부터의 요소 개수를 의미합니다.

 

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인 요소부터 제일 끝 요소까지를 복사)

 

 

concat

arr.concat은  기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용할 수 있습니다. 

arr.concat(arg1, arg2...)

인수엔 배열이나 값이 올 수 있는데, 인수 개수엔 제한이 없음.

 

let arr = [1, 2];

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

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

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

 

 

배열 탐색하기

배열 내에서 무언가를 찾고 싶을 때 쓰는 메서드

 

arr.indexof, arr.lastindexof, arr.includes 는 같은 이름을 가진 문자열 메서드와 문법이 동일합니다. 하는 일도 같습니다. 

연산 대상이 문자열이 아닌 배열의 요소라는 점만 다릅니다. 

 

• arr.indexof(item, from)는 인덱스 from 부터 시작해 item(요소)을 찾습니다. 요소를 발견하면 해당 요소의 인덱스를 반환하고, 발견하지 못했다면 -1을 반환합니다.
• arr.lastindexof(item, from)는 위 메서드와 동일한 기능을 하는데, 검색을 끝에서부터 시작한다는 점만 다릅니다. 
• arr.includes(item, from)는 인덱스 from부터 시작해 item이 있는지를 검색, 해당하는 요소를 발견하면 true를 반환합니다. 

const arr = [NaN];
console.log( arr.indexOf(NaN) ); // -1 (완전 항등 비교 === 는 NaN엔 동작하지 않으므로 0이 출력되지 않습니다.)
console.log( arr.includes(NaN) );// true (NaN의 여부를 확인하였습니다.)

 

find 와 findIndex

let result = arr.find(function(item, index, array) {
  // true가 반환되면 반복이 멈추고 해당 요소를 반환합니다.
  // 조건에 해당하는 요소가 없으면 undefined를 반환합니다.
});

요소 전체를 대상으로 함수가 순차적으로 호출됩니다.

• item - 함수를 호출할 요소
• index - 요소의 인덱스
• array - 배열 자기 자신

함수가 참을 반환하면 탐색은 중단되고 해당 요소가 반환됩니다. 원하는 요소를 찾지 못했다면 undefined가 반환됩니다.

id와 name 프로퍼티를 가진 사용자 객체로 구성된 예로 들어보겠습니다. 배열 내에서 id == 1 조건을 충족하는 사용자 객체를 찾아봅시다. 

let users = {
	{id: 1, name: "John"},
    {id: 2, name: "Pete"},
    {id: 3, name: "Mary"}
};

let user = users.find(item => item.id == 1); 
console.log(user);

arr.findindex는 find와 동일한 일을 하나, 조건에 맞는 요소를 반환하는 대신 해당 요소의 인덱스를 반환한다는 점이 다릅니다. 

조건에 맞는 요소가 없다면 -1을 반환됩니다.

 

filter

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해집니다.
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환됩니다.
});

예시.

let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let someUsers = users.filter(item => item.id <3); 
console.log(someUsers);

 

 

배열을 변형하는 메서드 

배열을 변형시키거나 요소를 재 정렬해주는 메서드.

 

map

let result = arr.map(function(item, index, array) {
  // 요소 대신 새로운 값을 반환합니다.
});

예시.

let lengths = ["Bilbo", "Gandalf", "Nazgul"].map(item => item.length);
console.log(lengths); // 5,7,6

 

sort(fn)

배열 요소를 정리 해주는 메서드 

let arr = [ 1, 2, 15 ];

// arr 내부가 재 정렬됩니다.
arr.sort();

console.log( arr );  // 1, 15, 2

재정렬 후 배열 요소가 1, 15, 2 가 되었습니다. 기대하던 결과(1,2,15)와는 다른데,

요소는 문자열로 취급되어 재 정렬되기 때문에 이러한 문제가 생깁니다. 

모든 요소는 문자형으로 변형된 이후에 재 정렬됩니다. 앞서 배웠듯이 문자열 비교는 사전편집 순으로 진행되기 때문에 2는 15보다 큰 값으로 취급됩니다("2" > "15").

기본 정렬 기준 대신 새로운 정렬 기준을 만들려면 arr.sort() 에 새로운 함수를 넘겨줘야 합니다.

 

인수로 넘겨주는 함수는 반드시 값 두 개를 비교해야 하고 반환 값도 있어야 합니다. 

 

function compare(a, b) {
  if (a > b) return 1; // 첫 번째 값이 두 번째 값보다 큰 경우
  if (a == b) return 0; // 두 값이 같은 경우
  if (a < b) return -1; //  첫 번째 값이 두 번째 값보다 작은 경우
}

function compareNumeric(a, b) {
  if (a > b) return 1;
  if (a == b) return 0;
  if (a < b) return -1;
}

let arr = [ 1, 2, 15 ];

arr.sort(compareNumeric);

console.log(arr);  // 1, 2, 15

arr 엔 숫자, 문자열 객체 등이 들어갈 수 있습니다. 알 수 없는 무언가로 구성된 집합이 되는 겁니다. 이제 비 동질적인 직합을 정렬해야 한다고 가정해보면, 무언가를 정렬하려면 기준이 필요합니다. 이때 정렬 기준을 정의해주는 함수(ordering function, 정렬함수)가 필요합니다. sort에 정렬 함수를 인수로 넘겨주지 않으면 이 메서드는 사전편집 순으로 요소를 정렬합니다. 

 

 

split 과 join

str.split(delim)은 구분자(delimiter) delim을 기준으로 문자열을 쪼개줍니다. 

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

console.log(arr); // Bilbo, Gandalf

split 메서드는 두 번째 인수로 숫자를 받을 수 있습니다. 이 숫자는 배열의 길이를 제한해주므로 길이를 넘어서는 요소를 무시할 수 있습니다. 실무에서 자주 사용하는 기능은 아닙니다. 

 

let str = "test";

console.log( str.split('') ); // t,e,s,t

 

arr.join(glue)은 split과 반대 역할을 하는 메서드입니다. 인수 glue를 접착제처럼 사용해 배열 요소를 모두 합친 후 하나의 문자열을 만들어 줍니다. 

 

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

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

console.log( str ); // Bilbo;Gandalf;Nazgul

 

 

reduce 와 reduceRight

reduce 와 reduceRight는 배열을 기반으로 값 하나를 도출할 때 사용됩니다. 

let value = arr.reduce(function(accumulator, item, index, array) {
  // ...
}, [initial]);

인수로 넘겨주는 함수는 배열의 모든 요소를 대상으로 차례차례 적용되는데, 적용 결과는 다음 함수 호출 시 사용됩니다. 

함수의 인수는 다음과 같습니다.

• accumulator - 이전 함수 호출의 결과. initial은 함수 최초 호출 시 사용되는 초기값을 나타냄(옵션)
• item - 현재 배열의 요소
• index - 요소의 위치
• array - 배열

이전 함수 호출 결과는 다음 함수를 호출할 때 첫 번째 인수(previousValue)로 사용됩니다. 

첫 번째 인수는 앞서 호출했던 함수들의 결과가 누적되어 저장되는 '누산기(accumulator)' 라고 생각하면 됩니다. 마지막 함수까지 호출되면 이 값은 reduce의 반환 값이 됩니다.

 

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((sum, current) => sum + current, 0);

console.log(result); // 15

 

reduce에 전달한 함수는 오직 인수 두 개만 받고 있습닏. 대개 이렇게 인수를 두 개만 받습니다.

이제 어떤 과정을 거쳐 위에 같은 결과가 나왔는지 살펴보겠습니다.

1.  함수 최초 호출 시, reduce의 마지막 인수인 0(초기값)이 sum에 할당됩니다. current엔 배열의 첫번째 요소인 1이 할당 됩니다. 따라서 함수의 결과는 1이 됩니다.
2. 두 번째 호출 시, sum = 1 이고 여기에 배열의  두 번째 요소(2)가 더해지므로 결과는 3이 됩니다.
3. 세 번째 호출 시, sum = 3이고 여기에 배열의 다음 요소가 더해집니다. 이런 과정이 계속 이어집니다. 

 

---

정리

배열 메서드를 엄청 많이 배웠다... 아니 오늘내로 다외울 수 있을까 싶을정도로 많이 배웠다.

배열 메서드를 많이 사용해 보기 위해 나는 프로그래머스 코딩테스트 중 Lv 0 단계를 풀고있다.

확실히 배열메서드를 많이 활용해서 기억하기도 좋고 배열 메서드에 대한 실력도 느는거 같다.

원래 TIL은 어제 적었어야 했는데, 오늘 다시 복습하면서 기억하려고 다음날 아침에 적고있다.

 

부족한점이 많지만 오늘도 한번 힘내보자.