[FE] 03. JavaScript 배열, 객체

3. 웹 애플리케이션 개발 - JavaScript

 

 

* JavaScript 배열

1. new Array() 문으로 선언할 수도 있지만 잘 사용하지 않는다. 보통은 간단히 var a = [] 를 사용한다.

var a = [];
//배열 안에는 모든 타입이 다 들어갈 수 있다. 함수도 배열 안에 배열도, 배열 안에 객체도 들어갈 수 있음.
var a = [1,2,3,"hello", null, true, []];

2. 배열의 length 속성으로 길이를 알 수 있다. (배열의 index는 0부터 시작한다.)

3. 배열의 배열(중첩)은 [[{}]] 이와 같이 표현한다.

4. 배열에 원소 추가는 index번호와 함께 추가한다.

var a = [4];
a[1000] = 3;
console.log(a.length); //결과: 1001
console.log(a[500]); //결과: undefined

 

5. 배열은 push메서드를 통해서 뒤에 순차적으로 추가할 수 있다.

var a = [4];
a.push(5);
console.log(a.length);

 

---

* 배열의 메서드

배열은 순서가 있고 push 와 같은 메서드를 제공하고 있어 추가, 삭제, 변경에 용이하다.

 

- indexOf(): 배열 안에 원소 확인하기 (indexOf를 했을때 -1이 나온다면 배열 안에 없는 값이다.)

- join(): 배열을 문자열로 합쳐서 반환하기 

- 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]

 

배열의 여러 가지 메서드는 모두 함수이므로 반환값이 존재한다.

주의할 점은 어떤 메서드는 새로운 배열을 반환하고, 어떤 메서드는 원래 배열의 값을 변경 시킨다는 것.

concat은 원래 배열은 그대로 있고 합쳐진 새로운 배열을 반환하므로 주의해야 한다.

//origin과 changed는 같은 배열원소를 가지고 있지만 두 개가 가리키는 메모리 주소는 다르다.
//즉 reference가 다름
var origin = [1,2,3,4];
var changed = origin.concat();  //[1,2,3,4]
console.log(origin === changed);  //[1, 2, 3, 4] [1, 2, 3, 4] false

 

---

 

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

배열의 순회는 for문을 사용하거나 forEach와 같은 메서드를 통해서 할 수 있다.

 

- forEach를 통한 배열 탐색

//forEach는 함수를 인자로 받고 있음
["apple","tomato"].forEach(function(value) {
   console.log(value)
});

forEach를 사용하면 더는 배열의 길이를 체크하는 for문을 추가하거나, i++과 같은 증가시켜주는 코드가 필요 없다.

이 부분을 알아서 자바스크립트 파서가 처리하기 때문이다.

for문을 쓰면서 생길 수 있는 실수를 줄일 수 있다는 것이 forEach의 이점이다. 또, forEach와 같은 메서드는 함수를 인자로 가질 수 있다.

 

- 새로운 배열을 반환하는 map 메서드

var newArr = ["apple","tomato"].map(function(value, index) {
   return index + "번째 과일은 " + value + "입니다";
});
console.log(newArr);

map은 리턴값이 존재하는데 이 리턴값에 수식을 사용할 수 있다. 새로운 배열을 반환하며 원래 값은 그지로 유지 된다.

 

** filter, map는 매우 중요하므로 꼭 알아두기

reduce, some, every도 추가로 알아보기

[참고] https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

 

---

 

* JavaScript 객체

배열과 달리 순서는 없지만 key, value 구조가 있는 자료구조이며 데이터를 보관할 때 많이 사용한다.

 

JavaScript로 데이터를 표현하기 위해서는 Array, Object를 사용한다.

Object형태는 {}로 그 자료를 표현하며, 서버와 클라이언트 간에 데이터를 교환할 때 Object 포맷과 비슷한 방법으로 데이터를 보낸다.

 

 

* 객체선언

링크 바로가기 => 자바스크립트 객체 사용

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

 

- JSON

자바스크립트 객체구조를 본따 서버와 웹브라우저 간에 데이터를 주고받을 때 정의한 것. JSON은 데이터를 보관하기 매우 편리하여 클라이언트와 서버간의 데이터를 주고받는 형식에 사용된다.

링크 바로가기 => JSON example

 

 

* 객체의 추가/삭제

const myFriend = {key : "value"};
//value 출력 console.log(myFriend["key"]);
console.log(myFriend.key);
//추가
myFriend.age = 34;
//추가한 정보 출력
console.log(myFriend.age);

혹은 console.log(myFriend["key"]);로도 가능하다. 이 경우 value가 출력된다.

그냥 [key]로 넣으면 오류가 발생한다. 배열과는 달리 " "를 꼭 넣어주기!

추가하는 방법은 []보다 dot notation을 더 많이 사용한다.

 

객체 안에는 여러가지 형태의 값을 담을 수 있다. 배열을 담는 것도 가능하며 배열 안에 또 객체가 들어갈 수 있다.

 

 

* 객체의 탐색

• for- in 구문

var obj = {"name":"codesquad" , age :22, data: [1,2,3,4,5]};

for(value in obj) {
  console.log(obj[value]);
}

//결과
//"codesquad"
//22
//[1, 2, 3, 4, 5]

 

객체를 탐색하는 방법으로는 Object.keys()를 이용한 후 forEach로 탐색하는 방법도 많이 쓰인다.

console.log(Object.keys(obj)); //key값이 배열로 출력된다.

 

---

 

* 실습

const data = {

    "debug": "on",

    "window": {

        "title": "Sample Konfabulator Widget",

        "name": "main_window",

        "width": 500,

        "height": 500

    },

    "image": { 

        "src": "Images/Sun.png",

        "name": "sun1",

        "hOffset": 250,

        "vOffset": 250,

        "alignment": "center"

    },

    "text": {

        "data": "Click Here",

        "size": 36,

        "style": "bold",

        "name": "text1",

        "hOffset": 250,

        "vOffset": 100,

        "alignment": "center",

        "onMouseUp": "sun1.opacity = (sun1.opacity / 100) * 90;"

    }

}

 

 

위에서 숫자 타입으로만 구성된 요소를 뽑아 배열을 만들어보기.

Loop 돌면서 typeOf 사용하여 배열에 추가하기

[{

"id": 1,

"name": "Yong",

"phone": "010-0000-0000",

"type": "sk",

"childnode": [{

"id": 11,

"name": "echo",

"phone": "010-0000-1111",

"type": "kt",

"childnode": [{

"id": 115,

"name": "hary",

"phone": "211-1111-0000",

"type": "sk",

"childnode": [{

"id": 1159,

"name": "pobi",

"phone": "010-444-000",

"type": "kt",

"childnode": [{

"id": 11592,

"name": "cherry",

"phone": "111-222-0000",

"type": "lg",

"childnode": []

},

{

"id": 11595,

"name": "solvin",

"phone": "010-000-3333",

"type": "sk",

"childnode": []

}

]

}]

},

{

"id": 116,

"name": "kim",

"phone": "444-111-0200",

"type": "kt",

"childnode": [{

"id": 1168,

"name": "hani",

"phone": "010-222-0000",

"type": "sk",

"childnode": [{

"id": 11689,

"name": "ho",

"phone": "010-000-0000",

"type": "kt",

"childnode": [{

"id": 116890,

"name": "wonsuk",

"phone": "010-000-0000",

"type": "kt",

"childnode": []

},

{

"id": 1168901,

"name": "chulsu",

"phone": "010-0000-0000",

"type": "sk",

"childnode": []

}

]

}]

}]

},

{

"id": 117,

"name": "hong",

"phone": "010-0000-0000",

"type": "lg",

"childnode": []

}

]

}]

 

}]

Ex) type이 sk인, name으로 구성된 배열만 출력하기