Array 와 Object
여러 데이터를 변수에 저장하려면 지금까지 배웠던 방식으로는 이렇게 해야한다.
var car = '셀토스';
var carPrice = 2700;
var carColor = 'white';세개만 해도 벌써 귀찮은데 만약 100개라면??
다행히 하나의 변수에 여러개의 데이터를 저장하는 방법이 있다.
Array 자료형
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 자료형
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는 이렇게도 쓸 수 있다.
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 차이
데이터를 저장하고 뽑아서 사용할 때의 차이
array는 저장 할 때에는 간단하지만 자료를 뽑아낼 때 불편하다.
var car = ['셀토스', 2700, 'white', '엉차', '엉뜨', 'HUD', '전방추돌방지'];
var car2 = {name:'셀토스', price:2700, color:'white', option1: '엉차',
option2: '엉뜨', option3: 'HUD',option4: '전방추돌방지'};예를 들어 이런 Array와 Object가 있다고 한다면
Array에서 색상을 뽑으려면 색상 데이터가 몇번째에 있었지를 생각해야하지만
Object에서는 color 키값만 기억하면 된다.
순서 개념
array에는 순서 개념이 있고 object에는 없다.
array 자료는 순서개념이 있다보니
가나다 순 정렬
n번 자료부터 n1번 자료까지 자르기
n번 자료 바꾸기
맨뒤나 맨 앞에 자료 넣기
원하는 자료가 들어있나 검색
이런 것들을 할 수 있다.
지금은 이런 것들이 있다라고 알고 필요할 때 검색해서 사용해보자.
✨ 과제. js011.html에서 생성한 car2에 저장된 name과 price를 상품명과 가격 부분에 넣어보자.
<div class="container mt-3">
<div class=" p-3">
<span>상품명</span>
<span>가격</span>
</div>
</div>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에 넣어서 완성해보자. (반복문 사용)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.7.0.min.js" integrity="sha256-2Pmvv0kuTBOenSvLm6bvfBSSHrUJ+3A7x6P5Ebd07/g=" crossorigin="anonymous"></script>
</head>
<body>
<div class="card-group container">
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5>Card title</h5>
<p>가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5>Card title</h5>
<p>가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
<div class="card">
<img src="https://via.placeholder.com/600">
<div class="card-body">
<h5>Card title</h5>
<p>가격 : 70000</p>
<button class="btn btn-danger">주문하기</button>
</div>
</div>
</div>
<script>
var products = [
{ id : 0, price : 70000, title : 'Blossom Dress' },
{ id : 1, price : 50000, title : 'Springfield Shirt' },
{ id : 2, price : 60000, title : 'Black Monastery' }
];
</script>
</body>
</html>밑에 보고 따라치지 말고 혼자서 해보자
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 변수 활용
자바 스크립트에선 덧셈기호로 문자를 연결할 수 있다.
console.log(1+"3"); //'13' 출력 된다.숫자 + 숫자는 덧셈
숫자 + 문자는 숫자를 문자로 바꿔서 연결해준다.
var a = '풀스택개발자';
console.log('문자' + a + '문자'); // '문자풀스택개발자문자' 출력된다.이렇게 문자 사이에 변수를 넣어서 활용할 수 있다.
변수 양옆에 + 쓰는게 귀찮다면
console.log(`문자 ${a} 문자`);// '문자 풀스택개발자 문자' 출력된다.이렇게 백틱 기호 ` 사이에 문자열과 ${변수}를 사용하면 된다.
백틱기호는 숫자1 왼쪽키 ~ 밑에 있는 키다.
Last updated