[Javascript] 배열과 객체

배열

변수와 상수에 담아야 할 데이터가 여러 개가 된다면, 배열을 사용하면 된다.

배열은 여러개의 데이터를 순서와 함께 저장하고 싶을 때 사용한다.

배열 만들기

배열을 만들 때는 대괄호[]를 이용하면 된다.

let array = ["이것","하나하나가","요소라고","한다"];

대괄호 안에는 원하는 데이터를 모아 넣으면 배열이 만들어진다.
배열 안에 데이터 하나하나를 요소(element)라고 한다.

배열의 index

배열은 데이터를 순서와 함께 저장 한다.
배열의 index는 각 요소에 순서를 부여할 뿐만이 아니라 해당 요소에 접근이 가능하도록 한다.

index 번호는 0번부터 시작하는 것을 주의.
let array = ["이것","하나하나가","요소라고","한다"];
// index       0       1         2      3

인덱스 번호로 요소에 접근하는 방법은

array[1] = "하나하나가"

array[3] = "한다"

배열의 property

배열은 고유한 property를 가지고 있으며, 이속성을 통해 배열의 길이를 구하거나 내장함수를 이용해 사용할 수 있다.

 

array.length

length 속성은 배열의 길이를 나타내는 속성이다.
⚠️ 주의할 점은 index와 다르게 번호가 1부터 시작한다.

let array = ["이것","하나하나가","요소라고","한다"];
// index       0       1         2      3
// length      1       2         3      4     // array.length = 5

---

배열의 메서드(Method)

메서드는 어떠한 기능을 가지고 있는 명령어로, 배열에 내장함수라고 생각하면 된다.

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

let array = ["포도","사과","딸기","바나나"];
array.push("망고");

// 결과
array = ["포도","사과","딸기","바나나","망고"];

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

let array = ["포도","사과","딸기","바나나"];
array.pop();

// 결과
array = ["포도","사과","딸기"];

array.includes() : 배열에 주어진 데이터가 포함되어 있는지 확인

let array = ["포도","사과","딸기","바나나"];
array.includes("사과");

// 결과
true  //boolean 값으로 반환

array.indexOf() : 배열에서 지정된 요소를 찾을 수 있는 첫 번째 인덱스를 반환

let array = ["포도","사과","딸기","바나나","사과"];
array.indexOf("사과");

// 결과
1   // 만약 찾을 수 없으면 -1 반환

---

객체(object)

let user = ["김땡땡", 180, 75, "개발자"]

user라는 배열이 있는데,

각 요소가 무엇에 관한 데이터인지 알 수 없다.

때문에, 객체로 키값을 통해 해당 데이터가 무엇에 관한 데이터인지 명시할 수 있다.

객체 만들기

배열을 만들 때는 중괄호를 이용하면 된다.

let userData = {
  name : "김땡땡",
  height : 180,
  weight : 75,
  job : "개발자"
}

중괄호 안에 원하는 데이터를 모아 넣으면 객체가 완성된다.
객체 안에 데이터들은 프로퍼티(property)라고 하며,
왼쪽에는 key값, 오른쪽에는 value값이 들어간다. 이 두 가지를 묶은 것을 property라고 한다.

객체 프로퍼티에 접근하기

객체의 프로퍼티에 접근할 때는 key값에 value를 가져오면 된다.

 

Dot nation(점 표기법)

let userData = {
  name : "김땡땡",
  height : 180,
  weight : 75,
  job : "개발자"
}

// Dot natation(점 표기법)
userData.name = "김땡땡";
userData.job = "개발자";

Bracket notation(괄호 표기법)

let userData = {
  name : "김땡땡",
  height : 180,
  weight : 75,
  job : "개발자"
}

// Dot natation(점 표기법)
userData.["name"] = "김땡땡";
userData.["job"] = "개발자";

아직 두 가지의 큰 차이점을 모르겠지만,
사용에 있어서 차이가 없다면 개인적을 점 표기법을 사용하는 것이 더 편리해 보인다 :D

객체 메서드(Method)

배열처럼 객체에도 내장메서드가 있다.

다양한 메소드가 있지만 기초적인 것만 알아보자.

 

Object.keys()

주어진 객체에 key만 가져와 배열에 담아주는 메서드이다.

let userData = {
  name : "김땡땡",
  height : 180,
  weight : 75,
  job : "개발자"
}

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

Object.values()

주어진 객체에 value값만 가져와 배열에 담아주는 메서드이다.

let userData = {
  name : "김땡땡",
  height : 180,
  weight : 75,
  job : "개발자"
}

Object.values(userData)
// 결과
["김땡땡",180,75,"개발자"]

참조

인프런-[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스(학습자료)