Array(배열) and Object(객체)

1. Array(배열)

 

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

 

const daysOfWeek = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];
console.log(daysOfWeek); // [ 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun' ]
console.log(daysOfWeek[2]);  // Wed
console.log(daysOfWeek[100]); // undefined

 

//배열 선언, 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. Object(객체)

 

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

 

// iuInfo는 Object 이다.
const iuInfo = {
 name: "아이유",
  age: 27,
  gender: "Female",
  favMovies: ["터미네이터", "조커", "겨울왕국2"], // Object와 Array를 혼용 가능
  favFoods: [ // 이하 동문
     {
       name: "Kimchi",
        fatty: false
     },
     {
       name: "Cheese",
        fatty: true
     }
  ]
};
console.log(iuInfo); // { name: '아이유', age: 27, gender: 'Female' ... }
console.log(iuInfo.gender); // Female
iuInfo.gender = "Male";
console.log(iuInfo.gender); // Male
console.log(iuInfo.favFood[0].fatty); // false

 

 

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를  속성(property) 라고 하고

함수를 가지고 동작하는 값을 가지는 key를 메서드(method) 라고 한다.

 

 

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

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