JavaScript | 배열

1. 배열(Array)

 

// 배열(Array)
// 각 값들은 요소(element)라고 부르며, 요소들은 index라는 순서를 가짐
let menu = [
    'americano',
    'latte',
    'frappuccino',
    'ade'
];

// index == propertyName

// 배열의 요소를 가져오는 방법
console.log(배열이름[index]);
// -> 이렇게 인덱스를 통해서 요소에 접근하는 것을 인덱싱(indexing)이라고 함
// * 주의점 * 인덱스는 1이 아닌 0부터 시작

console.log(mene[0]); // americano

 

 

 

2. 배열 다루기

 

// 배열 = 객체
// 배열은 단순히 여러 값들을 묶어주는 역할만 하는 것이 아니라, 
// 다양한 프로퍼티와 메소드로 필요한 상황에 유용하게 활용할 수 있음
let members = ['토끼', '사슴', '곰', '사자', '호랑이'];

//-------------------------------------------------
// legnth property 살펴보기
// legnth : 배열이 가지고 있는 요소의 총개수를 표시해줌
console.log(members.length); // 콘솔 출력 : 5

// 대괄호 표기법도 사용가능
console.log(members['length']); // 콘솔 출력 : 5

// 배열의 마지막 요소에 접근
console.log(members[members.length - 1]);
//-------------------------------------------------
// 배열에 요소를 추가
members[5] = '여우';
console.log(members[5]); // 콘솔 출력 : 여우

// 배열에 요소를 수정
members[5] = '강아지';
console.log(members[5]); // 콘솔 출력 : 강아지(여우에서 변경됨)

// 배열에 요소를 삭제 -> 메소드를 활용하기

// * 배열의 인덱스 순서를 뛰어넘으면서 추가하게 되면 undefined 값이 들어간 요소가 자동으로 생성

 

 

3-1. 배열 메소드 - splice

 

let members = ['토끼', '사슴', '곰', '사자', '호랑이'];

// splice(startIndex)
// 배열의 요소를 삭제할 때 가장 많이 사용되는 요소
members.splice(4);    // 호랑이 삭제
console.log(members); // 콘솔 출력 : 토끼, 사슴, 곰, 사자

// 위처럼 splice 메소드의 파라미터로 값을 하나만 전달하게 되면
// 전달된 인덱스로부터 그 이후에 모든 요소를 삭제
// -> splice 메소드의 두 번째 파라미터로 숫자 값을 하나 더 전달해주면, 삭제할 개수 조절 가능
// splice(startIndex, deleteCount)
members.splice(1, 2);  // 1번 인덱스로부터 2개 삭제

// splice(startIndex, deleteCount, item)
// 세번째 파라미터는 값을 전달하게 되면 삭제한 요소 자리에 그 값이 추가가 됨
members.splice(1, 1, '돌고래', '코뿔소');
console.log(members);  // 콘솔 출력 : 토끼, 돌고래, 코뿔소, 곰, 사자, 호랑이

// * splice 응용 *
// 1.splice 메소드에서 삭제할 개수를 0으로 만들어주면 배열 안에 어느 곳이든 요소를 추가할 수 있음
// 2.여러 요소를 수정할 수도 있음

 

 

splice 연습 ↓

https://summer-record.tistory.com/79

배열 | splice 연습

 

3-2. 배열 메소드 - 그 외

 

// splice(startIndex, deleteCount, item)

// 배열의 첫 요소를 삭제 : shift()
members.shift();

// 배열의 마지막 요소를 삭제 : pop()
members.pop();

// 배열의 첫 요소로 값 추가 : unshift(value)
members.unshift('펭귄');

// 배열의 마지막 요소로 값 추가 : push(value)
members.push('하마');

// 배열에서 특정 값 찾기 : indexOf
// array.indexOf(item)을 하면 array 배열에 item이 포함되어 있는지 확인할 수 있음
// 1.만약 포함되어 있다면, item이 있는 인덱스가 리턴
// 2.포함되어 있지 않다면, -1이 리턴
// 3.여러 번 포함되어 있으면, 처음 발견된 인덱스가 리턴
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.indexOf('Kakao')); // 1
console.log(brands.indexOf('Daum'));  // -1

// 배열에서 특정 값 찾기 : lastIndexOf
// indexOf와는 반대로 탐색을 뒤에서 부터 하게 됨
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.lastIndexOf('Kakao')); // 3
console.log(brands.lastIndexOf('Daum'));  // -1

// 배열에서 특정 값이 있는지 확인하기 : includes
// indexOf/lastIndexOf는 특정 값을 찾아서 해당 값의 index를 알려줌
//  그냥 그 값이 배열안에 있는지, 그 여부만 확인하고 싶을 때 사용
// array.includes(item)을 하게되면 array배열에 item이 있을 경우 true를, 없을 경우 false를 리턴
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands.includes('Kakao')); // true
console.log(brands.includes('Daum'));  // false

// 배열 뒤집기 : reverse
// 배열의 순서를 뒤집을 수 있음
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands); // (4) ["Google", "Kakao", "Naver", "Kakao"]
brands.reverse();
console.log(brands); // (4) ["Kakao", "Naver", "Kakao", "Google"]

 

 

더 많은 배열 메소드들은 ↓

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

 

4. for..of 반복문

 

// for...of 반복문
let members = ['토끼', '사슴', '곰', '사자', '호랑이'];

// for문
for(let i = 0; i < members.length; i++){
    console.log(members[i]);
}
// for...of
for(변수 of 배열){
    동작부분;
}
// for...of 적용
for(let element of members){
    console.log(element);
}

 

 

for...of문 사용 ↓

https://summer-record.tistory.com/81

배열 | for...of문 활용해서 투표 집계하기