21일차 프론트엔드 공부 - 배열, 객체

- 프론트엔드 공부 21일차 -

데이터 타입

Array Object

 

배열 (Array)

순서가 있는 데이터 컬렉션을 저장할 때 사용

데이터 컬렉션이 논리적으로 정의된 규칙에 의해 나열된 것

ex)

let ranking = [“Jason”, “Alice”, “Jane”, “Tom”]

index  (요소)      0           1          2           3

 

Index를 통해 각 요소에 접근 가능

ranking[1] = “Alice”

 

let ranking = ["Jason","Alice", "Mike"]
/* undefined */
console.log(ranking)
/* VM760:1 (3) ['Jason', 'Alice', 'Mike']
undefined */
console.log(ranking[1])
/* VM770:1 Alice */

 

 

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

 

Array.length

특정 배열의 길이를 나타내는 속성

길이 => 배열 내 요소의 개수

 

ex)

let ranking = [“Jason”, “Alice”, “Jane”, “Tom”]

length                1          2           3           4

 

ranking.length = 4

 

 

Method

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

배열(Array) Method

push() / pop() / indexOf() / includes()

 

Array.push()

배열의 가장 뒤에 데이터를 추가해주는 Method

 

ex)

let ranking = [“Jason”, “Alice”, “Jane”]

ranking.push(“Tom”)

console.log(ranking) =  [“Jason”, “Alice”, “Jane”, “Tom”]

 

Array.pop()

배열 가장 끝에 있는 데이터를 제거하는 Method

pop()은 가장 끝의 데이터를 삭제하는 것이기 때문에 () 안에 데이터 값을 입력해주지 않는다.

 

ex)

let ranking = [“Jason”, “Alice”, “Jane”]

ranking.pop()

console.log(ranking) =  [“Jason”, “Alice”]

 

Array.includes()

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

참(True) / 거짓(False) 로 판단

 

ex)

let ranking = [“Jason”, “Alice”, “Jane”]

ranking.includes(“Alice”)  -> true

ranking.includes(“Mike”)  -> false

 

Array.indexOf()

특정 배열에서 주어진 데이터의 Index 값을 찾아 반환 

 

ex)

let ranking = [“Jason”, “Alice”, “Jane”]

ranking.indexOf(“Jane”) -> 2

 

객체 (Object)

객체는 키값을 통해 해당 데이터가 무엇에 대한 데이터인지 명시해준다

키(Key): 값(Value)

ex)

let userData = {

name:"Jane",

age: 25,

gender: “female”

};

 

왼쪽에는 key값이 오른쪽에는 value값이 존재한다.

그리고 key와 value를 묶은 것을 property 라고 한다.

 

프로퍼티(property)에 접근하는 방식

Dot notation / Bracket notation

 

Dot notation

 

ex)

let userData = {

name:"Jane",

age: 25,

gender: “female”

};

 

userData.name -> “Jane”

userData.email = “Jane@gmail.com”

let userData = {

name:"Jane",

age: 25,

gender: “female”

email: “Jane@gmail.com”

};

 

Bracket notation

 

ex)

let userData = {

name:"Jane",

age: 25,

gender: “female”

};

 

userData[“age”] -> 25

userData[“email”] = “Jane@gmail,com

let userData = {

name:"Jane",

age: 25,

gender: “female”

email: “Jane@gmail.com”

};

 

Bracket notation을 사용하실 때 “”를 붙여주시지 않으시면, 안의 key값이 아닌 변수로 인식된다.

 

객체 메소드

 

객체(Object) Method

Object.keys() / Object.values()

 

Object.keys()

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

 

ex)

let userData = {

name:"Jane",

age: 25,

gender: “female”

};

Object.keys(userData) -> [“name”, “age”, “gender”]

 

객체의 key들을 담은 배열에 email이 존재하는지 체크하는 방법

let userDataKeys = Object.keys(userData)

userDataKeys .includes(“email”) -> false

 

Object.values()

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

 

ex) 

let userData = {

name:"Jane",

age: 25,

gender: “female”

};

Object.values(userData) -> [“Jane”, 25, “female”]

 

 

 

배열 정의

1. 순서가 존재하는 데이터의 창고

2. 대괄호로 생성

3. 각각의 요소는 쉼표로 구분

4. 0부터 시작하는 위치 데이터 Index

  -> 이를 활용해서 요소에 접근

 

배열 속성 - length

배열에 존재하는 요소의 개수를 기반으로 해당 배열의 길이를 담은 속성

 

배열 메서드

1. push()         -  데이터 추가

2. pop()           - 데이터 삭제

3. indexOf()     - Index 조회

4. includes()    - 포함 여부 확인

 

객체 정의

1. 중괄호를 사용해서 정의

2. 내부의 요소는 프로퍼티(키 + 값)

3. Dot notation, Bracket notation

4. 위 두가지로 새로운 프로퍼티도 생성 가능

 

객체 메서드

1. Object.keys()

   -> key 모음을 배열로 (문자열)

2. Object.values()

   -> value 모음을 배열로 (데이터 그대로)