배열 (Array)

배열 (Array)

다양한 데이터 타입의 값을 대괄호 [ ] 안에 선언되고,
쉽표( , )를 사용해 데이터를 순차적으로 나열하고, 관리하기 위해서 사용하는 데이터 타입.
어떤 타입의 데이터를 넣어도 에러가 나지 않는다.

let myArray = ['rain',1,'22','sunny',false]
console.log(myArray); // 5 ["rain", 1, "22", "sunny", false]

[ ] 안에 있는 데이터들을 '요소'(= element)라고 하며, 요소의 순서(위치)를 index 라고 한다.

요소의 접근

배열의 순서는 0부터 시작이 되고, index를 사용하여 접근한다.

     let myArray = ['rain', 100,'22','sunny',false]
     
//myArray의 index = [  0   ,  1 ,  2 ,   3   ,  4  ]
     
 	console.log(myArray[0]); //  rain ; 0번째 인덱스 데이터
	console.log(myArray[3]); // sunny ; 3번째 인덱스 데이터

💥💥 인덱스(index)는 0부터 세며,
요소(element)는 1부터 센다.
그러므로 요소는 인덱스보다 1이 더 많다.

	let myFood = ['흑돼지', '초밥', '매운닭발', '엽떡', '짬뽕']
    
    // myFood의 요소 = [  1   ,   2  ,    3    ,   4  ,   5  ]
   // myFood의 인덱스 = [  0   ,   1  ,    2    ,   3  ,   4  ]
    
console.log(myFood); // (5) ["흑돼지", "초밥", "매운닭발", "엽떡", "짬뽕"]; 요소의 갯수 출력

배열 길이 구하기

찾고자하는 코드를 인터넷에 치면 수많은 헬퍼들이 기다리고 있기 때문에 언제나 검색을 가까이 해두는 것이 최고👍🏻
한국어도 좋지만 이왕 영어로 검색을 하면 검색의 폭이 더 넓어지기 때문에 영어로 검색하는 것 또한 최고👍🏻👍🏻

1. 기본적으로 'How to' 를 시작으로 하는 것이 팁.

2. 사이트 클릭하여 하기 redbox를 보면 '배열명.length' 가 배열 길이를 구하는 메소드라는 것을 알 수 있다.

   예제
	let koreanFood = ['돼지국밥','비빔밥','냉면','삼겹살']
	koreanFood.length // 4

💥💥 REMINDER !
배열의 길이는 배열에 담긴 요소가 몇 개인지 알아낼 수 있고,
요소는 1부터 세어지기 때문에 요소의 갯수는 인덱스(index)보다 1이 더 많다.

📝📝 배열의 길이와 인덱스를 이용하여 배열의 가장 마지막 요소 알아내기!

	let world = ['한국','이탈리아','그리스','체코','조지아','헝가리','쿠바']
	console.log(world.length); // 7; 배열의 요소 갯수 출력
	console.log(world[6]); // 쿠바; 인덱스 6번째 요소 출력

 /* index는 배열의 length 보다 항상 1보다 적기 때문에
    length -1 하면은 배열의 마지막 요소 출력*/

	console.log(world.[world.length-1]); // 쿠바;

다차원 배열

배열의 요소로 다른 배열이 들어가는 것

	let myNumbers = [10,20,['가','나','다','라'],'a','b','c']
	console.log(myNumbers[1]); // 20;
	console.log(myNumbers[2]); // ['가','나','다','라']

myNumbers의 2번째의 인덱스는 ['가','나','다','라'] 라는 '배열'이 '값'으로 나온다.
해당 배열의 인덱스에도 접근이 가능하다.
두번째 배열의 인덱스 값은 '배열'이 아닌 '요소'가 출력된다.

	console.log(myNumbers[2][0]); // 가

/* 첫번째 배열'myNumbers'의 인덱스 값 [2]를 넣으면 ['가','나','다','라'] 배열이 나오고,
첫번째 배열의 인덱스 값 옆에 두번째 배열의 인덱스 값[0]을 넣으면
두번째 배열 ['가','나','다','라']의 0번째 인덱스 값인 '가' 출력.*/

** 이 때 출력된 인덱스 값은 배열이 아닌 '가'라는 요소로 나온다.

💥 이를 다차원 배열, 중첩된 배열 이라고 한다

요소 수정하기

Array의 이름에 수정하고 싶은 요소의 인덱스를 [ ]에 넣고 수정하고 싶은 요소로 변경한다.

     let myFood = ['흑돼지', '초밥', '매운닭발', '엽떡', '짬뽕', '매운갈비찜']
      myFood[2] = '해주냉면'
  console.log(myFood); // (5) ["흑돼지", "초밥", "해주냉면", "엽떡", "짬뽕"];

요소 추가하기 - push, unshift

• 배열 맨 앞에 요소 추가
  배열명.push( );

	let animal = ['코끼리','사자','호랑이']
	animal.push('두더지')
	console.log(animal); // (4) ["코끼리","사자","호랑이","두더지"]

• 배열 맨 뒤에 요소 추가
  배열명.unshift( );

	let animal = ['코끼리','사자','호랑이']
	animal.unshift('두더지')
	console.log(animal); // (4) ["두더지","코끼리","사자","호랑이"]

요소 삭제하기 - pop, shift

• 배열 맨 뒤에 요소 삭제하고 삭제한 요소 반환
  배열명.pop( );

	let doolyFriends = ['또치','도우너','희동이','세일러문']
 	doolyFriends.pop(); // 배열에 맨 끝의 요소 '세일러문'이 삭제
	console.log(doolyFriends); // (3) ["또치","도우너","희동이"]

• 배열 맨 앞에 요소 삭제하고 삭제한 요소 반환
  배열명.shift( );

	let nickname = ['내사랑','도우너','쿵짝']
 	nickname.shift(); // 배열에 맨 앞의 요소 '내사랑'이 삭제
	console.log(nickname); // (2) ["도우너","쿵짝"]

✓ 요소 추가와 삭제를 동시에

	let friends = ['chandler','joey','monica','rachel','lulu']
	friends.pop(); // 배열 요소 맨 뒤에 'lulu'가 삭제
	friends.push('ross'); // 배열 요소 맨 뒤에 'ross' 추가
console.log(friends); // (5); ["chandler","joey","monica","rachel","ross"]

💡💡사담

* pop,push와 shift, unshift의 성능

pop, push는 배열의 맨 뒤에서 삭제와 추가를 하기 때문에 메모리 관련 연산이 적다.
앞에 있는 배열의 요소에 인덱스 값을 재할당 하지 않기 때문이다.
그러나 shift, unshift는 배열의 맨 앞에서 삭제와 추가를 하기 때문에 이어지는 배열의 요소에 다시 인덱스 값을 재할당을 해야한다.
그래서 메모리 관련 연산이 많아져 성능이 비교적 느리다.

	let a = ['가','나','다','라']
  // a의 인덱스 = [ 0 , 1 ,  2 ,  3 ]
	a.pop(); // 맨 끝의 요소 '라'를 삭제
	console.log(a); // (3); ['가','나','다']; 요소의 인덱스는 바뀌지 않는다.

	let a = ['가','나','다','라']
  // a의 인덱스 = [ 0 , 1 ,  2 ,  3 ]
	a.shift(); // 맨 앞의 요소 '가'를 삭제
	console.log(a); // (3) ['나','다','라']; 요소의 인덱스가 하기처럼 바뀐다.
// '나'의 인덱스 값은 '1'에서 '0'으로 바뀌고,'다'의 인덱스 값은 '2'에서 '1'로 바뀐다. 

🔺 배열 참고

배열의 메소드

메소드는 어마어마하게 많고 다양하기 때문에 다 외울 수가 없고,
항상 검색하여 찾는 것이 기억을 더듬어 찾는 것보다 훨씬 빠르다.

그래서 상기에 말한 것처럼 검색에 익숙해야 한다.

splice

이 메소드는 다양한 기능을 가지고 있다.
배열의 요소를 삭제할 수도 있고, 추가할 수도 있다..
그리고 요소를 삭제하지 않고 추가할 수 있다.

.splice('인덱스 위치','삭제 할 요소 갯수','추가 할 요소','추가 할 요소2'..'추가할 요소N')

	let ar = [1,2,5]
 	ar.splice(-1) // [5]

1. splice 인덱스 위치 
splice의 첫번째 인자는 배열의 index의 시작점을 나타낸다.
배열은 음수 인덱스를 사용 할 수 있다.
음수 인덱스는 맨 끝의 요소부터 요소 위치를 나타낸다.
' -1 ' 는 배열 ' ar ' 의 맨 끝의 요소 ' 5 ' 를 나타낸다.

	let ar = [1,2,5]
 	ar.splice(-1,1)
	console.log(ar); // (2); [1,2]

2. splice 요소 삭제
splice에 2번째에 들어가는 숫자(두번째 인자)는 '삭제할 요소 갯수'를 나타낸다.
1개의 요소를 삭제한다는 뜻이며, '-1'인덱스에 위치한 요소 1개인 '5'를 삭제한다.

	let ar = [1,2,5]
 	ar.splice(-1,1,3,4)
	console.log(ar); // (4); [1,2,3,4]

3. splice 요소 삭제 후 요소 추가
splice에 3번째부터 들어가는 숫자(세번째인자부터)는 '추가할 요소'를 나타낸다.
요소'5'가 삭제되고 난 뒤에 그 자리에 '3','4'라는 요소가 추가가 되는 것이다.

	let ar = [1,2,5]
 	ar.splice(-1,0,3,4)
	console.log(ar); // (5); [1,2,3,4,5]

4. splice 요소 삭제하지 않고 요소 추가
인덱스 위치인 '-1'자리에서 '0'개의 요소를 삭제하고,
그 자리에'3','4'라는 요소가 추가가 되는 것이다.

예제

	let today = ['I','want to','meet you']
	today.splice(1,0,'miss','you','and')
	console.log(today) /* (6); 
 ["I","miss","you","and","want to","meet you"] */

slice

splice 보다 좀 더 간단한 메소드이다.
배열의 '인덱스 시작'부터 '인덱스 끝'('인덱스 끝' 요소는 제외)의 요소를 복사한 새로운 배열을 반환한다.

.slice('인덱스 시작','인덱스 끝')

	let tomorrow = ["I","You","like","a Mango"];
	tomorrow.slice(1,3); // (2) ["You","like"]

1. slice의 인덱스 '1' 위치는 "You"가 되고,
인덱스'3'의 위치인 "a Mango"를 제외한 2개의 요소 "You","like"가 tomorrow의 새로운 배열 값이다.

💡'인덱스 끝'을 넣지 않을 경우, 제일 끝 요소까지를 복사한다.

	let tomorrow = ["I","You","like","a Mango"];
	tomorrow.slice(1); // (3) ["You","like","a Mango"]

🔺 배열과 메소드

💡 배열의 중요성📚📜

배열 값에 다양한 데이터를 나열하고 한번에 관리할 수 있다.
그 데이터들을 자유롭게 저장하고 꺼낼 수 있다.
중복된 변수 선언을 줄이기 위해 사용하고,
특히 배열과 반복문 기능을 사용하면 작성 코드의 길이를 줄일 수 있다.