자바스크립트 배열과 객체

자바스크립트에서 데이터를 보관하고 조작하는 방법에는 배열과 객체가 있다.

 

 

 

1. 자바스크립트 배열

 

1) 배열에 데이터를 보관하고 조작하는 기본 방법

 

//배열 선언, new Array()로도 가능하지만, []가 간단하고 성능 상 차이도 없어서 []를 많이 쓴다. 

var a = [];

//배열 안에는 함수, 배열, 객체 등 모든 타입이 다 들어갈 수 있다.

var a = [1,2,3,"hello", null, true, []]; 

//배열에 값 저장하기

var a = [1]; //이렇게 값을 저장할 수 있고, 
a.push(2); //push 메서드로 배열에 값을 순차적으로 추가할 수 있다. 
a[1000] = 2; //특정 index 위치에 값을 추가할 수 있다. 

 

//length 속성으로 배열의 길이를 알 수 있다.

console.log(a.length);

 

 

 

이 외에도 유용한 메서드들이 있다.

 

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

b.indexOf(1); //배열의 원소에 특정 값(1)이 있는지 확인 -> 결과값:2 

b.join(); //배열의 원소들을 하나의 문자열로 합칠 수 있다. 
b.join('/'); //원래 콤마(,)로 구분되는 배열을 '/'로 구분되게 합친다. -> 결과값: "1/2/3/4" 

b.concat(2,3); //배열 합치기 -> 결과값:[1,2,3,4,2,3] 
var result = [...b,2,3]; //...을 스프레드 오퍼레이터라고 하며, concat과 똑같이 작용한다. 
result; //[1,2,3,4,2,3]

※주의: concat은 새로운 배열을 반환하는 메서드이다. 이처럼 어떤 메서드는 새로운 배열을 반환하고, 어떤 메서드는 원래 배열의 값을 변경시킨다는 점을 주의해야 한다.

 

 

 

 

2) 배열 탐색하는 방법

 

for문, forEach, map, filter를 이용한다.

 

 - forEach

["apple","tomao"].forEach(function(value){

        console.log(value)

});

 

 - map

var newArr = ["apple","tomato"].map(function(value, index) {

        return index + "번째 과일은 " + value + "입니다";

});

 

- filter

var arr = ["apple","tomato"];

var result = arr.filter(function(value){return value.length > 5});

console.log(result); //결과값: ["tomato"]

 

셋 다 모두 함수를 인자로 받고 있다. 함수의 인자는 value(처리할 현재 요소), index(처리할 요소의 인덱스), array(호출한 배열) 순으로 받을 수 있다. index와 array는 생략 가능하다.

 

 

※ 더 자세한 내용 참고) 자바스크립트 배열의 함수형 메서드 보러가기

 

 

 

 

2. 자바스크립트 객체

 

key, value 구조의 자료구조로, 배열과는 달리 순서가 없다.

 

 

1) 객체에 데이터를 보관하고 조작하는 기본 방법

 

//객체 선언하고 데이터 저장하기

var obj = { name : "enai", age : 20 }

 

//객체 속성 값 호출하기

console.log(obj["name"]); //키값이 name인 값

console.log(obj.age); //키값이 age인 값

 

//객체 속성 추가

obj["email"] = "abc@abc.com"; 

obj.id = 1234; //(추가할 땐 이런 dot notation을 더 많이 사용)

자바스크립트에서 .표기법은 객체를 의미한다.

 

 

//객체 속성 삭제

delete obj.email;

delete obj["id"];

 

 

 

 

2) 객체 탐색하는 방법

 

for-in 구문을 가장 많이 사용한다.

 

- for-in 구문

for(value in obj) {

	console.log(obj[value]);

}

 

 

Object.keys()로 객체의 키 배열을 구해 forEach로 탐색하는 방법도 많이 사용한다.

 

- forEach

Object.keys(obj).forEach(function(key) {

	console.log(obj[key]);

});

 

 

※참고 : 반복문에서 key를 이용하여 객체를 탐색할 때 obj.key로 찾으면 undefined 결과가 나온다.

[]는 안의 값이 문자열이 되어 해당하는 키 값을 찾아가지만, obj.key는 말 그대로 객체 obj의 속성 "key"를 찾기 때문이다. - 참고 사이트

 

 

 

 

 

 

출처)

edwith 부스트코스 웹 프로그래밍

- 자바스크립트 배열

- 자바스크립트 객체