JavaScript (5)

깨진알·2023년 12월 5일

JavaScript

목록 보기
5/21

JavaScript 배열

1. 배열 (Array)

let course = [
	'javascript',
	'python',
	'java',
	'C'
];

// index == PropertyName
// 배열 객체 가져오기(indexing -> 0부터 시작)
console.log(course[0]); // javascript

2. 배열 다루기

// 배열 다루기
let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];

// 갯수
console.log(dataType.length); // 6, 배열 안에 요소의 개수를 확인할 때 사용된다
console.log(dataType['length']); // 6, 대괄호 표기법으로도 사용 가능
console.log(dataType[dataType.length - 1]); // 배열의 마지막 요소에 접근

// 추가, 수정
// [6]을 채우지 않고 [7]에 추가하면 [6] 요소에 undefined 값이 추가되어 있는다.
dataType[6] = 'list';
console.log(dataType[6]); // list

dataType[6] = 'lists';
console.log(dataType[6]); // lists

3. 배열 메소드 I

// 삭제(splice)
let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];

// splice(startIndex, deleteCount, item)
// 삭제 + 추가
dataType.splice(1, 2, 'Nice', 'Hi'); // 1번 인덱스부터 2개 삭제하고 삭제한 요소 자리에 'Nice', 'Hi' 추가

// 추가
dataType.splice(1, 0, 'Nice', 'Hi'); // 1번 인덱스 다음에 아무것도 삭제하지 말고 요소 추가

// 수정
dataType.splice(2, 1, "Good"); // 2번 인덱스 다음에 하나를 삭제하고 수정

4. 배열 메소드 II

let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];

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

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

// 배열의 첫 요소로 값 추가 : unshift(value)
datatType.unshift('Nice');

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

5. 배열 메소드 Tip

(1) 배열에서 특정 값 찾기 (indexOf / lastIndexOf)

배열에서 특정 값을 찾으려면 indexOf 메소드를 사용하면 된다. array.indexOf(item)을 하면 array 배열에 item이 포함되어 있는지 확인할 수 있다.

  • 만약 포함되어 있다면, item이 있는 인덱스가 리턴된다.
  • 포함되어 있지 않다면, -1이 리턴된다.
    여러 번 포함되어 있드면, 처음 발견된 인덱스가 리턴된다.
let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands.indexOf('Kakao')); // 1
console.log(brands.indexOf('Daum')); // -1

indexOf와는 반대로 탐색을 뒤에서부터 하게 되는 lastIndexOf도 있다.

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];

console.log(brands.lastIndexOf('Kakao')); // 3
console.log(brands.lastIndexOf('Daum')); // -1

(2) 배열에서 특정 값이 있는지 확인하기 (includes)

때로는 그냥 그 값이 배열안에 있는지, 그 여부만 확인하고 싶을 때, includes라는 메소드를 활용하면 된다. 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

(3) 배열 뒤집기 (reverse)

배열의 순서를 뒤집는다.

let brands = ['Google', 'Kakao', 'Naver', 'Kakao'];
console.log(brands); // ["Google", "Kakao", "Naver", "Kakao"]

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

6. for..of 반복문

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

let dataType = ['Number', 'String', 'Boolean', 'null', 'undefined', 'object'];

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

// for..in 반복문 (배열에서는 잘 활용되지 않음 -> 객체에 잘 활용된다)
for (let index in dataType) {
		console.log(dataType[index]);
};

7. 다차원 배열 (multidimensional array)

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

console.log(twoDimensioanl[0][1]); // 2
profile
프론트엔드 지식으로 가득찰 때까지

0개의 댓글