코어 자바스크립트 (배열과 메서드) #

Vorhandenheit ·2021년 6월 16일
JS.코어
0

JS.코어

목록 보기
3/29
post-custom-banner

배열과 메서드

이미 push, pop, shift, unshift를 배움

1.요소 추가, 제거 메서드

1)splice

배열에서 요소를 하나만 지우고 싶다면 연산자 delete 사용해 볼 수 있을 것

let arr = ['I', 'go', 'home'];
delete arr[1]; // 'go'를 삭제함
alert(arr[1]); // undefined
 // => delete를 써서 요소를 지우고 난 후 배열 arr = ['I', , 'home'];
alert(arr.length); // 3

요소는 지웠지만 배열의 요소는 여전히 3개임을 확인할 수 있다.
배열의 길이가 짧아지기를 기대한다면 delete가 아니라 splice를 사용해야함

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

index : 조작을 가할 첫 번째 요소를 가리킴
deleteCount : 제거하고자하는 요소의 갯수를 나타냄
elem1, ..., elemN : 배열에 추가할 요소를 나타냄

  • 요소 삭제
let arr = ["I", "study", "JavaScript"];
arr.splice(1, 1); // 첫 번째 요소부터 1개를 제거
alert(arr);
  • 요소 삭제 후, 다른 요소 두 개로 교체하기
let arr = ["I", "study", "JavaScript", "right", "now"];
arr.splice(0, 3, "Let's", "dance"); // 처음 세 개의 요소를 지우고, 이 자리를 다른 요소로 대체
alert(arr) // now ["Let's", "dance", "right", "now"]
  • splice는 삭제된 요소 구성된 배열을 반환
let arr = ["I", "study", "JavaScript", "right", "now"];
let removed = arr.splice(0, 2);
alert(removed); // "I", "study"
  • splice메서더의 deleteCount를 0으로 설정하면 요소를 제거하지 않으면서 새로운 요소를 추가할 수 있음
let arr = ["I", "study", 'javaScript"];
arr.splice(2, 0, "complex", "language");
//인덱스 2부터 , 0개의 요소를 삭제, 그 후 , "complex", "language"를 추가

2)slice

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

-"start" 인덱스부터 "end"인덱스까지의 요소를 복사한 새로운 배열을 반환
둘다 음수라면 , 배열 끝에서부터의 요소 개수를 의미
-이 방식은 기존의 배열을 건드리지 않으면서 배열을 조작해 새로운 배열을 만들고자 할 때 자주 사용

3)concat

기존 배열의 요소를 사용해 새로운 배열을 만들거나 기존 배열에 요소를 추가하고자 할 때 사용할 수 있음

arr.concat(arg1, arg2...)

메서드를 호출하면 arr에 속한 모든 요소와 arg1, arg2등에 속한 모든 요소를 한데 모은 새로운 배열이 반환
인수 argN이 배열일 경우 모든 요소가 복사, 그렇지않은 경우 인수가 그대로 복사

let arr = [1, 2];
alert(arr.concat([3, 4]) ; // 1,2,3,4 arr와 [3, 4] 요소 모두를 한데 모은 새로운 배열이 만들어짐
let arr = [1, 2];
let arrayLike = {
	0: "something",
  	length : 1
};
alert(arr.concat(arrayLike)); // 1, 2, [object Object]

concat 메서드는 제공받은 배열의 요소를 복사해 활용, 객체가 인자로 넘어오면 객체는 분해되지않고 통으로 복사되어 더해짐
인자로 받은 유사 배열 객체에 특수한 프로퍼티가 있으면 concat은 이 객체를 배열처럼 취급
객체 전체가 아닌 객체 프로퍼티의 값이 더해짐

2.forEach로 반복작업 하기

  • arr.forEach는 주어진 함수를 배열 요소 각각에 대해 실행할 수 있게 해줌
arr.forEach(function(item, index, array) {})

3.배열 탐색하기

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

1)indexOf, lastIndexOf, includes

  • arr.indexOf(item, from)
    인덱스 from부터 시작해 item(요소)를 찾음, 요소를 찾으면 해당 요소의 인덱스 반환,
    발견하지 못했으면 -1을 반환

  • arr.lastIndexOf(item, from)
    위 메서드와 동일한 기능이지만, 검색을 끝에서부터 함

  • arr.includes(item, from)
    인덱스 from부터 시작해 itme이 있는지를 검색, 해당하는 요소를 발견하면 true를 반환

2) find와 findIndex

객체로 이루어진 배열 있다고 가정, 특정 조건에 부합하는 객체를 배열 내에서 찾는 방법
arr.find(fn)

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

요소 전체르 대상으로 함수가 순차적으로 호출

  • item : 함수를 호출할 요소
  • index : 요소의 인덱스
  • array : 배열 자기 자신
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {id: 3, name: "Mary"}
];

let user = users.find(item => item.id == 1);
alert(user.nmae)

3.filter

find 메서드는 함수의 반환 값을 true로 만드는 단 하나의 요소를 찾음
조건을 충족하는 요소가 여러 개라면 arr.filter(fn)을 사용하면 됨

let results = arr.filter(function(item, index, array) {
  // 조건을 충족하는 요소는 results에 순차적으로 더해짐
  // 조건을 충족하는 요소가 하나도 없으면 빈 배열이 반환
});
let users = [
  {id: 1, name: "John"},
  {id: 2, name: "Pete"},
  {idL 3, name: "Mary"}
 ];

let someUsers = users.filter(item => item.id < 3);
alert(someUsers.length) ; //2

4.배열을 변형하는 메서드

1)map

배열 요소 전체를 대상으로 함수를 호출, 함수 호출 결과를 배열로 반환

let result = arr.map(function(item, index, array) {
	// 요소 대신 새로운 값을 반환
});
let lengths = ["bilbo", "gandalf", "nazgul"].map(item => item.length);
alert(length); // 5, 7, 6

2)sort(fn)

배열의 요소를 정렬해줌, 배열 자체가 변경

let arr = [1, 2, 15];
arr.sort();
alert(arr); // 1, 15, 2

요소는 문자열로 취급되어 재정렬되기 때문
기본 정렬 대신 새로운 정렬 기준을 만들려면 arr.sort()에 새로운 함수를 넘겨줘야함

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

let arr = [1, 2, 15];
arr.sort(compareNumberic);
alert(arr); // 1, 2, 15

<정렬 함수는 어떤 숫자든 반환할 수 있음>

let arr = [1, 2, 15];
arr.sort(function(a, b) {return a - b});
alert(arr); // 1, 2, 15
arr.sort((a, b) => a - b);

3)reverse

arr의 요소를 역순으로 정렬시켜주는 메서드

let arr = [1, 2, 3, 4, 5];
arr.reverse();
alert(arr); //5, 4, 3, 2, 1

반환 값은 재 정렬된 배열

4)split과 join

입력받은 문자열을 배열로 바꾸기
str.split(delim)을 이용, 구분자 delim을 기준으로 문자열을 쪼개줌

let names = 'bilbo, gandalf, nazul';
let arr = names.split(',');
for (let name of arr) {
	alert( `${name}에게 보내는 메시지`); //
}

split 메서드 두번째 인수로 숫자를 받을 수 있음, 숫자는 배열의 길이를 제한해주므로 길이를 넘어서는 요소 무시할 수 있음

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

join은 split과 반대 역할을 하는 메서드, 붙임!

let arr = ['bilbo', 'gandalf', 'Nazgul'];
let str = arr.join(';') // 배열 요소를 ;를 사용해 하나의 문자열로 합침
alert(str); // Bilbo;Gandalf;Nazgul

5)reduce와 reduceRight

배열을 기반으로 값 하나를 도출할 때 사용

let value = arr.reduce(function(accumulator, item, index, array) {
	//...
},[initial]);
  • accumulator : 이전 함수 호출의 결과.initial은 함수 최초 호출시 사용되는 초깃값을 나타냄
  • item : 현재 배열 요소
  • index : 요소의 위치
  • array : 배열

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

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce ((sum, current) => sum + current, 0);
aler(result) //15

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

  • 초깃값이 없어도 결과는 동일, 첫번째 요소를 초깃값으로 사용하기 때문
    배열이 비어있는 상태면 reduce 호출 시 에러가 발생!

Array.isArray로 배열 여부 알아내기

배열은 앞에서 말했듯이 객체형에 속함
typeof로는 일반 객체와 배열을 구분할 수가 없음
그래서 Array.isArray(value)는 이럴 때 사용할 수 있는 유용한 메서드

alert(Array.isArray({})); //false
alert (Array.isArray([])); // true

배열 메서드와 'thisArg'

arr.find(func, thisArg);
arr.filter(func, thisArg);
arr.map(func, thisArg);

thisArg는 func의 this가 됨.
아래예시 객체 army의 메서드 filter의 인자로 넘겨주고 있는데, 이때 this Arg는 canJoin의 컨텍스트 정보로 넘겨줌

과제

1)border-left-with를 borderLeftWidth로 변경하기 #

function solution(string) {
	let answer = string.split('-').join('')
 return answer
}

<해답>

function camelize(str) {
	return str.split('-').map((word, index) => index == 0 ? word: word[0].to UpperCase() + word.slice(1)).join)('')

}

2)특정 범위에 속하는 요소 찾기 #

function filterRange(arr, a, b) {
	let answer = arr.filter((a, b) => a > arr && arr < b);
  return answer
}

3)특정 범위에 속하는 요소찾기(배열 변경하기)

function filterRangeInPlace(arr, a, b) {
	return arr.filter(item => a <= item && item <= b)
}

4)내림차순으로 정렬하기 #

let arr = [5, 2, 1, -10, 8];
arr.sort().((a,b) => b - a)

5)배열 복사본을 정렬하기

let arr = ["HTML", "JavaScript", "CSS"];

function copySoretd(arr) {
 	return arr.slice().sort(); 
}
let sorted = copySorted(arr);
alert( sorted ); // CSS, HTML, JavaScript
alert( arr ); // HTML, JavaScript, CSS (no changes)

6)확장 가능한 계산기

7)이름 매핑하기

8)객체 매핑하기

9)나이를 기준으로 객체 정렬하기

10)배열 요소 무작위로 섞기

11)평균 나이 구하기

function getAverageAge(users) {
	let result = users.function((sum, user) = > sum + user)
	return result / user.length
}

12) 중복 없는 요소 찾아내기

profile
Vorhandenheit
읽고 기록하고 고민하고 사용하고 개발하자!
이전 포스트

코어 자바스크립트 (배열)

다음 포스트

코어 자바스크립트 (참조에 의한 객체 복사)

post-custom-banner

0개의 댓글