Array

4-1. 배열(Arras) - 개요

- Javascript에서 배열(array)은 유사한 의미를 갖는 데이터들을 모아서 관리할 수 있는 리스트 형태의 데이터 집합이다.

- Javascript의 배열은 길이가 고정되어 있지 않으며 데이터의 추가나 삭제를 통해 크기를 변경할 수 있다.

- 배열은 인덱스(index)를 통해 데이터를 관리하며 하나의 배열 변수를 이요해 다수의 값을 관리한다.

- 배열의 요소는 일반 변수와 마찬가지로 저장 되는 값에 의해 데이터 타입이 결정된다.

 

set이나 map과 같은 배열 객체들은 나중에 배우고 자주 쓰이는 배열 위주로 우선 배운다.

자바, c와 자바스크립트는 배열의 형태도 다름

자바스크립트에서 배열은 객체형태. 리스트 형태로 하는 것이 배열이다.

각각의 배열 요소들마다 서로 다른 데이터가 들어갈 수 있어서 배열의 구조가 다르지만 배열을 사용하는 방식은 같다. index를 가지고 데이터를 넣거나 빼고 배열 객체가 제공해주는 내장 메소드를 필터링하거나 하는 작업을 할 수 있다.

위 그림은 실제 메모리상에 저렇게 들어가는 것은 아님 ㅎㅎ

만약 정수값 10개 사용하는 특정 애플리케이션이 있다고 하자. 

10개 정수값을 넣는 변수를 선언한다.

각각의 식별자 이름들을 다르게 하고 그것들을 순환해서 접근하는 부분도 어려움이 있음

그래서 배열을 선언해서 유사한 의미, 유사한 용도로 사용하는 데이터들을 집합으로 관리하면 

그 데이터들을 순환하거나 전체 요소들을 산출하거나 합을 구할 때 훨씬 편하게 접근할 수 있다.

 

 

let numbers = [10, 6, 9, 11, 20]; //정수 값 5개를 초기화하는 배열 객체 생성

배열에 접근할 때는 index로 접근 가능함

numbers의 첫 번째 방은 index 0 값은 10. 대괄호를 통해서 배열 선언 가능

 

new array해서 배열 객체를 생성해서 사용가능 

let numbers = new Array(10, 6, 9, 11, 20);

 

배열 요소들을 순환하기 위해 반복문 for를 사용한다던지 할 수 있다.

 

자바스크립트 배열은 길이가 고정되어 있지 않아서 가변적으로 늘거나 줄어든다.

 

배열로 선언한 배열 요소 하나하나는 일반 변수를 선언한 것과 같은데

배열로 선언하고 배열의 이름과 index로 접근하는 것이 차이일 뿐이다. 

하나의 변수에 모든 데이터를 넣을 수 있는데 데이터에 따라 방의 타입이 결정된다.

정수로 선언해도 특정 방에다가는 객체타입이나 문자열이나 다른 배열을 넣을 수 있다. 

다양한 형태의 데이터를 집합에서 넣을 수 있어서 

요소들을 넣고 실제로 꺼냈을 때 내 예상과 다른 데이터가 들어있을 수 있어서 주의해야 한다.

타입에 대한 차이를 허용할지 말지를 결정해야 하고 보통은 동일한 타입끼리 모아서 관리한다.

 

 

 

4-2. 배열의 활용

- Javascript에서 배열은 객체이며 다양한 메소드를 제공한다.

- 배열의 다양한 내장 메소드를 활용하면 배열 요소의 추가, 삭제, 순회 등과 같은 기능을 손쉽게 구현할 수 있다.

- 배열 요소에 대한 순회는 반복문을 사용하거나 배열 객체의 map(), filter(), find() 등과 같은 내장 메소드를 이용해 다양한 방식으로 순회 가능하다.

배열 객체가 제공하는 다양한 내장 메소드가 있다. 내장 메소드를 이용하면 배열에 요소에 다양한 기능을 손쉽게 구현할 수 있다. 순회는 for와 같은 반복문도 사용할 수 있지만 map(), filter(), find()와 같은 내장 메소드 이용해서 순회한다.

 

let numbers = [10, 6, 9, 11, 20]; //index는 0번부터 시작하고 index로 배열에 접근

 

배열 객체의 기본적인 내장 매소드들:

push(): 마지막 요소 추가

pop(): 마지막 요소 삭제

unshift(): 첫 번째 요소 추가

shift(): 첫 번째 요소 삭제

 

전체요소 출력시 각 요소에 접근하는 for문 사용 가능

그러나 map() 내장 메소드를 이용해서 arrow function정의가 더 쉬움(for문과 결과는 같음)

 

arrow function 없을 시:

numbers: map( 함수(전달인자) { console.log() });

map() 메소드는 배열 각각을 꺼내면서 함수기능을 전달인자로 받음.

 

arrow function 있을 때:

numbers: map( 전달인자 => console.log()); (이거 맞나)

 

find, findIndex, indexOf, concat 등 다양한 배열 메소드들이 있음.

이런게 필요하면 api를 사용하여 어떤 상황에서 어떻게 사용할지는 연습이 필요하다.

 

 

4-3. 실습 -  Calculator 만들기 

 

 

 

 

 

 

강의링크:

https://www.youtube.com/watch?list=PLOSNUO27qFbug6LMeH5yNXfQqVqWlUARc&v=uQPv8uf1e1Q&feature=youtu.be 

 

 

강의링크: https://www.youtube.com/watch?v=wiJGoCo6Bpw&list=PLOSNUO27qFbug6LMeH5yNXfQqVqWlUARc&index=7