자바스크립트 배열

• 들어가기 전에 자바스크립트에서 데이터를 보관하고 조작하는 방법은 배열과 객체를 다루는 것입니다.자바스크립트에서 배열은 가장 많이 사용되는 자료구조(Data Structure)입니다.

---

학습 목표

1. 자바스크립트 배열을 다루는 방법을 알아봅니다.

핵심 개념

• array
• array method

학습하기

배열의 선언

자바스크립트 배열의 선언은 간단합니다. var a =[]; // 배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음 var a = [1,2,3,"hello",null,true,[]]; new Array() 문으로 선언할 수도 있지만, 보통은 간단히'[]'를 사용합니다. 배열에는 length 속성이 있어 그 길이를 쉽게 알 수 있습니다. 배열에 원소 추가는 index 번호와 함께 추가할 수 있습니다. var a = [4]; a[1000] = 3; console.log(a.length); //1001 console.log(a[500]); //undefied 배열은 사실 push 메서드를 통해서 뒤에 순차적으로 추가할 수 있습니다. var a = [4]; a.push(5); console.log(a.length);

배열의 유용한 메서드들

배열은 순서가 있고, push와 같은 메서드를 제공하고 있어, 추가/삭제/변경이 용이합니다. 그밖에도 많은 메서드가 있습니다. indexOf, join, slice, concat의 활용을 좀 더 알아보는게 좋습니다. `//배열의 원소에 특정 값이 들어 있는지 확인할 수 있다. [1,2,3,4].indexOf(3) //2

//배열의 문자열로 합칠 수 있다. [1,2,3,4].join(); //"1,2,3,4"

//배열을 합칠 수 있다. [1,2,3,4].concat(2,3); //[1,2,3,4,2,3]

var origin = [1,2,3,4];

var result = [...origin,2,3]//스프레드 오퍼레이터 ES6

console.log(origin, result);` 이밖에도 배열에는 유용한 메서드가 많습니다.배열의 여러 가지 메서드도 모두 함수이므로 반환 값이 존재합니다. 주의할 점은 어떤 메서드는 새로운 배열을 반환하고, 어떤 메서드는 원래 배열의 값을 변경시킨다는 것입니다. 예를 들어서 concat은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환합니다.

배열 탐색 - (foreach, map, filter)

배열의 순회는 for 문을 사용하거나, forEach와 같은 메서드를 통해서 할 수 있습니다. 다른 프로그래밍 언어와 비슷한 문법인 자바스크립트 for문은 여러분들이 금방 찾아서 학습이 가능할 것 같아 생략했고요. forEach를 통한 배열 탐색을 공부할 필요가 있습니다. //forEach는 함수를 인자로 받고 있어요. ["apple","tomato"].forEach(function(value) { console.log(value) }); forEach를 사용하면 더는 배열의 길이를 체크하는 for문을 추가하거나, i++과 같은 증가시켜주는 코드가 필요없습니다. 이 부분은 알아서 자바스크립트 파서가 처리해줍니다. 결국, for문을 쓰면서 생길 수 있는 실수를 줄여줍니다. 그리고 코드의 가독성도 좋아서 읽기 편한 코드를 만들 수 있습니다. for문과 성능 차이도 있을 수 있지만 미미한 차이입니다. 한 가지 더 특이한 점은 forEach와 같은 메서드가 함수를 인자로 갖는다는 점입니다.이런 특징은 자바스크립트에서 많이 나오는 데요, 배열에서는 이런 식으로 동작하는 메서들이 꽤 있습니다. filter, map은 아주 중요하고요. 이 부분을 이해한 후에 reduce를 공부고, some, every 등도 같이 알아보면 좋습니다. 그리고 여기 소개되고 있는 메서드들의 반환값도 주의해야 합니다. 어떤 메서드는 새로운 배열을 반환하기도 합니다. 아래는 새로운 배열을 반환하는 map메서드 예제입니다. var newArr = ["apple","tomato"].map(function(value, index) { return index + "번째 과일은 " + value + "입니다"; }); console.log(newArr)// 여러분들이 실행해보세요 그리고 더 학습하고 싶은 부분이 생기면 자바스크립트 함수형 프로그래밍을 공부하는 것도 좋습니다. 지금 단계에서는 forEach, map, filter 메서드는 반드시 이해해야 합니다. 그리고 익숙해질 때까지 앞으로 나오는 반복문은 이 메서드들을 이용해보는 걸 추천합니다. 아 물론 for문과 while 문을 사용한 배열의 탐색을 잘 모른다면, 그것부터 익숙하게 연습하세요!