[JavaScript] 배열

배열 (Array)

---

1️⃣ 배열의 특성

2️⃣ length

3️⃣ 배열 순회

4️⃣ 배열 다루기

5️⃣ 배열 고차 함수로 조작

6️⃣ 배열 요소 정렬

 

 

4️⃣ 배열 다루기

---

const members = ['기훈', '상우', '일남', '준호', '새벽', '알리'];

 

- 배열 끝에 요소 추가 .push()

members.push('덕수');

//['기훈', '상우', '일남', '준호', '새벽', '알리', '덕수']

- 배열 앞에 요소 추가 .unshift()

members.unshift('미녀');

//['미녀', '기훈', '상우', '일남', '준호', '새벽', '알리', '덕수']

- 배열 요소 인덱스 찾기 .indexOf()

members.indexOf('상우')
// 2
members.indexOf('상훈')
// -1

member.lastIndexOf('상우');
// 2

- 배열 요소 여부 확인 .includes()

members.includes('상우')
// true
members.includes('상훈')
// false

- 배열 요소 지우기 <-> shift

members.shift('미녀');

//['기훈', '상우', '일남', '준호', '새벽', '알리', '덕수']

- 배열의 끝 요소 지우기 <-> push

members.pop('덕수')

//['미녀', '기훈', '상우', '일남', '준호', '새벽', '알리']

- 특정 인덱스 요소 지우기 / 추가하기 .splice()

members.splice(시작할 인덱스, 몇 개 지울 건지, 추가할내용)

⚠️ 단점은 원본배열을 훼손

 

- 요소 병합

: 배열이나 값들을 기존 배열에 합쳐서 새 배열을 반환

 

⭐️ concat()

const arr = ['JS', 'HTML', 'CSS'];

const newArr = arr.concat('TS');

newArr
// ['JS', 'HTML', 'CSS', 'TS']

arr
// ['JS', 'HTML', 'CSS']
// 원본 배열 훼손 안됨

 

const arr = ['JS', 'HTML', 'CSS'];

const newArr = ['TS', 'React'].concat(arr);

newArr
// ['TS', 'React', 'JS', 'HTML', 'CSS']

 

⭐️ 배열구조분해 [...]

const arr = ['JS', 'HTML', 'CSS'];

const newArr = [...arr, 'TS', 'React'];

newArr
// ['JS', 'HTML', 'CSS', 'TS', 'React']

원본배열 훼손 ❌

 

유사 배열 객체

배열과 유사한 방식을 가진 짝퉁 배열

✔️ 단, 배열의 함수를 사용할 수 없다.

Array.isArray
//false

만약, 유사배열의 길이(length)를 알고싶다면 다음과 같이 작성해주어야 한다.

const realArr = ['JS', 'HTML', 'CSS'];

const simArr = {
    0: 'JS',
    1: 'HTML',
    2: 'CSS',
    length: 3
};

 

5️⃣ 배열 고차 함수로 조작

---

- map

const langs = ['JS', 'HTML', 'CSS'];

const newArr = langs.map(function(lang) {
   return lang + '언어';
})

newArr 
// [ 'JS 언어', 'HTML 언어', 'CSS 언어' ]

- filter

const langs = ['JS', 'HTML', 'CSS', 123, 456];

const numbers = langs.filter(function(lang) {
   if(typeof lang === 'number'){
     return lang;
   }  
})

numbers
// [ 123, 456 ]

- reduce

function sumTotal() {
  let temp = 0;
  for (let i=0l i < arguments.length; i++){
  	temp = temp + arguments[i];
  }
  return temp
}

sumTotal(1,2,3,4,5,6,7)
// 28

function sumTotal(...numbers) {
  return numbers.reduce(function(total, current) {
     return total + current;
  }, 0(초기값))
}

sumTotal(1,2,3,4,5,6,7)
// 28

 

 

 

6️⃣ 배열 요소 정렬

---

sort

- 오름차순

const number = ['마', '가', '라', '나', '다'];

const orderNumbers = numbers.sort((a,b)=>a.localeCompare(b));

orderNumbers
// ['가', '나', '다', '라', '마']

- 내림차순

const number = ['마', '가', '라', '나', '다'];

const orderNumbers = numbers.sort((a,b)=> b.localeCompare(a));

orderNumbers
// ['마', '라', '다', '나', '가']