Do it 자바스크립트 4-2. 배열 객체와 자주쓰는 메서드. 배열함수

배열객체 

여러개의 데이터를 하나의 저장소에 저장하려면 배열 객체(Array Object)를 생성하면 됩니다. 배열(配列)은 '나눌 배'와 '열거할 열'을 사용해서 만든 글자로, 글자 뜻 그대로 하나의 저장소를 나눠서 데이터를 열거하라는 의미입니다. 

 

기본형
let 참조변수 = [ 값1, 값2, 값3, 값4, ... 값n];
참조변수[인덱스번호] = 값(n-1)

 

예를들면

let doctors = ["익준", "정원", "석현", "송화", "준완"];

 

여기서 주의해야할 점은 배열의 순서라고 할 수 있는 인덱스 번호는 0부터 시작한다는 점이다.

따라서 doctors[0] 은 doctors배열의 첫번째 값을 의미하며 그 값은 "익준"이다.

 

 

요즘 뒤늦게 슬기로운 의사생활을 정주행중인데 너무 재미나다ㅋㅋㅋ

옴니버스식이라 한편씩만 봐도 뒷편이 궁금해 미칠거같지도 않고 밥먹으면서 한편씩 보면 딱이다ㅋㅋㅋㅋ

 

---

 

 

별거 아닌 것 같지만 이 배열객체가 중요한이유는 자바스크립트에 기본적으로 설정되어있는 배열함수들이 아주 유용하기때문이다

 

 

①  join(연결문자)  <-> split()

배열 객체의 데이터를 연결문자(seperator)를 기준으로 1개의 문자형 데이터로 반환한다 

doctors.join('/')의 결과는 "익준/정원/석현/송화/준완"

 

<-> join과 반대의 개념으로 split이 있는데 애초에 doctors가 배열이 아닌 String값 "익준, 정원, 석현, 송화, 준완"이었다면 doctors.split(',')의 결과는 ["익준", "정원", "석현", "송화", "준완"] 나온다.

 

 

② reverse()

배열 객체의 데이터 순서를 거꾸로 바꾼 후 반환한다

doctors.reverse()의 결과는 ["준완", "송화", "석현", "정원", "익준"]

 

 

③ sort()

데이터를 오름차순으로 정렬한다. 문자일 경우 알파벳 순서로 정렬한다. 

 

 

④slice(index1, index2)

배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 새로운 배열 객체를 만든다

let favDoctors = doctors.slice(1, 3);

favDoctors는 doctors[1]값부터 doctors[2]까의 값으로 구성된 ["정원", "석현"]가 된다

(요기서 조금 헷갈리는게 왜 doctors[3]까지가 아니고 doctors[2]까지인가 싶은데 마지막은 미포함exclusive라고 한다)

 

 

⑤ splice()

배열객체의 지정데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다

let doctors = ["익준", "정원", "석현", "송화", "준완"];

doctors.splice(2, 1, "겨울"); 

doctors배열의 인덱스2번 다음으로 1개의 데이터를 삭제하고 그 자리에 "겨울"을 넣는다

따라서 값은 ["익준", "정원", "겨울", "송화", "준완"] 이렇게 된다. 

 

 

⑥ concat()

2개의 배열 객체를 하나로 결합한다

let resident = ["겨울", "민하", "치홍"];

doctors.concat(redident)의 결과는 ["익준", "정원", "석현", "송화", "준완", "겨울", "민하", "치홍"];

컨캣의 경우 원본배열을 보존하면서 새로운 배열객체를 만들기때문에 실제로 유용하게 쓰인다고 한다

 

 

⑦ pop()

배열의 저장된 데이터 중 마지막 인덱스에 저장된 데이터를 삭제한다

doctors.pop()의 결과는 ["익준", "정원", "석현", "송화"];

 

 

⑧ push(new data)

배열 객체의 마지막 인덱스에 새 데이터를 삽입한다.

doctors.push("겨울")의 결과는 ["익준", "정원", "석현", "송화", "준완", "겨울"]

 

 

⑨ shift()

let doctors = ["익준", "정원", "석현", "송화", "준완"];

배열객체에 저장된 데이터중 첫번째 인덱스에 저장된 데이터를 삭제한다

doctors.shift()의 결과는 [ "정원", "석현", "송화", "준완"]

아이고 익준이 못잃어....ㅠㅠㅋㅋㅋㅋㅋㅋㅋ

 

 

⑩ unshift(new data)

배열객체의 가장 앞의 인덱스에 새 데이터를 삽입한다

doctors.unshift("겨울")의 결과는 ["겨울","익준", "정원", "석현", "송화", "준완"]

 

 

⑫ length()

배열에 저장된 총 데이터이 개수를 반환한다

doctors.length()의 결과는 5

 

728x90

---

 

 

⑬ map(함수)

callback함수를 인자로 받아 주어진 배열에서 원하는 값만 골라 새로운 배열을 반환한다

 

 

⑭ filter(함수)

callback함수를 인자로 받아 주어진 배열에서 true값만 골라 새로운 배열만든다

 

 

⑮ some(함수)  <->  every(함수)

주어진 배열에 함수의 조건을 만족하는 값이 하나라도 있으면 true를 반환하는 some(함수), 모든 값이 만족해야 true를 반환하는 every(함수)

 

// 키 : 값으로 이루어진 doctors라는 배열객체 생성
let doctors = [
	{name : '익준', age: 41, major:'간담췌외과', isMale: true},
	{name : '정원', age: 41, major:'소아외과', isMale: true},
	{name : '석현', age: 41, major:'산부인과', isMale: true},
	{name : '송화', age: 41, major:'신경외과', isMale: false},
	{name : '준완', age: 41, major:'흉부외과', isMale: true},
	{name : '겨울', age: 30, major:'레지던트', isMale: false},
  ]
        
//map()
let map = doctors.map((doctors) => doctors.major);
console.log(map);
//전공값만 뽑아라 {'간담췌외과', '소아외과', '산부인과', '신경외과', '흉부외과', '레지던트'}



//filter()
let filter = doctors.filter((doctors)=>doctors.isMale);
console.log(filter);
//남자만 뽑아라 (isMale값이 true인 값만 뽑아라)
/*
 [
   {name : '익준', age: 41, major:'간담췌외과', isMale: true},
   {name : '정원', age: 41, major:'소아외과', isMale: true},
   {name : '석현', age: 41, major:'산부인과', isMale: true},
   {name : '준완', age: 41, major:'흉부외과', isMale: true},
 ]
*/


//some()
let some = doctors.some((doctors)=>doctors.age<40);
console.log(some);
// 배열값중에 나이가 40미만인 값이 있는가? true

//every()
let every1 = doctors.every((doctors)=>doctors.age<40);
console.log('every1 : ' + every1);
// 모든 배열값의 나이가 40 미만인가? false

let every2 = doctors.every((doctors)=>doctors.age<50);
console.log('every2 : ' + every2);
// 모든 배열값의 나이가 50 미만인가? true

 

 

실제로 실무에서는 배열의 맨앞에 데이터를 삭제하거나 추가하는 함수(shift, unshift)보다는 배열의 맨 뒤에 적용하는 pop, push를 더 많이 쓰고,  원본의 손상없이 새로운 배열객체를 만드는 concat을 많이 활용한다고 한다.

 

 

---

공부하며 정리하는 초보 개발자입니다.

포스팅 내용에 잘못된 점이나 더 좋은 방법이 있다면 댓글로 알려주시면 감사하겠습니다 :)