JavaScript 배열

jeongjwon·2023년 2월 27일
FE회고JavaScript
0

SEB FE

목록 보기
12/56

배열

대괄호를 이용하여 선언, 할당할 수 있다. 인덱스를 이용하여 조회할 수 있고 변경할 수도 있다. 온점 . dot 을 이용하여 속성변수가 가지고 있는 속성 property 에 접근할 수 있으며, () 소괄호를 이용하여 명령 method도 실행할 수 있다.

let arr = [1,2,3]; // 선언 및 할당
arr.length; // 접근
arr.pop(); // 명령

📌 요소

let arr = [1,2,3];

console.log(arr[0]); //1
console.log(arr[1]); //2
console.log(arr[2]); //3
console.log(arr[3]); //undefined

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

요소 element 들을 조회하고 싶을 때는 인덱스 0 부터 arr.length-1 까지 조회가능하다. for 반복문을 이용하여 조회할 수도 있다.

다만, arr.length를 벗어난 인덱스를 조회하면 undefined 이다.

📌 배열 판별 Array.isArray()

앞선 강의에서는 typeof를 이용하여 string, number, boolean 을 판별하였다. array 또한 typeof를 이용하면 array가 아닌 object 로 판별된다.
따라서, 배열로 판별하기 위해서는 Array.isArray(array) 메소드를 이용한다. 배열일 경우에는 true를, 아닐 경우에는 false를 반환한다.

typeof "문자열";//string
typeof 123;//number
typeof true;//boolean
typeof [1,2,3];//object

Array.isArray([1,2,3]); //true
Array.isArray("문자열"); //false

📌 추가 push unshift , 삭제 pop shift

배열에서는 값을 추가 및 삭제 가능하며, 위치에 따라서 사용해야 할 메소드가 달라진다.
1. 뒤에서 추가 : push
2. 뒤에서 삭제 : pop
3. 앞에서 추가 : unshift
4. 앞에서 삭제 : shift

let arr = [1,2,3];

arr.push(0); //4 (arr.length 로 반환)
console.log(arr); //[1,2,3,0] 뒤에서 0이 추가됨

arr.pop() ;//0 (삭제된 요소로 반환)
console.log(arr); // [1,2,3] 뒤에서 0이 삭제됨

arr.unshift(5); // 4 (arr.length 로 반환)
console.log(arr); // [5,1,2,3] 앞에서 5가 추가됨

arr.shift(); //5 (삭제된 요소로 반환)
console.log(arr); //  [1,2,3] 앞에서 5가 삭제됨

📌 특정 값 존재 및 포함 indexOf, includes

배열은 특정 값이 배열에 포함이 되어있는지 확인할 수 있다.

indexOf() 는 주어진 값과 일치하는 첫 번째 인덱스(여러 개가 있다면 그 중 첫 번째)를 반환한다. 만약 존재하지 않는다면 -1 을 반환한다.

let arr = [1,2,3,1];
arr.indexOf(2); // 1
arr.indexOf(1); // 0 
arr.indexOf(5); // -1

includes()는 주어진 값이 배열에 포함이 된다면 true 를, 포함되지 않는다면 false 를 반환한다.

let arr = ['code', 'states']
arr.includes('states'); //true
arr.includes('frontEnd'); //false

다만, includes() 메소드는 값의 존재 여부만 판단하고 Internet Explorer 에서는 호환이 되지 않기 때문에, 존재 여부와 인덱스값까지 판단할 수 있고 호환성이 좋은 indexOf() 메소드를 추천한다.

📌 그 밖의 메서드

  1. split(seperaotr, limit)
    String 메소드 이지만 결과값은 새로운 배열로 반환
    • seperaotr(Opt) : 빈 문자열('')일 경우, 원소를 하나씩으로 변환
    • limit(Opt) : 끊어진 문자열의 최대 개수 
	let string = 'abcd';
	string.split();//'abcd'
	string.split('');//['a','b','c','d']

	let str = "abc defgh ijklm"
	string.split('');//빈 문자열 - ['a', 'b', 'c', ' ', 'd', 'e', 'f', 'g', 'h', ' ', 'i', 'j', 'k', 'l', 'm'] 공백도 포함
	string.split(' ');//뛰어쓰기 - ['abc', 'defgh', 'ijklm']
  1. ... 전개구문 Spread Synstax
    배열이나 문자열과 같이 반복 가능한 문자를 합치는 것. split()과 비슷. apply()로 대체가능함.
	let string = "grass"
	console.log([...string]); // ['g', 'r', 'a', 's', 's'] 각각의 문자를 분리하여 배열로 만들어줌
  1. sort()
    문자열의 유니코드 포인트를 기준으로 정렬(대소문자 구분없이)
	sort([1,30,4,21,10000]); // [1, 10000, 21, 30, 4] 유니코드 기준

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

	numbers.sort(function(a,b){ //compareFunction 을 이용하여 오름차순으로 정렬된 정렬 반환
 		if(a > b) return 1;
  		if(a === b) return 0;
  		if(a < b ) return -1;
  	});

	numbers.sort(function(a,b) {// 단순화
  		return a-b;
	});

	console.log(numbers);//[1,2,3,4,5]
  1. slice([,begin[,end]])
    배열의 begin부터 end까지(end미포함, end-1까지)에 대한 얕은 복사본을 새로운 배열 객체로 반환. 원본 배열은 불변
    - begin(opt) : 시작점 인덱스, 음수 인덱스인 경우 배열의 끝에서부터의 길이, undefined 인 경우 0번 인덱스부터, 배열의 길이보다 큰 경우에는 빈 배열 반환
    - end(opt) : 종료 인덱스, end 인덱스제외하고 추출, 음수 인덱스인 경우 배열의 끝에서부터의 길이, 생략하거나 배열의 길이보다 큰 경우 배열의 끝까지 추출
	const animals = ['ant', 'bison', 'camel', 'duck', 'elephant'];
	animals.slice(2); //['camel', 'duck', 'elephant'] 인덱스 2부터 배열의 끝까지
	animals.slice(2,4); //['camel', 'duck'] 인덱스 2부터 3까지 
	animals.slice(1,5); //['bison','camel', 'duck', 'elephant'] 인덱스 1부터 배열의 길이보다 큰 5이면 배열의 끝까지
	animals.slice(-2); //['duck', 'elephant'] 음수 인덱스인 경우 배열의 끝에서부터 두번째까지 (길이가 2)
	animals.slice(2,-1); //['camel', 'duck'] 인덱스 2부터 음수 인덱스인 경우 배열의 끝에서 길이 다음부터 (즉, 마지막 하나 빼고 그 앞 인덱스 까지) **
	animals.slice();//['ant', 'bison', 'camel', 'duck', 'elephant'];
  1. splice(start[, deleteCount[, item1[, item2[, ...]]]])
    배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경
    • start : 배열 변경 시작 인덱스, 배열의 길이보다 큰 값인 경우 배열의 길이로 설정, 음수인 경우 배열의 끝에서부터 -n번째, 값의 절대값이 배열의 길이보다 큰 경우 0으로 설정
    • deleteCount(opt) : 배열에서 제거할 요소의 수, 생략하거나 array.length - start 보다 크면 start 부터 모든 요소를 제거, 0이하라면 어떤 요소도 제거x. 이때는 item 에 최소한 하나이상 지정
    • item1, item2 , ... : 배열에 추가할 요소, 아무 요소를 지정하지 않으면 제거만
	let months = ['Jan', 'March', 'April', 'June'];
	months.splice(1, 0, 'Feb');
	// ['Jan','Feb', 'March', 'April', 'June']인덱스 1에 삭제하지 않고 새로운 요소 'Feb' 추가 
	months.splice(4, 1, 'May'); 
	// 인덱스 4에서 1개 요소 'June' 를 지우고 새로운 요소 'May' 추가 ['Jan', 'Feb', 'March', 'April', 'May']
  1. join([seperator])
    배열의 모든 요소를 연결해 하나의 문자열로 만듦
    • seperator(opt) : 배열의 각 요소를 구분할 문자열, 생략하면 쉼표로 구분. 빈문자열이면 아무문자도 없이 연결
const arr = ['바람', '비', '불']
arr.join(); //'바람,비,연결' 생략시 쉼표로 구분
arr.join(', ');  //'바람, 비, 연결' ', ' 로 구분
arr.join(''); //바람비연결 빈문자열일 경우 아무문자 없이 연결
  1. concat(value1[, value2[, ...[,valueN]]]])
    배열 혹은 값들을 기존배열에 합쳐서 새 배열을 반환. 기존 배열을 변경하지 않고 추가된 새로운 배열을 반환
	const arr1 = ['a','b','c'];
	const arr2 = ['d','e','f'];
	const arr3 = arr1.concat(arr2);
	console.log(arr3); //['a','b','c','d','e','f] 새로운 배열
	console.log(arr1); //['a','b','c']; 기존 배열은 불변
	console.log(arr2); //['d','e','f'];      "
  1. fill(value[,start[,end)
    배열의 시작 인덱스부터 끝 인덱스의 이전까지 값 하나로 채우는 것. 단, 배열을 먼저 선언하고 크기를 지정해주어야 함.
    • value : 배열을 채울 값
    • start : 시작 인덱스, 기본값 0
    • end : 끝 인덱스, 기본값 this.length
const arr = [1,2,3,4];

arr.fill(0,2,4); //[1,2,0,0] 0을 인덱스 2부터 4이전까지(2,3) 채움
arr.fill(5,1); //[1,5,5,5] 5를 인덱스 1부터 길이끝까지 채움
arr.fill(6); //[6,6,6,6] 6을 길이끝까지 채움

const arr = []
arr.fill(5); //[] 크기 지정x
arr = new Array(3).fill(5);//[5,5,5] new Array(n) n만큼 크기를 지정한 배열에 5를 채움
  1. filter(callback(element[,index[, arry]])[, thisArg])
    주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환, 배열을 변화시키지 않음 (mutate) , map() 과 유사하나 filter() 는 if문과 유사하며 콜백의 리턴값이 true인 요소만 가지고 새로운 배열을 만듦
    • callback : 각 요소를 시험할 함수. true 반환시 요소를 유지, flase 반환시 요소를 버림
      - element : 처리할 현재 요소
      - index(opt) : 처리할 현재 요소의 인덱스
      - array(opt) : filter를 호출할 배열
    • thisArg(opt) : callback을 실행할 때 this로 사용하는 값
	let numbers = [12,5,8,130,44];
	let filtered = numbers.filter((ele) => value >= 10);
	//배열의 값이 10이하인 값만 filtered에 할당
	console.log(fitered);//[12,130,44]
	console.log(numbers);//[12,5,8,130,44] 기존의 배열은 바뀌지 않음
	let numbers = [1,2,3,4,5];
	let filtered = numbers.filter( (el, ind) => ind % 2 == 0);	
	// 인덱스가 짝수인 경우만 fitered에 할당 
	// 암묵적으로 <(el) 요소 / (el, ind) 요소, 인덱스>를 가리킴
	console.log(filtered); //[1,3,5]
  1. map(callback(currentValue[,index[, arry]])[, thisArg])
    배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환, filter() 와 굉장히 유사하나 콜백의 산술 연산값을 가지고 새로운 배열 요소를 생성하는 콜백
	let numbers = [1,2,3,4,5];
	let mapping = numbers.map( el => el * 2);
	//배열의 각 요소들의 2배인 값으로 구성된 배열
	console.log(numbers); //[1,2,3,4,5] 기존의 배열은 바뀌지 않음
	console.log(mapping); //[2,4,6,8,10]
  1. reduce(callback[,, initialValue)
    배열의 각 요소에 대해 주어진 리듀서 reducer 함수를 실행하고, 하나의 결과값을 반환
  • callback : 배열의 각 요소에 대해 실행할 함수
    • accumulator : 누산기, 콜백의 반환값을 누적, 콜백의 이전 반환값 또는 콜백의 첫번째 호출이면서 initialValue를 제공한 경우에는 InitialValue, 제공하지 않을 경우에는 배열의 첫번째 값
    • currentValue : 처리할 현재 요소 , initialValue를 제공한 경우에는 배열의 첫번째 값, 제공하지 않을 경우에는 두번째 값
    • currentIndex(opt) : 처리할 현재 요소의 인덱스, initialValue를 제공한 경우 0 아니면 1부터 시작
    • array(opt) :reduce()를 호출할 배열
  • initialValue(opt) : 콜백의 최초 호출에서 첫번째 인수에 제공하는 값. 제공하지 않을 시 배열의 첫번째 요소 사용. 빈배열에서 초기값없이 reduce() 호출하면 오류발생

initialValue 제공하지 않을 경우

[0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array) { 
  return accumulator + currentValue;
});
//function 완전한 함수 대신에 화살표 함수로 제공 가능
//[0,1,2,3,4].reduce((prev, curr) => prev+curr);
callbackaccumulatorcuurentValuecuurentIndexarray반환값
1번째 호출011[0,1,2,3,4]1
2번째 호출122[0,1,2,3,4]3
3번째 호출333[0,1,2,3,4]6
4번째 호출644[0,1,2,3,4]10

4번의 콜백 => initialValue 를 지정하지 않아서 currentValue는 두번째 값부터, currentIndex를 1부터 시작

initialValue 제공하는 경우

[0,1,2,3,4].reduce(function(accumulator, currentValue, currentIndex, array) { 
  return accumulator + currentValue;
}, 10);
//function 완전한 함수 대신에 화살표 함수로 제공 가능
//[0,1,2,3,4].reduce((prev, curr) => prev+curr,10);
callbackaccumulatorcuurentValuecuurentIndexarray반환값
1번째 호출1000[0,1,2,3,4]10
2번째 호출1011[0,1,2,3,4]11
3번째 호출1122[0,1,2,3,4]13
4번째 호출1333[0,1,2,3,4]16
5번째 호출1644[0,1,2,3,4]20

5번의 콜백 => initialValue를 지정해서 currentValue와 curretIndex를 초기값부터 시작

배열의 합

let arr = [1,2,3,4,5];
let result = arr.reduce( ( acc, cur ) => {return acc += cur; }, 0}; 
console.log(result); //15

initialValue 를 0으로 설정하여 배열의 초기값부터 살펴 누적값을 이용하여 결과값 반환

배열의 중복 값 제거

let arr = [1, 2, 1, 2, 3, 5, 4, 5, 3, 4, 4, 4, 4];
let result = arr.sort().reduce( (acc, cur) => {
  const length = acc.length
  if(length === 0 || acc[length-1] !== cur){
    acc.push(cur);
  }
  return acc;
},[]);
console.log(result); // [1,2,3,4,5]

arr를 정렬을 시킨 후,
initialValue를 빈 배열로 설정시킨 후 callback을 실시한다.
콜백에는 초기값일 경우(length === 0)와 누적기의 최근값이 cur가 아닐 때 (즉, 이미 누적기에 넣은 값이 아닐 경우에) 누적기에 추가하여 배열의 마지막 인덱스까지 순회하고 난 후의 결과값을 반환한다.

  1. reverse()
    배열을 거꾸로 순회한 값을 반환하며, 원본 배열을 변형함.
	const a = [1,2,3];
	console.log(a); // [1,2,3]
	a.reverse();
	console.log(a); // [3,2,1]



📌 코플릿회고

filter메서드 이용

7. 
function getAllLetters(str) {
  //문자열을 입력받아 문자열을 구성하는 각 문자를 요소로 갖는 배열을 리턴
  let arr = [];
  // for(let i = 0 ; i < str.length ; i++){
  //   arr.push(str[i]);
  // }
  [...str].map(ele => arr.push(ele));
  //str을 각각 배열로 만들어 각 요소들을 빈 배열 arr 에 추가시켜줌
  return arr;
}
9.
function getLongestWord(str) {
  // 문자열을 입력받아 문자열에서 가장 긴 단어를 리턴
  //가장 긴 단어가 2개 이상이면 첫번째로 등장하는 단어를 리턴
  let arr = str.split(' ');
  //sort 메서드 이용
  arr.sort(function(a,b){
    return b.length - a.length;
  });//arr.sort( (a,b) => b.length - a.length );
  return arr[0];
  // map과 filter 이용
  let len = arr.map(e => e.length); 
  //arr 배열 요소들을 길이요소들로 변화시켜 map 메서드를 이용하여 새로운 배열을 만듦
  let max = Math.max(...len);
  //len 배열 요소들을 가지고 가장 큰 값을 갖는 길이를 찾음
  return arr.fiter(ele => ele.length === max)[0];
  //공백을 기준으로 구분한 arr 배열에서 요소의 길이가 max와 같은 요소들의 집합에서 첫번째 값 리턴(같은 max 값을 가질 때 앞 순서가 우선순위이기 때문)
}
10.
function getEvenNumbers(arr) {
  //수를 요소로 갖는 배열을 입력받아 짝수만을 요소로 갖는 배열을 리턴
  return arr.filter( ele => ele % 2 === 0);
}
15.
function getElementsUpTo(arr, n) {
  if(n >= arr.length) return [];
  // return arr.slice(0,n);
  return arr.filter((e, i) => i < n);
  //filter 메서드 ( 요소, 인덱스 ) 이용
}
//배열과 인덱스를 입력받아 주어진 인덱스 이전의 요소들을 갖는 새로운 배열을 리턴
profile
jeongjwon
이전 포스트

JavaScript 객체

다음 포스트

Javascript 핵심개념 - 원시 참조 자료형, 스코프, 클로저

0개의 댓글