[JS][udemy][multicampus] Arrays

► Object

• 키로 구분된 데이터 집합(data collection)을 저장하는 자료형

---

1.  Arrays

• Ordered collections of values
• 순서가 있는 데이터 집합(data collection)을 저장하는 자료구조

// To make an empty array
let students = [];

// An array of strings
let colors = ['red', 'orange', 'yellow'];

// An array of numbers
let lottoNums = [19, 22, 56, 12, 51];

// A mixed array
let stuff = [true, 68, 'cat', null];

 

• Arrays are indexed : Each element has a corresponding index(counting starts at 0)

let colors = ['red', 'orange', 'yellow'];

colors[0] = 'red';

colors[1] = 'orange';

colors[2] = 'yellow';

colors[3];
>> undefined


// Modifying arrays
colors[3] = 'blue';
colors;
>> ['red', 'orange', 'yellow', 'blue']

 

 

► Array methods

• push - add to end
• pop - remove from end
• shift - remove from start
• unshift - add to start
• forEach - 인자로 주어진 함수(콜백함수)를 배열 요소 각각에 대해 실행, 반복
• map - 배열 요소 전체를 대상으로 함수(콜백함수)를 호출하고, 함수 호출 결과를 배열로 반환, 변형
• concat - merge arrays
• includes - look for a value
• indexOf - just like string.indexOf
• join - creates a string from an array
• reverse - reverses an array
• slice - copies a porition on an array
• splice - removes/replaces elements
• sort - sort an array

// forEach
array.forEach(function (item, index, array) {
	// do something
})

// 콜백함수는 3가지 매개변수로 구성
1. item: 배열의 요소
2. index: 배열 요소의 인덱스
3. array: 배열
// 반환 값: undefined


// 예시
const fruits = ['apple', 'banana', 'coconut']

fruits.forEach(function (item, index, array) {
	console.log(`${item} / ${index} / ${array}`)
})

fruits.forEach((item, index, array) => {
	console.log(`${item} / ${index} / ${array}`)
})

// map
const result = array.map(function (item, index, array) {
	// do something
})

// forEach와 달리 새로운 배열 반환

// 예시 1
const fruits = ['apple', 'banana', 'coconut']

const result = fruits.map(function (fruit) {
	return fruit.length
})

const result2 = fruits.map((fruit) => {
	return fruit.length
})

console.log(result) // [5, 6, 7]

// 예시 2
const numbers = [1, 2, 3]
const doubleNumber = numbers.map((number) => {
	return number * 2
})

console.log(doubleNumber) // [2, 4, 6]

• 콜백 함수 (Callback function) : 다른 함수에 인자로 전달되는 함수, 외부 함수내에서 호출되어 일종의 루틴이나 특정 작업을 진행

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array

Array - JavaScript | MDN

배열 순회 종합

---

2. 참조 타입, 동일성 테스트

 → 이중 등호와 삼중 등호로 메모리의 참조를 확인할 것!

// 메모리에서 같은 것을 참조하고 있음
let nums = [1,2,3]
let numsCopy = nums;

nums.push(4)
nums
>> [1,2,3,4]
numsCopy
>> [1,2,3,4]

nums === numsCopy
>> true

---

3.  const

• 참조를 바꾸거나 재할당할 수 없음
• 배열 안의 콘텐츠는 원하는 대로 바꿀 수 있음

const myEggs = ['brown', 'brown'];
myEggs.push('purple');
myEggs[0] = 'green';

myEggs = ['brown', 'pink'];
>> Uncaught TypeError

---

4.  Nested Arrays

const gameBoard = [
	['X', 'O', 'X'],
    ['O', null, 'X'],
    ['O', 'O', 'X']
]

gameBoard[1][1]
>> null