JavaScript_배열 (array)

cho·2023년 7월 13일

✏️배열이란

값들의 순서가 더 중요한 경우 배열을 활용한다. 배열 안의 값들은 요소 element라고 부른다. 대괄호 안에 요소들에게 숫자값을 붙여주는데, 이를 index == propertyName 이다.

let courseRangking = [
	'자바스크립트 프로그래밍 기초',
    'Git으로 배우는 버전 관리',
    '컴퓨터개론',
    '파이썬 프로그래밍 기초'
];

배열의 요소를 가져오는 방법은 객체의 대괄호 표기법과 같다. index는 0부터 시작한다.

console.log(배열이름[index]);

순위가 아니더라도 순서가 있는 여러 값들에 대해서 배열을 활용할 수 있다. 단순하게 여러 값의 묶음에도 배열로 표현할 수 있다.

✏️배열 다루기

배열 또한 자바스크립트에서 미리 만들어둔 조금 특별한 객체의 한 종류이다. 배열도 다양한 property와 method들이 있어서 필요한 상황에 사용할 수 있다.

let members = ['쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼', 'End Miracle'];

console.log(type of members); // object
console.log(members.length); // 5
console.log(members['length']; // 5
console.log(members[members.length - 1]); // End Miracle

배열 추가 삭제

let members = ['쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼', 'End Miracle'];

members[5] = 'NiceCodeit'; // 존재하지 않는 요소에 접근해서 새로운 값을 할당하면 추가, 존재하는 요소에 접근해서 값을 할당하면 수정

delete members[4]; // 이렇게 할 경우 empty값이 남아 완벽하게 삭제된 것이 아니다. 

✏️배열의 method

  1. splice method
let members = ['쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼', 'End Miracle'];

members.splice(4); // 4번 index 'End Miracle' 삭제
members.splice(1); // 0번 index '쿤갈레' 외에 모두 삭제
// 값을 하나만 전달하게 되면 그 값 이후의 모든 요소를 삭제한다. 그래서 splice method의 두 번째 parameter 값을 넣으면 개수를 정할 수 있다. 
members.splice(1, 2); // 1번 index부터 2개 삭제 => ['쿤갈레', '흙토끼', 'End Miracle']
members.splice(1, 1, 'NiceCodeit', 'HiCodeit'); // 1번 index부터 1개 삭제 후 'NiceCodeit'과 'HiCodeit' 추가. ['쿤갈레', 'NiceCodeit', 'HiCodeit', '우리생각해써', '흙토끼', 'End Miracle']
// 삭제 개수를 0으로 지정하면 삭제를 하지 않고 추가만 할 수 있다. 
  1. shift method
    배열의 첫 요소 삭제를 하고 나머지를 앞으로 밀어준다.
let members = ['쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼', 'End Miracle'];

members.shift(); // ['Zerrard66', '우리생각해써', '흙토끼', 'End Miracle']
  1. pop method
    배열의 마지막 요소를 삭제한다.
members.pop(); //  ['쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼']
  1. unshift method
    배열의 첫 요소로 값 추가
members.unshift('NiceCodeit'); // ['NiceCodeit', '쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼', 'End Miracle']
  1. push method
    배열의 마지막 요소로 값 추가
members.push('HiCodeit'); // ['쿤갈레', 'Zerrard66', '우리생각해써', '흙토끼', 'End Miracle', 'HiCodeit']
  1. indexOf / LastIndexOf method
    배열에서 특정 값 찾기

array.indexOf(item) 을 하면 array 배열에 item이 포함되어 있는지 확인할 수 있다. 만약 포함되어 있다면, item이 있는 index가 리턴된다. 포함되어 있지 않다면 -1이 리턴된다. 여러 번 포함되어 있으면, 처음 발견된 index가 리턴된다.

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.indexOf('Kakao')); // 1
console.log(brands.indexOf('Daum')); // -1

비슷하게 lastIndexOf method는 indexOf 와 반대로 탐색을 뒤에서 부터 하게 된다.

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.lastIndexOf('Kakao')); // 3
console.log(brands.lastIndexOf('Daum')); // -1
  1. includes method
    배열에서 특정 값이 있는지 확인하기

array.includes(item) 을 하게되면 arra 배열에 item이 있을 경우 true, 없을 경우 false를 리턴한다.

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.includes('Kakao')); // true
console.log(brands.includes('Daum')); // false
  1. reverse method
    배열 순서 뒤집기
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands); // ["Google", "Kakao", "Naver", "Kakao"]
brands.reverse();
console.log(brands); // ["Kakao", "Naver", "Kakao", "Google"]

✏️for...of 반복문

구조

for (변수 of 배열) {
	동작부분;
}

for of문을 통해 배열에 요소가 할당된다.

for (let element of influencer) {
  console.log(element);
}```

배열에도 for...in문이 사용 가능하긴 하지만 특별한 환경에서는 배열의 method나 length property 같은 것들이 할당 될 수 있어 배열에는 사용하지 않는다. 배열의 index를 사용하고 싶다면 for 문을 사용하는 것이 안전하다. 

## ✏️다차원 배열 multidimensional array
배열의 요소에 배열이 들어간 형태를 '다차원 배열'이라고 한다. 

```javascript
let twoDimensional = [[1, 2], [3, 4]];

console.log(twoDimensional[0]); // [1, 2]
console.log(twoDimensional[0][1]); // 2

값들의 의미보다 값들의 위치나 순서에 의미가 있을 때 사용하기도 한다.

0개의 댓글