🥚 JavaScript 배열

Array

배열은 순서가 있는 값의 집합임.

//빈배열
let students = [];
//문자열로 이루어진 배열
let colors = ['red', 'orange', 'yellow'];
//숫자로 이루어진 배열
let lottoNums = [19, 22, 56, 12, 51];
//여러 type이 섞인 배열
let stuff = [true, 68, 'cat', null];

🖥️  로또 번호 연습

배열을 생성하는 연습을 해보겠습니다. lottoNumbers 라는 변수를 정의하고 그 값을 6개의 숫자가 포함된 배열로 설정하세요. 단순한 작업이지만 중요한 첫 걸음이 될 수 있습니다!

let lottoNumbers = [1,2,3,4,5,6];

Array Index

배열은 항상 0부터 시작하는 index를 가짐!

배열의 값에 접근할때 index로 접근할 수 있음

lottoNumbers[0]
> 1
lottoNumbers[5]
> 6
lottoNumbers[100]
> undefined

let days = ['Monday', 'Tuesday', 'Wednesday']
days[1][0]
> "T"

days[5] = "aa";
// ['Monday', 'Tuesday', 'Wednesday', empty x 2,'aa' ]

배열은 인덱스화되어 있으며 모든 요소에는 상응하는 숫자가 있음. (0부터, 최대인덱스는 배열의 length-1값과 같음!)

인덱스를 사용해 특정 요소를 찾거나 새 값을 해당 칸에 넣어줄 수 있음!

🖥️  배열 인덱스 연습

4개의 문자열로 구성된 leaderboard 배열을 제공해 드렸습니다. 1번 라인을 건드리지 않고 다음과 같이 변경하세요.

• 안타깝게도 저는 leaderboard 배열에서 두 번째 이름의 철자를 잘못 입력했습니다. 원래 쓰려고 했던 이름은 "Lua"가 아니라 "Luna"였습니다. 이름을 'Luna'로 업데이트해 주세요
• Bellatrix가 순위표에서 탈락하고 그 자리가 Draco로 대체되었습니다! 배열의 마지막 요소가 'Bellatrix' 대신 'Draco'가 되도록 업데이트하세요.

const leaderboard = ['Harry', 'Lua', 'Hermione', 'Bellatrix'];
leaderboard[1] = "Luna";
leaderboard[3] = "Draco";

Array Method

Push & Pop

배열 끝의 항목을 추가하거나 제거할 수 있음.

let movieLine = ['tom','nancy']
movieLine[2] = 'pablo'
// ['tom','nancy','pablo']

movieLine.push('oliver')
// ['tom','nancy','pablo','oliver']

movieLine.push('harry', 'hermione') //두개도 추가 가능
// ['tom','nancy','pablo','oliver','harry', 'hermione']

movieLine.pop()
> "hermione" //맨 마지막 원소를 보여주고, 배열에서 지워줌
movieLine
> // ['tom','nancy','pablo','oliver','harry']

문자열 메소드는 현재 메소드가 변화하지는 않았음. 배열 메소드는 배열을 업데이트하고 업데이트된 배열값을 반환해줌!!

Shift & Unshift

shift : 배열의 시작에서 항목을 제거함

movieLine.shift()
> "tom" //제거된 항목이 나타남
movieLine
> ['nancy','pablo','oliver','harry']

unshift : 배열의 시작에서 항목을 추가함

movieLine.unshift("VIP")
movieLine
> ['VIP','nancy','pablo','oliver','harry']

🖥️ Push/Pop/Shift/Unshift 연습

planets라는 변수를 제공해 드렸습니다. 안타깝게도 저는 태양계에 대해서는 무지하여 몇 가지 실수를 저질렀습니다. planets배열을 수정하는 데 도움을 주세요! 방금 배운 배열 메서드를 사용하여 다음을 작업을 수행하세요.

1. planets배열에서 첫 번째 요소인 "The Moon"을 제거하세요. 달은 행성이 아니니까요!
2. planets배열의 맨 끝에 "Saturn"을 추가하세요.
3. planets배열의 첫 번째 요소로 "Mercury"를 추가하세요.

작업을 완료한 후에는 planets배열이 다음과 같아야 합니다. "Mercury", "Venus", "Earth", "Mars", "Jupiter", "Saturn"

const planets = ['The Moon','Venus', 'Earth', 'Mars', 'Jupiter'];

planets.shift()
planets.push("Saturn")
planets.unshift("Mercury")

Concat & indexOf & includes & reverse

Concat : 2개의 배열을 붙여서 새로운 배열을 만듬 (배열을 합치되 기존의 배열을 수정하지는 않음)

let cats = ["blue","kitty"]
let dogs = ["rusty","wyatt"]

cats.concat(dogs)
> ["blue","kitty","rusty","wyatt"]
cats
> ["blue","kitty"]

includes : 불리언 메소드로 true나 false로 응답함. 배열에 특정 값이 포함되어있는지 true/false로 반환해줌

cats.includes("blue")
> true
cats.includes("Blue")
> false

indexOf : 배열의 인덱스 값을 반환함.

combo = ["blue","kitty","rusty","wyatt"]
combo.indexOf("kitty")
> 1
combo.indexOf("aaaa")
> -1

reverse : 배열을 뒤집어줌. (원본 배열을 수정함)

combo.reverse()
> ["wyatt","rusty","kitty","blue"]
combo
> ["wyatt","rusty","kitty","blue"]

Slice & Splice

slice : 배열의 일부를 가져오고 싶을때 사용 (원본 배열은 수정하지 않음)

let colors = ['red','orange','yellow','green','blue']
let coolColors = colors.slice(3) 
> ['green','blue']
colors
> ['red','orange','yellow','green','blue']
colors.slice(-2)
> ['green','blue']

⇒ slice(시작인덱스, 끝인덱스) 시작인덱스는 포함, 끝인덱스는 포함안함

⇒ 인덱스를 음수로 쓰면 끝에서부터 시작해서 불러올 수 있음

splice : 기존 요소들을 제거하거나 대체하거나 새로운 요소들을 추가해서 배열의 내용을 변경함 (slice랑 비슷하지만 더 다양하게 쓰임)

colors.splice(2,1) //splice (시작점, 지울개수)
> ['red','orange','green','blue'] //yellow지움
colors.splice(1,0,"red-orange") //splice(시작점,지울개수,추가할요소)
> ['red','red-orange','orange','green','blue']
colors.splice(2,0,"aaa","bbb") //여러개도 추가 가능
> ['red','red-orange',"aaa","bbb",'orange','green','blue']

sort : 정렬해주는 메소드 (만약 문자열과 숫자등이 섞여있는 복잡한 배열이라면 각각의 요소를 모두 문자열로 변환한 후에 UTF 16코드 유닛 값을 비교하게됨)

let scores = [1,70,100,2,-12,0]
scores.sort()
> [-12,0,1,2,70,100]

참조 타입과 동일성 테스트

'hi' === 'hi'
> true
['hi','bye'] === ['hi','bye']
> false
[1] === [1]
> false

⇒ 배열을 선언하면 javascript메모리에서 이 배열을 생성하고 고유한 주소인 참조를 갖게됨! 두개의 참조를 비교하므로 false라고 뜸!

배열 + const

const nums =[1,2,3] //배열의 참조값이 nums에 들어감

⇒ nums의 배열을 수정해도 고유한 주소값인 참조는 변하지않음!

중첩 배열

배열안에 여러 배열을 선언할 수 있음!

const board = [
	['O' , null , 'X'],
	[null, 'X', 'O'],
	['X' , 'O', null]
]
board[1]
> [null, 'X', 'O']
board[1][1]
> 'X'

🖥️ 중첩된 배열 연습

항공편의 좌석 열을 나타내는 airplaneSeats라는 배열을 제공해 드렸습니다. 친구 Hugo가 우리 항공편의 좌석을 예약하려고 합니다. 다행히도 중간 좌석이 하나 있습니다(현재는 null로 설정되어 있습니다). 현재 null인 배열 요소를 대신 "Hugo"로 업데이트하세요. 

const airplaneSeats = [
    ['Ruth', 'Anthony', 'Stevie'],
    ['Amelia', 'Pedro', 'Maya'],
    ['Xavier', 'Ananya', 'Luis'],
    ['Luke', null, 'Deniz'],
    ['Rin', 'Sakura', 'Francisco']
];

airplaneSeats[3][1]="Hugo"