[Javascript] 배열 - 배열 선언, 배열 메소드와 객체 메소드

1. 배열(Array)

배열이란 순서가 있는 값(데이터)을 의미

순서가 있는 데이터를 저장할때 사용하며, 데이터가 논리적으로 정의된 규칙에 의해 나열되는 것을 의미합니다. 즉 여러개의 데이터를 순서와 함께 저장하는 창고! 라고 생각하시면 됩니다.

2. 배열 선언

Javascript에서 배열을 선언하는 방법에는 두가지가 있습니다.

let arr = new Array();
let arr = [];

• Array() 생성자 함수를 사용해서 만드는 방법
• [ ](대괄호) 를 사용해서 만드는 방법

일반적으로 두번째 방법이 많이 쓰여요!

2-1. Array() 생성자 함수를 사용하는 방법

let fruits = new Array(3); // 배열 생성

arr[0] = 'apple';
arr[1] = 'strawberry';
arr[2] = 'orange';
// 값을 배정

arr 이라는 배열을 생성한 뒤 값을 배정해 줍니다.

let fruits = new Array('apple', 'strawberry', 'orange'); // 배열 생성(초기 값 할당)

console.log(arr[0]) // apple

또는 배열을 생성할 때 초기 값을 할당해 주는 방법도 있습니다.

2-2. [ ](대괄호) 를 사용하는 방법

let fruits = ["apple","strawberry","orange"];

console.log(fruits[0]) // apple
console.log(fruits[1]) // strawberry
console.log(fruits[2]) // orange

[ ](대괄호) 안에 값을 할당해 줍니다.
이러한 방식은 리터럴 표기법 이라고 불립니다.

요소(Element)

배열에 속해있는 값 하나 하나를 요소(Element) 라고 부릅니다.

let fruits = ["apple","strawberry","orange","cherry","grape"]
				 0		   1	      2		   3	    4

위의 예제에선 [ ](대괄호) 안에 있는 apple , strawberry, orange , cherry , grape 이 다섯가지가 요소가 되겠죠!

❗요소는 Index 를 가집니다.
Index? 많이 들어보셨죠? 제이쿼리 할때도 많이 쓰였던 Index는 위치값 을 의미합니다! Index를 통해 각 요소에 접근이 가능하죠!

let fruits = ["apple","strawberry","orange","cherry","grape"];

fruits[0] // apple
fruits[1] // strawberry
fruits[2] // orange

위치값은 0부터 시작됩니다. 배열 내 특정 요소를 얻고 싶다면 대괄호 안에 순서를 나타내는 숫자인 Index를 넣어주면 됩니다.

속성(Property)

length()

let fruits = ["apple","strawberry","orange","cherry","grape"];

console.log(fruits.length) // 5

Array.length 는 특정 배열의 길이를 나타내는 속성으로 길이는 배열 내 요소의 개수를 의미합니다! length 는 1부터 시작합니다.

3. 배열 메소드(Array Method)

메소드(Method)

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

배열에 내장되어 있는 기능이라고 보면 됩니다!

3-1. push()

배열의 가장 뒤에 데이터를 추가하는 메소드

let fruits = ["apple","strawberry","orange"];
fruits.push("cherry") // () 안에 데이터를 입력

console.log(fruits) // ["apple","strawberry","orange","cherry"];

3-2. pop()

배열 가장 끝에 있는 데이터를 제거하는 메소드

let fruits = ["apple","strawberry","orange"]
fruits.pop() // () 안에 데이터를 입력할 필요가 없음!

onsole.log(fruits) // ["apple","strawberry"]

3-3. includes()

특정 배열에 주어진 데이터가 존재하는지 여부 확인
여부에 따라 참(true), 거짓(false)을 반환합니다,

let fruits = ["apple","strawberry","orange"]

fruits.includes("strawberry") // true
fruits.includes("cherry") // false

3-4. indexOf()

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

let fruits = ["apple","strawberry","orange"]

fruits.indexOf("orange") // 2

4. 객체 메소드(Object Method)

4-1. Object.keys()

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

let userData = {
	name: 'Jane',
  	age: '25',
  	gender: 'Male'
}

Object.key(userData) // ['name','age','gender']

배열안에 문자열 형태로 담긴다!

4-2. Object.values()

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

let userData = {
	name: 'Jane',
  	age: '25',
  	gender: 'Male'
}

Object.values(userData) // ['Jane','25','Male']

객체의 경우엔 배열과 다르게 순서가 존재하지 않습니다.

---

정리

* 배열 정의 *
   1. 순서가 존재하는 데이터 창고이다.
   2. 대괄호로 생성한다.
   3. 각각의 요소는 쉼표로 구분한다,
   4. 요소는 Index를 가지며 0부터 시작한다.
   
* 배열 속성 *
   - length : 배열에 존재하는 요소의 개수를 기반으로 해당 배열의 길이를 담은 속성이다.

* 배열 메소드 *
   1. push() : 데이터 추가
   2. pop() : 데이터 삭제
   3. indexOf : index 조회
   4. includes() : 포함 여부 확인
   
* 객체 메소드 *
   1. Object.keys() : 객체의 key를 배열로 담아줌(문자열로)
   2. Object.values() : 객체의 values를 배열로 담아줌(데이터 그대로)