# Array 와 Object
여러 데이터를 변수에 저장하려면 지금까지 배웠던 방식으로는 이렇게 해야한다.
```javascript
var car = '셀토스';
var carPrice = 2700;
var carColor = 'white';
```
세개만 해도 벌써 귀찮은데 만약 100개라면??
다행히 하나의 변수에 여러개의 데이터를 저장하는 방법이 있다.
## Array 자료형
```javascript
var car = ['셀토스', 2700, 'white'];
console.log(car); //출력 결과 ['셀토스', 2700, 'white']
console.log(car[0]); //출력 결과 '셀토스'
//데이터 변경
car[0] = '페라리';
console.log(car[0]); //출력 결과 '페라리'
//데이터 추가
car[3] = '엉차';
console.log(car[3]); //출력 결과 '엉차'
```
## Object 자료형
```javascript
var car2 = {name:'셀토스', price:2700, color:'white'};
console.log(car2['name']); //출력결과 '셀토스'
console.log(car2.price); //출력결과 2700
//데이터 변경
car2.name = '포르쉐';
//데이터 추가
car2.option = '엉차';
console.log(car2.name, car2.option); //출력결과 '포르쉐' , '엉차'
```
Object는 key: value 형태로 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입
Array 와 Object는 이렇게도 쓸 수 있다.
```javascript
var carCollection = [{name:'셀토스', price : 2700},
{name:'포르쉐',price: 10000},
{name:'람보르기니',price: 10000}]
var collection = {car : ['셀토스', 2700, 'white'],
coin : ['대한민국', 50]}
console.log(carCollection);
console.log(collection);
```
## Array와 Object 차이
1. 데이터를 저장하고 뽑아서 사용할 때의 차이
array는 저장 할 때에는 간단하지만 자료를 뽑아낼 때 불편하다.
```javascript
var car = ['셀토스', 2700, 'white', '엉차', '엉뜨', 'HUD', '전방추돌방지'];
var car2 = {name:'셀토스', price:2700, color:'white', option1: '엉차',
option2: '엉뜨', option3: 'HUD',option4: '전방추돌방지'};
```
예를 들어 이런 Array와 Object가 있다고 한다면
Array에서 색상을 뽑으려면 색상 데이터가 몇번째에 있었지를 생각해야하지만
Object에서는 color 키값만 기억하면 된다.
2. 순서 개념
array에는 순서 개념이 있고 object에는 없다.
array 자료는 순서개념이 있다보니
* 가나다 순 정렬
* n번 자료부터 n1번 자료까지 자르기
* n번 자료 바꾸기
* 맨뒤나 맨 앞에 자료 넣기
* 원하는 자료가 들어있나 검색
이런 것들을 할 수 있다.
javascript array methods
지금은 이런 것들이 있다라고 알고 필요할 때 검색해서 사용해보자.
{% embed url="" %}
✨ 과제. js011.html에서 생성한 car2에 저장된 name과 price를 상품명과 가격 부분에 넣어보자.
{% code title="js011.html" %}
```html
상품명가격
```
{% endcode %}
carCollection이나 collection 처럼 복잡한 구조에 데이터는 어떻게 뽑을 수 있을까?
var carCollection = [{name:'셀토스', price : 2700},
{name:'포르쉐',price: 10000},
{name:'람보르기니',price: 10000}]
var collection = {car : ['셀토스', 2700, 'white']
,coin : ['대한민국', 50]}
console.log(carCollection[0].name); //출력 결과 '셀토스'
console.log(collection.coin[0]); //출력 결과 '대한민국'
지금까지 배운게 어디에 쓰이는가?
쇼핑몰 사이트를 보면서 얘기해보자.
✨과제. js013.html을 생성하고 아래의 코드를 붙여넣은 뒤 각 상품의 title 과 price를 html에 넣어서 완성해보자. (반복문 사용)
{% code title="js013.html" %}
```html
Title
Card title
가격 : 70000
Card title
가격 : 70000
Card title
가격 : 70000
```
{% endcode %}
밑에 보고 따라치지 말고 혼자서 해보자
```javascript
for(var i =0; i< products.length; i++){
cardChange(i);
}
function cardChange(num) {
document.querySelectorAll('.card-body h5')[num].innerHTML = products[num].title;
$('.card-body p').eq(num).html(products[num].price);
}
```
💎javascript 변수 활용
자바 스크립트에선 덧셈기호로 문자를 연결할 수 있다.
```javascript
console.log(1+"3"); //'13' 출력 된다.
```
숫자 + 숫자는 덧셈
숫자 + 문자는 숫자를 문자로 바꿔서 연결해준다.
```javascript
var a = '풀스택개발자';
console.log('문자' + a + '문자'); // '문자풀스택개발자문자' 출력된다.
```
이렇게 문자 사이에 변수를 넣어서 활용할 수 있다.
변수 양옆에 + 쓰는게 귀찮다면
```javascript
console.log(`문자 ${a} 문자`);// '문자 풀스택개발자 문자' 출력된다.
```
이렇게 백틱 기호 \` 사이에 문자열과 ${변수}를 사용하면 된다.
백틱기호는 숫자1 왼쪽키 \~ 밑에 있는 키다.
