[자바스크립트 기본] 배열(Array)의 개념과 예시 (feat.드림코딩)

 

 

자바스크립트로 알고리즘을 풀면서 느낀 점

배열을 제대로 알아야겠다.

그래서 정리해본다.

 

덤벼라 배열 <?

 

 

 

 

 

 

 

0. 배열을 공부하기 전에 알아보면 좋은 개념들

출처 : 드림코딩

▶︎자료구조(Data Structure) : 비슷한 타입의 데이터, 오브젝트 들을 묶어 놓은 것 (토끼만 넣은 바구니, 당근만 넣은 바구니)

자료구조는 동일한 타입에 데이터만 담을 수 있다.

 

 

but , 자바스크립트는 dynamically typed language 타입이 동적으로 정의되는 언어!

한 바구니 안에 다양한 종류에 데이터들을 담을 수 있음 ➡️  절대 권장하지 않음

 

 

출처 : 드림코딩

▶︎오브젝트(Object) : 서로 연관된 특징과 행동들을 묶어 놓은 것 (토끼, 당근, 사람, 자동차)

▶︎프로퍼티(Property) : 오브젝트 내부의 속성 (귀 두 개, 동물, 비타민C, 주황색)

▶︎메소드(Method) : 오브젝트에 저장된 함수값 (먹는다, 뛴다)

 

▶︎배열 내 동일한 데이터타입(string,number ..)을 담기

▶︎배열의 포인트는 인덱스! 인덱스로 접근하여 삭제, 추가

 

 

 

 

1. 배열선언

'use strict';

// Array😁

// 1. Declaration
const arr1 = new Array();
const arr2 = [1, 2];
const arr3 = [];

변수를 지정하고 new Array() 또는 []를 이용해서 배열을 선언할 수 있다.

 

 

 

2. 인덱스를 통한 배열접근

// 2. Index position
// index를 활용해서 데이터 검색하고 삽입하는 방법

const fruits = ['🍎', '🍌'];
console.log(fruits); // ['🍎', '🍌']
console.log(fruits.length); // 2
console.log(fruits[0]); // 🍎
console.log(fruits[1]); // 🍌
console.log(fruits[2]); //undefined
console.log(fruits[fruits.length - 1]); // 제일 마지막 Index

컴퓨터의 인덱스는 위에 그림에서 본거처럼 0부터 시작한다.

따라서 마지막 인덱스의 접근하기 위해선 전체 배열의 길이에서 1을 빼야 한다.

 

 

 

3. 배열안에 있는 값 출력

//3. Looping over an Array
//print all fruits

const fruits = ['🍎', '🍌'];

// a.for
for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 🍎
// 🍌

// b. for...of
for(let fruit of fruits) {
  console.log(fruit);
}

// 🍎
// 🍌

// c. forEach
fruits.forEach((fruit, index) => console.log(fruit, index)); // array function

// 🍎, 0
// 🍌, 1

배열안에 있는 값을 출력하기 위해선 for문을 돌리는 것과 forEach 메소드를 이용하는 방법이 있다.

 

 

 

4. 배열 추가, 삭제, 복사

//4.Addition, deletion, copy (추가, 삭제, 복사)

const fruits = ['🍎', '🍌'];

//push : add an item to the end (맨 끝에 아이템을 추가)
fruits.push('🍍','🍇');
console.log(fruits); //['🍎', '🍌','🍍','🍇']

//pop : remove an item from the end (맨 끝에 아이템을 삭제)
fruits.pop(); // 🍇 bye 👋
fruits.pop(); // 🍍 bye 👋
console.log(fruits); // ['🍎', '🍌']

//unshift : add an item to the bengging (맨 앞에 아이템을 추가)
fruits.unshift('🥝','🍋');
console.log(fruits); // ['🥝','🍋','🍎', '🍌']

// shift : remove an item from the bengging (맨 앞에 아이템을 삭제)
fruits.shift(); // 🥝 bye 👋
fruits.shift(); // 🍋 bye 👋
console.log(fruits); // ['🍎', '🍌']

//note!! shift, unshift are slower than pop, push
// 중요 ✨ shift, unshift는 pop, push보다 느리다!

// combine two arrays 두개의 배열을 합침
const fruits2 = ['🍒','🍅'];
const newFruits = fruits.concat(fruits2);
console.log(newFruits); // ['🍎', '🍌','🍒','🍅']

push와 pop은 뒤에서 배열을 삭제하고 추가하기 때문에 앞에 있는 데이터들의 이동이 없다.

 

예를 들어서 반에서 줄을 정렬한다고 했을 때 뒷줄에 서있는 얘들이 빠지고 다시 들어오는 건 별로 차이를 못 느끼지만

맨 앞에 있는 사람이 빠지거나 새롭게 들어올 때면 한 칸씩 밀리면서 줄을 정렬하기 위한 시간이 길어진다.

와 같다고 생각하면 쉽다!

그래서 shift와 unshift는 시간이 걸린다.

 

알고리즘 문제를 풀 때 데이터의 추가나 삭제가 필요하다면 push나 pop을 이용하는 것이 좋다.

 

 

 

5. 배열 검색

//5.Searching

const fruits =  ['🍎', '🍌'];
fruits.push('🍉');

//indexOf : find the index (배열에 있는 요소중 일치하는 가장 첫번째 요소의 인덱스를 반환)

console.log(fruits); // ['🍎', '🍌', '🍉']
console.log(fruits.indexOf('🍎')); //0
console.log(fruits.indexOf('🍉')); //2
console.log(fruits.indexOf('🧀'));  //-1 배열에 요소가 없으면 -1을 반환


//includes 배열에 요소를 포함여부를 boolean 값으로 나타냄

console.log(fruits.includes('🍎')); //true
console.log(fruits.includes('🧀')); //false


//lastIndexOf (배열에 있는 요소중 일치하는 가장 마지막 요소의 인덱스를 반환)

fruits.push('🍎');
console.log(fruits); // ['🍎', '🍌', '🍉','🍎']
console.log(fruits.indexOf('🍎')); //0
console.log(fruits.lastIndexOf('🍎')); //4

 

 

 

 

 

 

 

Reference

 

이 포스팅은 드림코딩 유튜브 자바스크립트 배열 강의를 기준으로 정리한 내용입니다.

 

 

 

 

 

 

 

배열에 대한 기본적인 개념을 알아봤으니 배열을 이용하는 메소들도 덤으로 알아보는 것도 좋다.

더 자세하게 알고 싶다면 아래 포스팅을 참고하시길.

 

[자바스크립트 기본] 알아두면 유용한 배열 Array 메소드 정리 (feat.드림코딩)