[JS] 배열(Array), 객체(Object)

배열(Array)

- 순서가 있는 데이터를 저장할 때 사용

- 데이터 모음이 논리적으로 정의된 규칙에 의해 나열된 것

 

배열의 생성

- 대괄호([])를 이용해 배열을 생성 할 수 있다

- 각각의 데이터는 콤마(,)로 구분한다

- 각각의 데이터를 배열의 요소(element)라고 한다

- 모든 데이터는 배열의 요소로서 존재할 수 있다(문자열, 숫자, 배열....등)

let age = [14,17,12,23,20]

- 배열의 각 요소는 index* 값을 가진다

: index는 각 요소에 순서를 부여하고, 해당 요소에 접근이 가능하도록 한다

: 0번부터 시작한다

 

인덱스번호로 배열의 요소에 접근하는 방법

// 변수명[index번호]
let age = [14,17,12,23,20]
console.log(age[0]) // 14
console.log(age[4]) // 20

 

배열의 Property*

: 데이터 타입마다 가지고 있는 고유한 속성

 

array.length

- 배열의 길이를 나타냄 (배열 내 요소의 개수를 알려줌)

- index번호와 달리, 1번부터 시작함

let age = [14,17,12,23,20]
console.log(age.length) // 5

 

배열 메서드(Method)

메서드란?

: 해당 데이터가 특정한 동작(데이터를 추가, 데이터 분류, 삭제 등)을 담은 명령

: 어떠한 기능을 가지고 있는 명령

 

Array.push()

- 배열의 가장 뒤에 데이터를 추가해주는 메서드

let age = [14,17,12,23,20]
age.push(21)
console.log(age) // 숫자 21이 추가된 배열

 

Array.pop()

- 배열의 가장 끝에 있는 데이터를 삭제해주는 메서드

let age = [14,17,12,23,20]
age.pop()
console.log(age) // 숫자 20이 삭제된 배열

 

Array.includes()

- 특정 배열에 주어진 데이터가 존재하는지 여부 확인

- 결과를 boolean값으로 반환 (해당 데이터가 존재하면 true, 존재하지 않으면 false)

let age = [14,17,12,23,20]
console.log(age.includes(14)) // true
console.log(age.includes(15)) // false

 

Array.indexOf()

- 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환함

- 존재하지 않으면 -1반환

 

문법

    arr.indexOf(searchElement[, fromIndex])

- fromIndex* 생략가능 (옵션)

: 검색을 시작할 Index (시작점)

: 배열의 길이보다 크거나 같은 경우 -1반환

: 음수값을 제공하면 배열 끝에서부터 사용

let animals = ['강아지','고양이','양','사자','강아지']
console.log(animals.indexOf('강아지')) // 0
console.log(animals.indexOf('강아지',2)) // 4
console.log(animals.indexOf('오리')) // -1

음수값이 온다면 배열의 가장 끝 값을 -1로, 왼쪽으로 갈수록 값이 점점 작아진다

❌ 그렇다고해서 검색방향이 바뀌는것은 아님 ❌

 

배열의 메서드는 위의 4가지 말고 다양하게 존재하는데 MDN에서 확인해볼 수있다

 

객체(Object)

- 여러개의 property(속성)를 갖는 데이터 타입

- 속성들은 key:value(키와 값)으로 이루어져 있다

- 각 프로퍼티는 콤마(,)로 구분된다

 

객체의 생성

- 중괄호({})를 이용해 객체를 생성 할 수 있다

let person = {
  name : 'Syongsyong',
  age : 20,
  job : 'developer'
}

객체의 데이터에 접근하는 방법

Dot notation(obj.property)

let person = {
  name : 'Syongsyong',
  age : 20,
  job : 'developer'
}
console.log(person.age) // 20

person.height = 50
// 객체에 height키 값 50 할당

 

Bracket notation(obj['property'])

let cat = {
  name : 'siru',
  age : 4,
  height : 50
}

console.log(cat['name'])
console.log(cat[name]) // *변수로 인식됨

cat['color'] = 'black'; // 할당

- 따움표로 감싸주지않으면 key값이 아닌 변수로 인식되어 변수가 선언되어있지 않을경우 오류를 야기한다

- key값에 접근을 원한다면 반드시 따움표로 감싸주자

 

객체 메서드

Object.keys()

- 주어진 객체의 key만을 가져와 배열에 담아주는 메서드

let cat = {
  name : 'siru',
  age : 4,
  height : 50
}

let catInfo = Object.keys(cat)

console.log(catInfo)
// name,age,heigth를 담은 배열 반환

 

Object.values()

- 주어진 객체의 value만을 가져와 배열에 담아주는 메서드

let cat = {
  name : 'siru',
  age : 4,
  height : 50
}

let catInfo = Object.values(cat)

console.log(catInfo)
// siru,4,50을 담은 배열 반환

메서드를 통해 키와 값을 배열에 담아 사용하는 이유?

: 객체의경우 순서가 존재하지 않기 때문에 반복문에서 활용하기 까다롭다

 

객체의 메서드는 배열의 메서드와 마찬가지로 다양하게 존재하는데 MDN에서 확인해볼 수 있다

 

본 글은 훈훈한 자바스크립트 강의의 내용을 정리한 글입니다