[JAY⌨️JS] 객체와 배열 Object & Array

[ Array ]와 { Object }는 각각 JS에서 여러 개의 값을 하나의 변수에 저장할 수 있게 하는 데이터 구조이다.
항상 보는 구조지만 비전공자 JS 입문자는 헷갈려서 이해를 위해 정리해본다.

 

1️⃣ [ Array ] 배열

• [대괄호]를 통해 표현. 대괄호 안의 항목의 명칭은 [ element ]
• 0부터 시작해서 [0, 1, 2 ]… 와 같은 형식으로 데이터 저장.
• JS에서는 Array도 Object에 포함! 특별한 Object로는 Array나 Function이 있다.

 

Array 접근 및 수정 예제

// Array 생성
const fruit = [ '🍑Peach', '🍒Cherry', '🍋Lemon'];


// 맨 앞에 신규 element 추가
fruit.unshift('🍇Grape') 

// 맨 뒤에 신규 element 추가
fruit.push('🍌Banana') 
// = ['🍇Grape', '🍑Peach', '🍒Cherry', '🍋Lemon', '🍌Banana']


// 첫 번째 항목에 접근 // =🍇Grape
const fst = fruit[0]; 

// 마지막 항목에 접근 // = 🍌Banana
const lst = fruit[fruit.length - 1];  

// 두 번째 항목 수정
const snd = fruit[1] = '🍎Apple' 



// 앞에서부터 3번째 항목 1개 삭제
fruit.splice(2,1)

// 앞에서부터 2번째 element 삭제 없이 앞에 emement 추가
//fruit.splice(1,0,'🍅Tomato')

// = ['🍇Grape', '🍅Tomato', '🍎Apple', '🍋Lemon', '🍌Banana']

 

 

Array 에서 element 검색

const fruit = ['🍇Grape', '🍅Tomato', '🍎Apple', '🍋Lemon', '🍌Banana', '🍋Lemon']

// Array에서 요소 검색, true, false 반환
const result = fruit.includes('🍎Apple');
console.log(result) // = true


// element가 있는 처음 index를 반환
fruit.indexOf('🍋Lemon') // = 3


// element가 있는 마지막 index를 반환
fruit.lastIndexOf('🍋Lemon') // = 5


// element가 없으면 index '-1'을 반환
fruit.indexOf('🍕Pizza') // = -1


// friends array 중 jay를 전부 삭제
// jay의 index가 -1, 즉 없어질 때 까지 splice(해당 index, 1)개 삭제하는 반복문 실행

let friends = [ '👩🏻‍💻jay','👨🏻‍🍳sam','👩🏻‍⚕️kim','🧑🏻‍🏫joy','👩🏻‍💻jay','👩🏻‍🦰nick' ]

for( let i = -1; friends.indexOf('👩🏻‍💻jay') > i; i++) {
    friends.splice(friends.indexOf('👩🏻‍💻jay'), 1)
}
// = ['👨🏻‍🍳sam', '👩🏻‍⚕️kim', '🧑🏻‍🏫joy', '👩🏻‍🦰nick']

 

 

Array 반복 예제

let colors = ['💛yellow','💚green','💙blue']

// for 반복문 사용
for( let i = 0; i < colors.length; i++ ) {
    console.log(colors[i])
}

// forEach 메소드 사용
colors .forEach(function(fe) {
    console.log(fe);
});

// = 💛yellow, 💚green, 💙blue

 

 

2️⃣ { Object } 객체

• { 중괄호 }를 통해 표현.
• {key : value} 형태로 데이터를 저장.

 

Object 접근 및 수정 예제

//Object 생성
let juice = {
    name: '🍒cherry',
    size: 'Large',
    price: '$10',
}

// Key 접근
let choice = juice.name // = '🍒cherry'

//Key 수정
juice.name = '🍊Orange';

// Key,value 추가
juice.option = '🍹ToGo';

// Key,value 삭제
delete juice.size

// = name: "🍊Orange", option: "🍹ToGo", price:"$10"

 

Object 반복 예제

let favorite = {
    dog : '🐶',
    cat : '😺',
    lion : '🦁'
}

// for-in 반복문 사용
for( let i in favorite ) {
    console.log( `i ❤️ ${i} ${favorite[i]}`)
}
// = i ❤️ dog 🐶, i ❤️ cat 😺, i ❤️ lion 🦁

// Object.keys 메소드 사용
Object.keys(favorite).forEach(function(keys){
    console.log( `my ${keys} ${favorite[keys]}` )
})
// = my dog 🐶, my cat😺, my lion🦁

 

 

 

 

💡 요약

• [ Array ]와 { Object }는 각각 JS에서 여러 개의 값을 하나의 변수에 저장할 수 있게 하는 데이터 구조
• Array도 Object 속성에 포함 된다.
• for in, for of 의 차이도 이어서 포스팅할 예정 🤓