230113 JS: 숙달을 위한 메모 - Array(배열) 편 I

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영).

 

---

배열(Array)은 생성자 방식으로 만드는 것이 기본이나, 불편하다는 단점이 있다.

그래서 조금 더 쉽게 작성하기위해 [ ]대괄호로 작성하는 리터럴방식으로 대체로 사용한다.

 

배열[ ] <=이렇게 표기하는 방법을 대괄호 표기법이라고한다.

여기서 내가 원하는 데이터의 아이템(or Element)을 꺼내보기위해 해당번호를 적는행위를 '인덱싱'이라고한다.

그리고 각 데이터에 정해진 번호들을 인덱스라고한다.

 

예시

const obsts = ['Apfel', 'Banane', 'Kirsche', 'Durian'];

console.log(obsts[2]); // result>> Kirsch
//			배열은 0부터 시작하기 때문에 2번 인덱스는 체리이다.

console.log(obsts.length); // result>> 4
//			과일배열의 길이를 알려주는 메소드 '.length' 말그대로 몇개인지 알려준다.

console.log(obsts[obsts.length-1]); // result>> Durian
// 같은 방법 console.log(obst.at(-1));
// .at() :메소드 뒤에서 첫번째 것 가령 가변하는 배열의 가장 마지막 데이터아이템을 꺼내고 싶을 때

 

---

위의 예시에 들어간 .length, .at 처럼 Array에 관련된 여러방법들의 예시를 적어보려한다. 

 

.find() : 주어진 판별함수를 만족하는 첫번째 아이템을 출력. 배열 내에서 조건에 맞는 특정 아이템을 찾으면 콜백함수 종료

.findIndex() : 특정 찾아진 아이템의 인덱스를 출력하고 콜백함수 종료

// ex1. 
const arr1 = [3, 10, 25, 46, 76, 58, 190, 222];

const found = arr1.find(e => e > 50); 
//arr1의 아이템의 갯수만큼 콜백함수 발동 === 총 8번 .find()메소드가 발생

console.log(found); //>> result: 76
// e가 50보다 큰 숫자중에 배열 순서상 가장 먼저 발견 할 수 있는 숫자는 76이기 때문에 76 출력



//ex.2
const obst = ['Apfel', 'Banane', 'Kirshe'];

const aaa = obst.find(obst =>{ return /^B/.test(obst)}); 
// /^B/: 정규표현식으로 대문자 B로시작하는 아이템을 출력
console.log(aaa); //>> Banane

const bbb = obst.findIndex(obst =>{ return /^B/.test(obst)}); 
// /^B/: 정규표현식으로 대문자 B로시작하는 아이템의 인덱스를 출력
console.log(bbb);//>> 1

---

.concat() : 두개의 배열데이터를 병합해서 새로운 배열데이터를 반환해주고, 원본데이터는 손상되지않음
배열의 api 활용시 주의해야하기 때문에 인지하고 있어야하는 메소드

const num = [1, 2, 3, 4];
const obst = ['Apfel', 'Banane', 'Kirshe'];

console.log(num); // >> (4) [1, 2, 3, 4]

console.log(obst); // >> (3) ['Apfel', 'Banane', 'Kirsh']

console.log(num.concat(obst));// >>  [1, 2, 3, 4, 'Apfel', 'Banane', 'Kirsh']

---

.forEach() : 메소드에 붙어있는 배열데이터 만큼 콜백함수(여기서 function() {})가 반복적으로 실행

const obst = ['Apfel', 'Banane', 'Kirshe'];

//매개변수(parameter) 이름은 자유롭게, array는 자주사용하진 않음
obst.forEach(function(element, index, array){ 
  console.log(element, index, array);
})
//>> obst의 배열아이템 개수에 맞게 3번 돌고 매개변수 순서대로, element, index, array 출력
//>> Apfel 0 (3) ['Apfel', 'Banane', 'Kirshe']
//>> Banane 1 (3) ['Apfel', 'Banane', 'Kirshe']
//>> Kirshe 2 (3) ['Apfel', 'Banane', 'Kirshe']

obst.forEach((element, index) => console.log(element, index)) //화살표 함수로 바꾸기