자바스크립트 배열에 대해 알아보자

 

 안녕하세요. 진득코딩입니다.

 

지난 시간에는 변수에는 여러 데이터가 들어갈 수 있다는 것에 대해 알아보았습니다.

 

 이러한 변수를 많이 다루게 되면 관리가 어려워지게 됩니다.

 

 이번 시간에는 많은 데이터들을 좀 더 쉽게 다룰 수 있도록 도와주는 배열에 대해 알아보도록 하겠습니다.

 

배열

 

 배열은 변수 이름 하나로 여러 개의 데이터를 저장할 수 있습니다.

 

 다시 말해 관련 있는 데이터들을 하나로 묶어서 하나의 변수 아래에 저장하는 것을 의미합니다.

 

 

위에 있는 코드를 배열로 나타내게 되면 아래 코드와 같이 간단하게 표현할 수 있습니다.

 

 코드를 치기 위한 비용도 적게 들고 가독성도 올라가 좀 더 좋은 코드가 되었습니다.

 

index로 배열 조작하기

 

 많은 데이터들을 배열로 선언했을 때 호출하는 방법도 굉장히 간단합니다.

 

 변수를 호출하는 것처럼 배열 이름을 호출해 주면 됩니다.

 

 

 배열을 호출하게 되면 위와 같이 배열에 있는 모든 데이터들이 출력되게 됩니다.

 

 

 만일 모든 데이터가 아닌 특정 데이터를 가져오고 싶다면 index를 사용하면 됩니다.

 

 위에서 똑같이 배열 이름을 적어주고 대괄호([ ])를 뒤에 적고 이 대괄호 안에 원하는 데이터가 위치한 index를 적어주면 됩니다.

 

 

 0번째에 들어있는 데이터인 banana만 출력된 것을 알 수 있습니다.

 

 프로그래밍에서는 index는 0부터 시작하기 때문에 index 값을 이용할 때 유의하셔야 합니다.

 

 

 이 index를 이용하면 배열 안에 있는 데이터를 바꿀 수도 있습니다.

 

 위 코드에서 console.log안에 넣었던 데이터인 fruit[0]에 다른 데이터를 넣어주면 됩니다.

 

 

 0번째 index를 cherry로 바꾸고 출력하게 되면 배열 맨 앞에 있는 데이터가 cherry로 바뀐 것을 확인할 수 있습니다.

 

배열과 함께 사용할 수 있는 함수들

 

배열을 사용할 때 유용한 배열 함수들에 대해 알아보도록 하겠습니다.

 

 1. pop()

 

   - pop() 함수는 배열 마지막에 있는 데이터를 제거해주는 함수입니다.

 

 

 사용 방법은 사용할 배열의 이름 뒤에 .과 함께 pop()을 붙여주시면 됩니다.

 

 

 pop() 함수를 사용한 후 배열을 출력해보면 마지막에 있던 데이터가 제거된 것을 확인할 수 있습니다.

 

 2. push()

 

   - push() 함수는 배열 마지막에 원하는 아이템을 추가해 주는 함수입니다.

 

 

 사용 방법은 사용할 배열 이름 뒤에 .push()를 써주시고 괄호 안에 넣고 싶은 데이터를 써주시면 됩니다.

 

 

 push() 함수를 사용한 후 배열을 출력해보면 마지막에 원하는 데이터가 추가된 것을 확인할 수 있습니다.

 

3. include()

 

   - include() 함수는 배열 안에 특정 데이터가 존재하는지 확인해 주는 함수입니다.

 

   - 해당 함수는 true / false로 값이 도출됩니다.

 

 

 include()함수는 그 함수 자체에 값이 있기 때문에 console.log안에 통째로 함수를 넣어서 출력해 보도록 하겠습니다.

 

 두 가지 경우를 모두 출력할 때 구분을 위해 앞에 문자열을 각각 추가해주었습니다.

 

 

 console에 출력된 결과를 보시면 배열 안에 존재하는 데이터는 true로 출력이 되고 존재하지 않는 데이터는 false로 출력되는 것을 확인할 수 있습니다.

 

 4. indexOf()

 

   - indexOf() 함수는 데이터의 인덱스를 출력해 주는 함수입니다.

 

 

 사용하는 방법은 (배열 이름).indexOf(찾을 데이터)라고 코드를 작성하여 사용하시면 됩니다.

 

 해당 데이터도 통째로 console에 출력해야 해당 함수의 출력값을 확인할 수 있습니다.

 

 

 apple이라는 변수의 index값이 1이라고 출력되는 것을 확인할 수 있습니다.

 

 5. slice()

 

 - slice() 함수는 배열을 잘라내고 싶을 때 사용합니다.

 

 - slice() 함수는 원래 배열 자체를 잘라내는 게 아니라 배열을 복사한 후 복사한 배열을 잘라냅니다.

 

 

 slice() 함수를 사용하는 방법은 fruit.slice(시작점, 끝점)라고 코드를 작성하여 사용하면 됩니다.

 

 해당 함수가 실행이 되면 시작점에서부터 끝점까지의 데이터를 잘라내게 됩니다.

 

 이때 끝점을 생략하게 되면 시작점으로부터 마지막 데이터까지 잘라내게 됩니다.

 

 해당 함수를 실행한 후 다른 배열에 담지 않으면 사라지기 때문에 해당 함수 자체를 출력하였습니다.

 

 

 잘라내는 데이터중에서 끝점 index에 넣은 데이터는 잘라내는 데이터에 포함되지 않습니다.

 

 첫 번째 배열은 index가 2인 데이터부터 뒤에 있는 모든 데이터들이 사라지고, 두 번째 배열은 index가 1인 데이터부터 index가 3인 데이터 앞까지의 데이터가 사라진 것을 확인할 수 있습니다.

 

 6. splice()

 

 - splice() 함수는 slice() 함수와 똑같이 배열을 잘라내고 싶을 때 사용합니다.

 

 - splice() 함수는 slice() 함수와 다르게 원래 배열을 잘라냅니다.

 

 

 splice() 함수는 안에 들어가는 값이 시작점, 개수입니다.

 

 시작점에는 어떤 index부터 잘라낼 건지에 대한 정보를 넣고 개수에는 시작점으로부터 몇 개의 데이터를 잘라낼건지 입력해 줍니다.

 

 또한 해당 함수는 배열 자체를 잘라내기 때문에 함수를 실행한 후 해당 함수를 console로 출력하면 잘린 배열이 출력됩니다.

 

 

 console에 출력된 배열을 보게 되면 index가 2인 요소로부터 1개의 데이터가 잘린 배열이 출력된 것을 확인할 수 있습니다.

 

7. length

 

 - length는 배열의 크기를 리턴해주는 속성입니다.

 

 

 length 속성을 사용하는 방법은 배열의 크기가 궁금한 배열 뒤에 점(.)으로 연결하여 코드를 작성해 주면 됩니다.

 

 

 console에 출력된 데이터가 배열의 크기인 3을 잘 출력한 것을 확인할 수 있습니다.

 

예제

 

 

 95 종류의 동물이 들어있는 배열에 대해 여러 요구사항에 대한 코드를 작성하는 예제를 풀어보겠습니다.

 

 먼저 배열의 이름은 animals입니다.

 

 질문의 개수는 9가지입니다.

 

 다른 질문들은 위에 있는 함수들을 잘 숙지하셨다면 저절로 풀리는 질문들입니다.

 

 이 중에서 특정 데이터를 활용할 때 indexOf() 함수를 이용하여 해당 데이터의 index를 구해서 사용한다는 생각을 가지고 질문을 생각하면 다 저절로 풀릴 거라고 생각합니다.

 

 위 코드를 보고 이해가 안 되는 부분이 있다면 댓글에 남겨주시면 열심히 답글 달도록 하겠습니다.

 

---

 

 이번 시간에는 자바스크립트에서의 배열에 대해서 살펴보았습니다.

 

 자바를 사용할 때보다 선언과 초기화부터 간단하다는 생각이 들고 코드를 작성하기가 간편하다는 느낌을 받았습니다.

 

 또한 위에 있는 문제에서 푼 방식대로 풀게 되면 코드의 길이가 줄어들어 간단한 코드가 되지만 가독성은 떨어진다는 느낌을 받았습니다.

 

 그래서 프로젝트를 할 때에는 구한 index의 값을 따로 변수에 담아서 사용하거나 주석을 통해 해당 index가 어떤 index이며 어떤 역할을 하는 것인지 표현하는 것이 중요하다는 생각을 했습니다.

 

 이번 포스팅은 여기까지입니다.

 

 끝까지 봐주셔서 감사합니다.😊