본문 바로가기
내마음대로만들어보자/JS

리스트(배열) & 딕셔너리(객체)

by 소농민! 2021. 8. 12.
728x90

1. 리스트 

    순서를 지켜서 가지고 있는 형태

let a_list = []  // 리스트를 선언. 변수 이름은 역시 아무렇게나 가능! 
 
// 또는, 
 
let b_list = [1,2,'hey',3] 
// 로 선언 가능 
 
b_list[1] 
// 2 를 출력 
b_list[2] 
// 'hey'를 출력 
 
// 리스트에 요소 넣기 
b_list.push('헤이') b_list 
// [1, 2, "hey", 3, "헤이"] 를 출력 
 
// 리스트의 길이 구하기 
b_list.length // 5를 출력

2. 딕셔너리: 키(key)-밸류(value)값의 묶음 

    딕셔너리는 객체로도 불린다. 

let a_dict = {}  // 딕셔너리 선언. 변수 이름은 역시 아무렇게나 가능! 
 
// 또는, 
 
let b_dict = {'name':'Bob','age':21} 
// 로 선언 가능 

b_dict['name'] 
// 'Bob'을 출력 

b_dict['age'] 
// 21을 출력 
 
b_dict['height'] = 180 
// 딕셔너리에 키:밸류 넣기 

b_dict
// {name: "Bob", age: 21, height: 180}을 출력

3. 리스트와 딕셔너리의 조합 

names = [{'name':'bob','age':20},{'name':'carry','age':38}] 
 
// names[0]['name']의 값은? 'bob'
 // names[1]['name']의 값은? 'carry' 
 
new_name = {'name':'john','age':7} 
names.push(new_name) 
 
// names의 값은? [{'name':'bob','age':20},{'name':'carry','age':38},{'name':'john','age':7}] 
// names[2]['name']의 값은? 'john'

※ 딕셔너리의 자주쓰는 또 다른 표현

let b_dict = {'name':'Bob','age':21} 
 
//bob 이름을 꺼낼땐 두 가지 방식으로 깞을 꺼낼 수 있습니다. 
b_dict['name'] 
b_dict.name 
 
둘다 똑같이 딕셔너리의 키값에 접근하여 값을 꺼내옵니다.

 

4. 리스트와 딕셔너리 조합이 필요한 이유

 → 순서를 표시할 수 있고, 정보를 묶을 수 있다.

 

예를들어, 어떤가게에 손님이 찾아와 대기표를 작성하고 온 순서대로 "이름, 휴대폰번호" 를 저장한다고 하자.

 

변수만을 사용하게되면, 

let customer_1_name = '김스파'; 

let customer_1_phone = '01012341234'; 

let customer_2_name = '박르탄'; 

let customer_2_phone = '01043214321'; 

 

알아보기가 쉽지않다. 

 

▶딕셔너리를 활용한다면 다음과 같이 고객 별로 정보를 묶을 수 있고,

let customer_1 = {'name': '김스파', 'phone': '01012341234'}; 

let customer_2 = {'name': '박르탄', 'phone': '01043214321'}; 
 
▶그리고 순서를 나타내기 위해 리스트를 사용하면, 이렇게나 깔끔해진다.

let customer = [     

         {'name': '김스파', 'phone': '01012341234'},     

         {'name': '박르탄', 'phone': '01043214321'}


 
위의 모습만 봐도 깔끔해진 모습을 볼 수 있고, .push함수를 이용해서 간단하게 추가도 가능하다.

 

 

5. JSON 데이터 구조

 ■ 리스트와 딕셔너리가 복합적으로 존재하는 데이터 구조

  

예시)

서울시 Open API JSON 데이터 구조

http://openapi.seoul.go.kr:8088/6d4d776b466c656533356a4b4b5872/json/RealtimeCityAir/1/99

JSON 형태를 보다 편하게 보기위해서 크롬 확장프로그램 중, JSON View를 추가해주면된다.

https://chrome.google.com/webstore/detail/jsonview/chklaanhfefbnpoihckbnefhakgolnmc?hl=ko 

 

JSONView

Validate and view JSON documents

chrome.google.com

 

'내마음대로만들어보자 > JS' 카테고리의 다른 글

조건문 & 반복문  (0) 2021.08.12
자바스크립트 기본 제공함수  (0) 2021.08.12
e.preventDefault() 와 stopPropagation() 의 차이  (0) 2021.06.14
eq()  (0) 2021.06.14
개념정리(Javascript) - 반복문(For in)  (0) 2021.06.03