# 배열 개요 ## 미션 배열의 개념과 그 사용법을 익히시오. <img src="http://drive.google.com/uc?export=view&id=1kHHrmcynVLbzd7j47mYKW1QyJxKSyBls" alt="홍팍-자바스크립트-배열-개요-미션"> ## 00:35 배열이란 배열이란, 여러 변수를 하나로 묶은것으로, 대표적인 자료구조이다. 여기서 자료구조란, 데이터 관리를 위해 만들어진 도구를 뜻한다. 계란을 잘 보관하기 위해 계란판이, 책을 잘 보관하기 위해 책장이 있는 것처럼 말이다. <img src="http://drive.google.com/uc?export=view&id=1kHQJdrCPrc1QN_PXY8kHDiwa6HWRoH95" alt="홍팍-자바스크립트-배열-개요-자료구조"> ## 01:05 배열 생성하기 배열은 대괄호 사이에 값을 넣고, 변수명을 붙이면 된다. 배열이 만들어 지면, 배열 속 각 요소는 인덱스로 구분된다. 인덱스란 배열 요소의 위치 정보로, 0부터 시작한다. ``` // 문자열(string) 배열 const coffees = ["아메리카노", "라떼", "카푸치노", "콜드브루"]; // 정수형(integer) 배열 const prices = [3500, 4200, 4500, 3800]; // 실수형(float) 배열 const weights = [74.6, 52.9, 61.7, 49.3]; // 비어있는 배열 const foo = []; ``` <img src="http://drive.google.com/uc?export=view&id=1kIMjYse3J6Az2gzJh1cVhLsQjsxJ5Vks" alt="홍팍-자바스크립트-배열-생성-만들기"> ## 01:25 배열값 읽기 배열의 값은 인덱스를 통해 읽어올 수 있다. ``` console.log(coffees[0]); // "아메리카노" console.log(prices[3]); // 3800 console.log(weights[1]); // 52.9 console.log(foo[0]); // undefined ``` ## 01:37 배열값 쓰기 및 변경 배열에 값을 추가 또는 변경할때도, 인덱스를 사용하면 된다. ``` foo[0] = 11; foo[1] = 22; foo[2] = 33; console.log(foo); // [11, 22, 33] ``` ## 01:45 배열 사용 시, 주의점 자바스크립트의 배열은 서로 다른 타입을 담을 수 있어 유연하지만, 그 유연함이 오히려 독이 된다. 따라서, 하나의 배열에 모두 같은 타입을 담는게 좋다. 책꽂이에 역사책, 동화책, 잡지, 사전, 등등... 마구잡이로 꽂혀있다면 어떠하겠는가? 배열도 마찬가지다. ``` // 타입이 뒤섞인 배열(이렇게 만들면 선배한테 욕먹음 🙅‍♀️) const bar = [11, "치킨", 53.2, true, undefined, null]; ``` ## 02:16 다차원 배열과 이차원 배열 배열은 그 속에 또 다른 배열을 가질 수 있다. 이러한 배열을 다차원 배열이라 한다. 가장 대표적이고 실용적인 다차원 배열은 2차원 배열이다. 3차 및 그 이상의 배열은 실무에서 사용되지 않는다. 다음은 2차원 배열의 예이다. ``` // 2차원 배열로 행렬(matrix) 만들기 const matrix = [ [111, 222, 333], [444, 555, 666], [777, 888, 999] ]; ``` <img src="http://drive.google.com/uc?export=view&id=1kKKYV8iOwClfqlIJ2pMoctrkITN6otBc" alt="홍팍-자바스크립트-배열-2차원-배열"> ## 구글링 훈련 🔥 - 자바스크립트 배열 생성법 - 자바스크립트 배열값 읽기 - 자바스크립트 배열값 쓰기 - 자바스크립트 배열값 추가 - 자바스크립트 배열값 변경 - 자바스크립트 2차원 배열