[ Week 7 ] JS Arrays and Structured Data

Lecture : Media Computation

Date : week 7, 2024/04/15 

Topic : Arrays and Structured Data

 

 

1. JavaScript Array  
2. JavaScript Array vs Python List 

3. Array functions

 

 

---

1. JavaScript Array

(MDN) 배열(Array)이란 일반적으로 "리스트같은 객체(list-like objects)"라고 기술됩니다. 배열은 보통 리스트에 저장된 다수의 값들을 포함하고 있는 하나의 객체입니다. JavaScript 배열은 크기를 조정이 가능하고, 다양한 데이터 형식을 혼합하여 저장할 수 있습니다.

 

 

1) array 생성 

- 대괄호 [ ]를 이용하여 array 객체 생성 

- 하나의 array에 여러 data type을 포함할 수 있음 

let fruits = ['apple', 'orange', 'banana'];
let info = ["Elice", "Korea", 40, [95, 80, 100]];
console.log(fruits[0], info[1])

## index 접근해서 element 수정하기
info[1] = "US"
console.log(info[1])

 

 

2) array attribute와 method 

① array.length 

## array 길이
info.length

## length를 이용해 array 길이 늘리기
## 입력하지 않은 원소들은 undefined type으로 들어감
info.length = 10

## length를 이용해 array 길이 줄이기
## 기존에 있던 원소들 자동 삭제됨
info.length = 2

 

 

② 기본적인 method 

## 원소 index 확인
fruist.indexOf('orange')

## 마지막 element 추가/삭제
fruits.push("grape")
fruits.pop()

## 처음 element 추가/삭제
fruits.unshift("grape")
fruits.shift()

## 배열 복사
let new_fruits = fruits.slice()

 

 

③ array인지 확인하기 

Array.isArray(fruits)
fruits instanceof Array

 

 

④ 모든 element에 반복 접근 

## for loop 안에서 array 각 원소에 접근
for (let fruit of fruits){
	console.log(fruit)
}

## forEach method 이용
fruits.forEach(function(element) {
	console.log(element)
})

 

 

⑤ splice method 

- splice(start index, deleteCount, new element1, new element2, ,,,)
- splice(변경을 시작할 index, 제거할 원소 수, 추가할 원소) 

## 제거 없이 1개의 element 추가
fruits.splice(2, 0, "grape")
console.log(fruits)

## 제거 없이 2개의 element 추가
fruits.splice(2, 0, "lemon", "pear")
console.log(fruits)

## 삽입없이 3개의 element 제거
fruits.splice(2, 3)
console.log(fruits)

 

 

 

 

 

2. JavaScript Array vs Python List 

- Python에선 Sequence type의 데이터 list를 이용해 배열을 표현
- Object에 해당되는 Array를 이용해 배열 표현 

	Python List	JavaScript Array
type	list	object
끝에 원소 추가	list.append(new element)	array.push(new element)
중간에 원소 삽입	list.insert(index, new element)	array.splice(index, 0, new element)
끝에 원소 삭제	list.pop()	array.pop()
첫번째 해당 원소 삭제	list.remove(element)	array.splice(array.indexOf(element), 1)
길이	len(list)	array.length
index 확인	list.index(element)	array.indexOf(element)
sorting	list.reverse() list.sort()	array.reverse() array.sort()
복사	list.copy()	array.slice()

 

 

 

 

 

 

3. Array functions

① array.map( 함수 ) 

- array의 모든 원소마다 주어진 함수를 적용 

fruits = ['apple', 'orange', 'banana']
nums = [1, 2, 3, 4, 5]

fruits.map( x => x.toUpperCase())
nums.map(Math.sqrt)

 

② array.find( 조건 ) 

- array 원소 중 주어진 조건을 만족하는 가장 첫 원소를 리턴 

fruits.find( x => x.includes("a"))
nums.find( x => x > 1)

 

③ array.filter( 조건 )

- array 원소 중 주어진 조건을 만족하는 모든 원소를 리턴 

fruits.filter( x => x.includes("a"))
nums.filter( x => x > 1)

 

④ array.reduce( 함수 ) 

- array의 모든 원소를 순회하며 주어진 함수를 적용해 acculation 계산을 수행 

fruits.reduce( (sentence, x) => sentence + x + ' ', '')
nums.reduce( (total, x) => total + x, 0)

 

 

 

 

 

 

 

 

 

Reference

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
https://developer.mozilla.org/ko/docs/Learn/JavaScript/First_steps/Arrays#%EC%9C%A0%EC%9A%A9%ED%95%9C_%EB%B0%B0%EC%97%B4_%EB%A9%94%EC%84%9C%EB%93%9C
https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-7-Arrays#1-foreach
https://agvim.wordpress.com/2017/08/22/python-list-vs-javascript-array/
https://medium.com/vuno-sw-dev/python-vs-javascript-array-methods-comparison-e3056cda9766