안녕하세요

스터디4일차 - 배열, 객체 액세스 본문

스터디/유데미 Web Developer 스터디

스터디4일차 - 배열, 객체 액세스

sakuraop 2022. 8. 26. 17:46

175. 배열 개요

176. 배열 임의 접근, 값 변경하기
let colors = ['rad', 'orange']
colors[0] = 'red' // 배열의 인덱스 0 을 'red' 로 정의하면
colors = ['red', 'orange'] // 배열 안의 인덱스 0 에 해당하는 값을 바꿀 수 있습니다.

배열을 넘어선 인덱스에 값을 지정하게 되면 사이의 값들은 empty가 됩니다.
colors[10] = 'indigo' 
colors = ['red', 'oragne', empty x 8, 'indigo']
colors[5] // undefiend 가 출력됩니다.



PRACTICE
const leaderboard = ['Harry', 'Lua', 'Hermione', 'Bellatrix']; //DON'T TOUCH THIS LINE!

leaderboard[1] = 'Luna'
leaderboard[3] = 'Draco'

 





177. 배열 추가 제거 함수
const arr = ['tom']
arr.push('oliver') // 맨 뒤에 추가하기 arr = ['tom', 'oliver']
arr.pop() // 맨 뒤의 요소 제거하기 arr = ['tom']
arr.shift() // 맨 앞의 요소 제거하기 arr = []
arr.unshift('jerry') // 맨 앞에 요소 추가하기 arr = ['jerry']



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


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

 



179. Concat 합치기, indexOf 위치찾기:인덱스반환, includes 포함여부, reverse 배열뒤집기
let cats = ['blue', 'kitty']
let dogs = ['rusty', 'wyatt']

 


-- concat()
cats.concat(dogs) // [ 'blue', 'kitty', 'rusty', 'wyatt'] 둘을 합친 배열이 반환됩니다.
cats = ['blue', 'kitty'] // cats 배열을 바꾸지 않습니다.
let comboParty = dogs.concat(cats) 
comboParty = ['rusty', 'wyatt', 'blue', 'kitty']

 


-- includes() // 포함 여부를 boolean 형태로 반환합니다.
cats.includes('blue')
true
cats.includes('Blue')
false

 


--indexOf() 최초로 찾은 인덱스의 번호를 반환합니다. 없으면 -1을 반환합니다.
cats.indexOf('kitty') // 1

 


comboParty.reverse()  // 배열 자체의 순서를 뒤집습니다. 바꿉니다.
comboParty = ['wyatt', 'rusty', 'kitty', 'blue']

 


-- slice(시작 지점부터 끝까지 ) slice(시작지점, 끝지점 -1 )
let nums = [1, 2, 3, 4, 5, 6, 7]
nums.slice(5) // [6, 7] 5부터 끝까지
nums.slice(3,5) // [4, 5] 3부터 5 전까지니까 3부터 4까지
nums.slice(-3) // [5, 6, 7] 뒤에서 3개

 


-- splice(시작지점, 제거할 수, 추가할 값)
let nums = [1, 2, 3, 4, 5, 6, 7]
nums.splice(2, 2) // nums = [1, 2, 5, 6, 7] 인덱스 2부터 2개의 숫자가 지워집니다.
nums.splice(2, 0, '추가할 값1', '추가할 값2') // nums = [ 1, 2, '추가할 값1', '추가할 값2', 5, 6, 7] 값을 추가하려면 0을 입력하고 추가할 값을 연달아 작성합니다. 솔직히 잘 쓸 일은 없습니다.
nums.splice(2, 2, '삭제됨') // nums = [ 1, 2, '삭제됨', 5, 6, 7] 값을 대체하려면 이렇게 작성합니다.

 


-- sort() UTF-16 에 따라 첫 문자를 기준으로 정렬을 합니다. 
let nums = [ -12, 0, 1, 5000, 25, 6]
nums.sort() // -12, 0, 1, 25, 5000, 6]

 


182. 배열 + const 
배열을 const로 선언하면 배열 자체를 바꿀 수는 없지만, 배열 안의 요소를 제거하거나 추가하는 것은 됩니다.



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

airplaneSeats[3][1] = 'Hugo'

 





186. 객체 리터럴 생성하기



PRACTICE
const product = {
    name : "Gummy Bears",
    inStock : true,
    price : 1.99,
    flavors : ["grape", "apple", "cherry"]
    true : "dad"
}

 




187. 객체 외부 데이터에 엑세스하기
객체의 속성인 키는 모두 문자열로 변하기 때문에 문자열로 접근해야 합니다. 

객체의 키는 모두 문자열로 변환됩니다. true 도 "true"로 변환됩니다.
product["name"] // "Gummy Bears"
product["true"] // "dad"

객체 리터럴에서 []안에는 변수를 쓸 수 있습니다. 
let 이름변수 = "name"
product[이름변수] // "Gummy Bears"
그런데 product.이름변수 // . (punctuation mark)으로는 변수를 이용한 객체 리터럴의 접근이 불가능합니다.