20221031_수업기록

 

Arrays(배열)

배열은 특수화 형태의 객체로, 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조 이다.

자바스크립트의 배열은 객체(Object) Array생성자로 생성된 Array 타입의 객체(Object)이며

프로토타입 객체는 Array.prototype이다.

숫자형 키를 사용함으로써 배열은 객체(object) 기본기능 이외에도 순서가 있는 컬렉션을 제어하게 해주는 특별한 메서드와 프로퍼티를 제공한다. 

array객체를 typeof 연산을 실행했을때 object가 나왔음을 확인할수있다.

Array오브젝트의 isArray라는 메서드를 사용하니 'true'가 나왔음을 확인할수있다.

배열생성

(1) 배열리터럴 방식으로 생성하기

 const fruits = ["Banana","Orange","Apple","Mango"];     

요소는 ','쉼표로 구분하고 모든 요소들을 [ ] 대괄호로 묶는다

 

위의 배열을 객체 리터럴로 유사하게 표현하면 다음과 같다.

배열은 '특수화 형태의 object'이다 . object = { key : value } 로 key와 value를 프로그래머가 설정하는데배열같은경우 key가 '0'으로 시작하는 숫자들로 이루어져있다. 요소가 하나씩 늘어날수록 key가 1씩 증가한다.

const array_name = {
'0' : 'Banana',
'1' : 'Orange',
'2' : "Apple",
'3' : "Mango" };

개발자툴 콘솔패널로 확인해보면 오브젝트처럼 프로퍼티의 집합을 확인할수있다.  

 

(2)Array() 생성자 함수

배열은 일반적으로 배열리터럴방식으로 생성하지만, 배열 리터럴 방식도 결국 내장함수 Array() 생성자 함수로 배열을 생성하는 것을 단순화 시킨 것이다.  Array() 생성자 함수는 매개변수의 갯수에 따라 다르게 동작한다.

매개변수가 1개이고 숫자인경우 : 매개변수로 전달된 숫자를 length값으로 가지는 빈 배열을 생성한다.

const fruits = new Array(2);

그 외의 경우 매개변수로 전달된 값들을 요소로 가지는 배열을 생성한다.

const fruits = new Array("Banana","Orange","Apple","Mango");

 

 

또한 배열요소의 자료형에는 제약이 없다.

const arr = ['사과', {name : '이보라'}, true, function() {alert('안녕하세요.')}];
//문자열type, object type, boolean, function type 전부 요소추가 가능하다.

 

배열의 특정요소 불러오기

array_name [x]

 const fruits = ["Banana","Orange","Apple","Mango"];

특정인덱스를 [ ] 대괄호안에 입력하면 해당하는 x라는 key의 value값을 불러온다.

'2'라는 key의 value인 "Apple"이 호출되었음을 확인할수있다.

존재하지 않는 요소에 접근하면 undifined를 리턴한다.

 

배열의 원소추가

객체(object)가 동적으로 프로퍼티를 추가할수 있는 것처럼 배열도 동적으로 요소를 추가 할 수 있다.

이 때 순서에 맞게 값을 할당할 필요는 없고 인덱스를 사용하여 필요한 위치에 값을 할당한다.

array_name[x] = value

*x라는 key의 value값이 없을때 해당배열에 추가할수 있다.

만약 array1의 원소가 3개일때
index : 7 에 원소를 추가할수있을까?

array1 = ["mango","banana","kiwi"];
array1[7] = ["apple"];

<결과> 3~6인덱스는 undifiend처리가 되고 array1[7]에 'apple'이라는 원소가 추가되었음을 확인할수있다.

array1 
mango
banana
kiwi
undifiend
undifiend
undifiend
undifiend
apple

배열의원소 삭제

배열은 객체이기 때문에 배열의 요소를 삭제하기위해 delete연산자를 사용할 수있다. 이때 lehgth프로퍼티의 값을 변화하지않는다 삭제된요소는 empty로 되어있다. 해당 요소를 삭제하고 length프로퍼티의 값을 변화주려면 Array의 메소드

splice()를 사용해야한다.

const array = ['a','b','c','d'];

delete array[2];

const array2 = ['a','b','c','d'];
array2.splice(2,1);

pop / push 와 shift/unshift

array_name.push("item");
array_name.unshift("item");
array_name.pop();
array_name.shift();

배열엔 stack, queue 자료구조의 주요연산을 가능케해주는 내장메서드가 있는데,

pop()과 push() 그리고 shift()와 unshift()가 있다.

 

queue는 배열을 사용해 만들수 있는 구조로 배열과 마찬가지로 순서가 있는 컬렉션을 저장하는데에 사용한다.

java시간에 배웠던 queue

큐는 선입선출 (FIFO [First In First Out]) 로 맨처음에 들어간 원소가 맨처음 나가는 자료구조이다.

큐에서 사용하는 주요연산은 push, shift가 있다.

queue의 연산
shift : 컬렉션중 맨 첫번째요소를 빼낸다.
push : 컬렉션중 맨마지막인덱스에 요소를 넣는다. 

스택은 후입선출(LIFO [Last In First Out])로 맨마지막에 들어간 원소가 맨처음 나가는 자료구조이다.

스택에서 사용하는 주요연산은 push, pop이 있다.

stack의 연산 
pop : 컬렉션중 맨마지막요소를 빼낸다.
push : 컬렉션중 맨마지막인덱스에 요소를 넣는다

자바스크립트 배열을 사용하면 큐와 스택 둘 다를 만들 수 있습니다. 이 자료구조들은 배열의 처음이나 끝에 요소를 더하거나 빼는 데 사용되죠.
이렇게 처음이나 끝에 요소를 더하거나 빼주는 연산을 제공하는 자료구조를 컴퓨터 과학 분야에선 데큐(deque, Double Ended Queue)라고 부릅니다.

배열 프로퍼티

array.length

배열의 길이를 나타낸다  (마지막 index값  + 1 )

 

배열 메소드

 

 

forEach ( )

array의 원소 갯수만큼 인수를 실행한다.

push ( )

array의 원소를 추가한다.

pop ()

기본적으로 맨마지막의 원소를 삭제한다.

shift()

기본적으로 맨첫번째의 원소를 삭제한다.

unshifht('item')

맨 첫번째의 인덱스에 메소드의 인수를 추가한다.

delete.array_name[index]

해당 인덱스의 원소를 삭제한다.

concat(array_name, array_name ....)

해당 배열뒤에 메소드의 인수(배열타입)을 추가한다. (인수의 갯수는 제약이 없다)splice( start_index, 삭제할원소갯수, 추가할원소, 추가할원소2 .....)해당 배열[start_index]부터 삭제할원소갯수대로 삭제하고 추가할원소들을 추가한다. (추가할원소의 갯수는 제약이 없다)

sort

a-b <= 0 : a,b의 순서를 유지

a-b > 0 : a,b의 순서를 바꿔라

기본sort method는 원소들이 정수라고 하더라도 문자열로 변화하여 정렬을 수행한다.

sort는 숫자를 제대로 인식할수 없다.

map( )

모든 배열원소에 대하여 (myFunction을 실행하여) mapping한 결과값들에 대한 array를 만듬

 

 

 

 

 

 

반복문

for/in - object의 property를 다룰때 사용하는 반복문

 

 

for/of - 

for x of object = x라는 변수에  object의 프로퍼티중 value를 저장한다.

 

iterables

(Array, Object, String) -> 반복해서 원소를 가져올수 있음 

iterable (반복 ,reapeat)

 

 

 

🙏수업들으면서 참고한 사이트

출저 : https://poiemaweb.com/js-array
출저 : https://ko.javascript.info/array