6)JavaScript_Array, APIs

먼저 자료구조 를 알아야지

비슷한 데이터끼리 묶어 둔걸 말함

 

?? 비슷한 종류의 데이터를 묶어둔게 Object라매..

그럼 자료구조랑 뭔차이?

 

Object : 여기 사람이 있어요. 눈으로 보고 코로 냄새맡고 입으론 뭘 먹으며 귀론 뭘 들어요

사람이란걸 두고 눈,코,입, 귀 라는 공통된걸 묶었음

 

자료구조 : 여기  사람이 있어요. 토끼도 있고, 강아지도있고, 고양이도 있네요. 전부 포유류네요?

포유류라는 공통 자료구조(?)지 않음?

 

이 차이임. .

 

그런데 JS는 dybamically type language

굳이 자료구조 같은거 끼리 아니여도 다 담을수 있음

---

Array

배열의 선언은 이렇게

new 라는 키워드를 써서 생성하는 방법과

대괄호를 써서 만드는 방법이 있다

 

한번 만들어 보자

cocktail 에 배열을 만들어 두가지 칵테일 담아 넣고

출력해보니 0번째와 1번째에 나란히 있는거 확인

그리고 length(갯수)도 2개 확인

 

첫번째 술잔만 출력하려면..?

먼저 object 처럼 key  값 넣어서 value값 가져오는것과 비슷함

배열명[n-1] 하면 첫번째 출력 할 수 있다

존재하지 않는 3번째 배열을 불러오면 undefined가 뜨게 된다

 

그럼 마지막 끝을 모르면 저렇게 오버될수도 있겠네..?

때문에 마지막 끝은 이렇게 찾는다

---

Looping

루프문 써서 저거 다 출력을 해보자

전에 for ... in 이랑

for ... of 했었음

 

그 둘의 차이는 사실 아직까지도 잘은 모르겠으나

확실히 아는건

for ... of 가 저런 순차적인것들을 한번에 뽑아 올때 쓴다는것

(JS 에서만 사용되는것... Python이나 Java에선 저렇게 못씀)

 

더 간단히 쓰는 방법..!

사용법을 직접 읽어보며 쓰는걸 습관화 해야 된다

누가 알려준걸 쓰는것 보다는 말이지...

forEach() 라는 함수를 쓸건데 이건 이미 만들어져있는거

사용법은 컨트롤키 누르고 클릭하면..설명서 뜸

[ 배열안에 들어있는 값마다 정해진 뭔 동작을 실행하는 함수. 우리가 정해놓은 콜백 함수를 수행한

우리가 호출한 이 콜백함수를 value 하나하나마다 호출을 해준다]

 

솔직히 설명서가 뭔소린지 모르겠다.. 친절한데.... 

일단 시키는대로만 써보자 먼저 값을 가져와야지 value

음. . 이렇게 나오는구만 그 다음 index..?

아~ 인덱스 번호가 나오는군

다음은 배열이지 array

사용법 알았으니 필요 없는건 좀 지우고..

이름없는 함수의 경우는 화살표 함수로 바꿔지잖어

다시 정리 이

forEach()는 저 배열(array)들어있는 값(value)들 마다 내가 전달한 함수들을 출력하는군!

---

Add, Delete, Copy

배열에 데이터를 넣고, 삭제하고, 복사하고를 할거..

push()를 쓰면 뒤에서 부터 하나씩 추가가 되고

pop()를 쓰면 뒤에서 부터 하나씩 제거가 된다

---

unshift()를 쓰면 앞에서 부터 하나씩 추가가 되고

shift()를 쓰면 앞에서 부터 하나씩 제거가 된다

 

---

자! 여기서 저 둘의 차리를 보자

shift와 unshift는 pop과 push보다 엄청엄청 느리다

그이유는 뒤에서 넣고 빼는건 그냥 순차적으로 진행이지만

앞에서 넣고 뺄때는 

먼저 0번째 자리의 데이터를 한칸 뒤로 옮겨 공간을 만든다음 집어 넣는 식이고

빼는것도 마찬가지로 가장 앞의 데이터를 뺀 다음 그 뒤에 있는 데이터들을 한칸씩 옮기기 때문에

 

그래서 속도가 느리다는것..

---

그럼 내가 원하는 위치의 아이템을 없애는 방법은..?

먼저 데이터좀 집어 넣자

splice()를 쓸거

사용법은 마우스 올리면

오.. 시작을 먼저 정하라고?

다 날라갔는데.. deleteCount도 설정을 해주자고

1개를 지울거다 1번째꺼를

하니깐 1번째 칵테일이 사라졌다

그런데. .

이렇게 또 1개 없앨게 1번째꺼 그리고 이거 두개 추가할께~ 하면. .

 🍹

이거 지우고 그 중간에

그니깐 그 자리에 🥤🧋 넣는게 된다

---

두가지의 배열을 묶는것도 됨

cocktail2 라고 새로운 술을 만들었음

그리고 그걸 concat 이라고 두 배열을 합치는거 사용해서 합친뒤

newCocktail 에 담고.. 출력하면? 합쳐져 나옴

---

Searching

배열 안에 내가 찾고자 하는게 몇번째에 있는지 찾고 싶을때 쓰는거

맥주 위치 함 찾아보자~

3번째에 있고만.. 맞나?

 

이렇게 내 배열에 있는 아이템이 몇번째에 있는지 찾고싶을때 씀

 

그럼 내가 찾는게 있나 없나만 알고싶을때..?

includes()를 사용하면 T 또는 F로 알려준다

 

없는걸 찾을경우에는 이렇게

나온다

---

상황부터 만들고.. 만약에

동일한데이터가 마지막에 하나 더있으면 어떻해

아니... 저거 6번째에도 하나 있는데 왜..? 0번째꺼만 나오지?

기준점이 지금 앞이라 그런거지 이게.. 그러면. .

 

자.. 여기까지 배열에 관한 이야기. .

 

배열을 지우고 빼고 비틀고 다됨...