[JS] 데이터 정리하는 방법(Array)

📚 INTRO

우리는 코딩을 하면서 수많은 데이터를 다루게 됩니다.

하지만 이 데이터가 정리되어있지 않고 여기저기 흩어져있다면 데이터 사용이 어려워지겠죠?

더 효율적으로 프로그램을 만들기 위해서 우리는 데이터를 정리해두어야합니다.

오늘은 데이터를 정리하는 방법에 대해 알아봅시다🥳

 

쉽게 이해하기 위해서 데이터 타입과 변수 선언하는 방법을 알고있어야해요!

잘 모르겠다면 아래 링크를 참고해주세요😉😉

 

데이터 타입에 대해 잘 모르겠다면? 👉 https://hizzine.tistory.com/9

Data Type(null과 undefined)

변수 선언하는 방법에 대해 잘 모르겠다면? 👉 https://hizzine.tistory.com/8

const, let, var 차이점이 뭐지?

 

🔎 배열 (Array)의 개념

만약에 배열이 없을때 일주일을 만들고 싶다면 다음과 같이 하나씩 선언해줘야합니다.👇

const mon = "Mon";
const tue = "Tue";
const wed = "Wed";
const thu = "Thu";
const fri = "Fri";
const sat = "Sat";
const sun = "sun";

 

그리고 이 데이터들을 하나로 합치고싶다면 하나씩 +를 이용해서 합쳐줘야겠죠?

 

const daysOfWeek = mon + tue + wed + thu + fri + sat + sun;
console.log(daysOfWeek);

//MonTueWedThuFriSatsun

 

하지만 위의 결과처럼 하나로 합쳐지기만 할 뿐, 요일을 하나씩 반환할 수 없는 의미없는 문자열이 되어버립니다😭

 

요일을 하나씩 반환할 수 있는 의미있는 형태로 만들기 위해서 드디어 배열이 등장합니다!

그럼 요일을 배열로 만들어볼까요? 위의 예시에서 +를 ,로 바꾸고 배열을 나타내는[]로 감싸줍니다.

 

const daysOfWeekList = [mon, tue, wed, thu, fri, sat, sun];

console.log(daysOfWeekList);
//(7) ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'sun']

 

예시를 보시면 리스트 형태로 반환되고, 요일 하나씩 접근할 수 있게 됩니다.

 

⚠️ 배열의 요소들은 , 로 분리되어야합니다. 그리고나서 원하는 어떤 타입이든 넣어도됩니다.

string, number, boolean, null 등등 뭐든지요!👏👏 ⚠️

 

그리고 다음의 두 케이스는 같은 결과값을 가집니다.

 

//case 1
const mon = "Mon";
const tue = "Tue";
const wed = "Wed";
const thu = "Thu";
const fri = "Fri";
const sat = "Sat";
const sun = "sun";

const daysOfWeekList = [mon, tue, wed, thu, fri, sat, sun];

//case 2
const daysOfWeekList = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

 

case1은 string을 하나씩 변수에 할당해서 해당 변수들을 리스트 안에 넣어준것이고,

case2는 string을 직접 배열에 넣어준 것 입니다.

 

🔎 배열 (Array)에서 원하는 요소 찾기

다음은 배열에서 원하는 요소에 접근해보도록 하겠습니다.

위의 배열에서 제가 가장 좋아하는 토요일을 얻어내고싶다면 몇번째 요소에 접근해야할까요?

토요일은 일주일중 6번째 요일이니까 배열의 여섯번째 요일에 접근하면 될 것 같습니다.🙌

배열에서 원하는 요소에 접근하려면 배열이름[원하는 요소의 번호] 형태로 접근하면 됩니다.

 

const daysOfWeekList = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
console.log(daysOfWeekList[6]);

// Sun

 

위의 결과값을 보면 냅다 sun을 출력해주는것을 볼 수 있습니다. 왜그럴까요?😭

바로 배열의 첫번째 요소는 0부터 시작하기 때문입니다.

그래서 우리가 sat를 얻고싶다면! 바로 5번째 요소를 달라고 해야하는것이지요!

 

🔎 배열 (Array)에 데이터 추가하기

배열은 원하는 요소 하나씩에 접근할 수 있을 뿐만 아니라 데이터 추가도 쉽게 할 수 있습니다.

 

const daysOfWeekList = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
console.log(daysOfWeekList);
//(6) ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

daysOfWeekList.push("sun");
console.log(daysOfWeekList);
// (7) ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'sun']

 

다음과같이 배열이름.push 를 이용하면 쉽게 데이터 하나를 추가할 수 있습니다😉

 

📚EXTRO

 

오늘은 배열에 대해서 알아보았습니다. 다음은 object에 대해 알아보겠습니다.

오늘도 저와 함께 공부해주셔서 감사합니다!

틀린부분이 있다면 댓글 남겨주세요 공부하는 작은 개발자에게 큰 힘이 됩니다🥕🥕