배열, 객체

배열 ( Array )

여러 개의 데이터를 순서와 함께 저장하고 싶을 때 사용하는 자료 구조

배열 만들기

대괄호 [ ] 안에 원하는 데이터를 모아서 넣어줌
요소(element) : 배열 안에 포함된 각각의 데이터

let arr = ["요소1", "요소2", "요소3", "요소4"]

배열의 index

배열의 index는 각 요소에 순서를 부여하고, 해당 요소에 접근이 가능하게 함
index 번호는 0번부터 시작함

let arr = ["요소1", "요소2", "요소3", "요소4"]
// index     0       1       2       3  

arr[2] = "요소3"
arr[3] = "요소4"
// index 번호로 각 요소에 접근 가능

배열의 property

배열은 고유한 property(속성)을 가지고 있음
Property를 이용해 배열의 길이를 구하거나, 내장된 함수를 통해 배열을 확장할 수 있음

array.length

배열의 길이, 즉 요소(element)의 개수를 나타내는 속성

let arr = ["요소1", "요소2", "요소3", "요소4"]
// index     0       1       2       3  
// length    1       2       3       4    // 1부터 시작

arr.length = 4 

배열의 메서드( Method )

메서드(Method) : 어떠한 기능을 가지고 있는 명령어

array.push( ) : 배열의 가장 뒤에 데이터 추가

let classmates = ["짱구", "맹구", "철수"]
classmates.push("훈이")

// 결과
classmates = ["짱구", "맹구", "철수", "훈이"]

array.pop( ) : 배열의 가장 뒤의 데이터 삭제

let classmates = ["짱구", "맹구", "철수"]
classmates.pop()

// 결과
classmates = ["짱구", "맹구"]

array.includes( ) : 배열이 주어진 데이터를 포함 여부 반환 ( true / false )

let classmates = ["짱구", "맹구", "철수"]
classmates.includes("맹구")

// 결과
true

array.indexOf( ) : 배열에 주어진 데이터가 위치한 index 넘버를 반환

let classmates = ["짱구", "맹구", "철수"]
classmates.indexOf("맹구")

// 결과
1

array.sort() : 배열의 요소 정렬 (오름차순)

let classmates = ["짱구", "맹구", "철수"]
classmates.sort()

// 결과
classmates = ["맹구", "짱구", "철수"]

array.concat() : 배열을 연결

const classmates1 = ["짱구", "맹구", "철수"]
const classmates2 = ["훈이", "유리"]

classmates1.concat(classmates2)  // ["짱구", "맹구", "철수", "훈이", "유리"]

array.join( 연결자 ) : 배열을 문자로 변환

const classmates = ["짱구", "맹구", "철수"]
classmates.join("와 ")  // 짱구와 맹구와 철수

array.splice( index1, index2 ) : 배열 index1 ~ index2 분리

const classmates = ["짱구", "맹구", "철수"]
classmates.spice(0, 1)    // ["짱구"]

array.filter( ) : 배열에서 원하는 요소만 반환

const classmates = ["짱구", "맹구", "철수"]
classmates.filter( (data) => (data === "짱구") )     // ["짱구"]
classmates.filter( (data) => (data !== "짱구") )     // ["맹구", "철수"]

객체 ( Object)

객체 생성

중괄호 { } 안에 원하는 데이터를 모아서 넣어 줌
프로퍼티(property) : 객체 안에 포함된 각각의 데이터
배열은 포함하는 데이터들에 대해 명시할 수 없으나, 객체는 키(kyey) 값을 통해 데이터에 대해 명시할 수 있음

let userData = {
  name: "신짱구",
  age: 5,
  height: 100
}

// { key : value } -> 하나의 property

객체 프로퍼티에 접근

Dot notation (점 표기법)

key 값에 접근시, 점을 이용해서 접근

let userData = {
  name: "신짱구",
  age: 5,
  height: 100
}

// Dot notation
userData.name = "신짱구"
userData.age = 5

Bracket notation (괄호 표기법)

let userData = {
  name: "신짱구",
  age: 5,
  height: 100
}

// Dot notation
userData["name"] = "신짱구"
userData["age"] = 5

📌 Bracket notation을 사용할 땐 대괄호 [ ] 안에 따옴표(" ")를 사용해야 함
-> 따옴표(" ") 없이 사용하면 key 값이 아닌 변수로 인식

객체( Object )의 메서드( Method )

객체에 기본적으로 내장된 메서드

Object.keys( )

객체의 key 값을 가져와 배열에 담아줌

let userData = {
  name: "신짱구",
  age: 5,
  height: 100
}

Object.keys(userData)
// 결과
["name", "age", "height"]

Object.values( )

객체의 value를 가져와 배열에 담아줌

let userData = {
  name: "신짱구",
  age: 5,
  height: 100
}

Object.values(userData)
// 결과
["신짱구", 5, 100]