[JavaScript] 배열(Array)

---

🕖 DAY +11 / 2022. 11. 03

SEB FE / Section1 / Unit9 / JavaScript 배열, 객체

---

📌 Today I Learned

• 배열(Array)

💬 배열이란?

다량의 데이터를 다룰 수 있는 데이터 타입인 배열(Array). 순서가 있는 값을 의미한다.

• 순서는 인덱스(index)라고 부르며, 1이 아닌 0부터 번호를 매긴다

73은 0번째 인덱스 값, 96은 4(사)번째 인덱스 값

• 값은 요소(element)라고 부른다.

배열을 어떻게 정의하고 사용하는가?

대괄호(square bracket)를 이용해서 배열을 만들고, 각각의 원소(element)는 쉼표(comma)로 구분을 해 준다.

let myNumber = [73, 98, 86, 61, 96];

• 용어를 잘 기억해야 한다.
  

// "`myNumber`라는 배열의 3번째 인덱스"를 조회하려면
myNumber[3]; 
// expected output: 61

• 값은 인덱스를 이용해 접근한다.
  

myNumber[3] = 200; 
// myNumber 3번째 값을 300으로 할당해 준다
myNumber;
// expected output: [73, 98, 86, 200, 96];

📂 예제1

let fruits = [
	'banana',
    'apple',
    'pineapple'
];

• fruits의 2번째 인덱스값은?
  // [0] 'banana', [1] 'apple', [2] 'pineapple'
  답은 'pineapple'

• fruits의 3번째 인덱스값은?
  // (2번째 값 'pineapple' 다음으로 주어진 값이 없기 때문에) 인덱스를 벗어나면 undefined가 나온다.
  답은 undefined

📂 예제2

let myNumber = [[13, 30], [73, 8], [44, 17]]

• myNumber의 1번째 인덱스의 값은?

myNumber;
[Array(2), Array(2), Array(2)]

0: [13, 30]
1: [73, 8]
2: [44, 17]
// expected output: [73, 8]

• myNumber의 1번째 인덱스값의 0번째 인덱스의 값은?

// 배열 안에 배열이 있다.
myNumber[1][0]
// expected output: 73

2차원 배열이라 한다. array 안쪽으로 중첩을 시켜서 3차원 배열 등으로 만들 수 있다.

💬 배열 메소드

📂 배열의 길이

// myNumber라는 배열의 길이를 알아내려면
myNumber.length;
// expected output: 4

• 온점(dot)을 사용하여 변수의 속성(property)에 접근할 수 있다.
• 온점(dot)을 이용해서 관련된 명령(method)도 실행할 수 있다.
  - 명령을 실행할 때는 함수를 실행하듯 소괄호()를 열고 는 형태로 실행한다.

📂 배열 값 추가

let myNumber = [73, 98, 86, 61];

// myNumber라는 배열 끝에 96이라는 값을 추가하려면 (.push 메소드를 이용한다)
myNumber.push(96);

myNumber;
// expected output: [73, 98, 86, 61, 96];

📂 배열 마지막 값 삭제

let myNumber = [73, 98, 86, 61];
// myNumber라는 배열 마지막 값을 삭제하려면 (.pop 메소드를 이용한다)
myNumber.pop();

myNumber;
// expected output: [73, 98, 86];

💬 배열의 반복

let muNum = [73, 98, 86, 61];

"배열 myNum의 n번째 인덱스"를 출력하자 console.log(myNum[n])

조건:
1. 숫자(n)은 0부터 시작한다 let n = 0;
2. 숫자(n)를 언제까지 반복할까?
ㄴ 배열의 길이보다 작을 때까지 반복한다 n < myNum.length;
3. 숫자(n)는 1씩 증가한다 n++; (증감 연산자)

for (let n = 0; n < myNum.length; n++;) {
	console.log(myNum[n]); // 반복할 내용을 먼저 넣어 준다.
}

📂 예제1

• myNum의 모든 element를 누적해서 더하기 위해 필요한 조건과, 반복할 구문은?

let myNum = [10, 20, 40, 10];
let sum = 0;

for (let n = 0; n < myNum.length; n++) {
	sum = sum + myNum[n]
	// 반복할 구문
}

console.log(sum);
// expected output: 80

sum에 할당을 해 주지 않으면 undefined가 되어 undefined + 10 = NaN을 반환한다.
값을 재할당 할 수 있도록 sum에 0을 초기화해 둬야 한다.

💬 개념학습1

📂 Array.isArray

자바스크립트의 특정 값이 배열인지 아닌지 판별할 수 있는 Array.isArray

let words = ['피', '땀', '눈물']]

typeof '문자열'
// expected output: "string"

typeof 123
// expected output: "number"

typeof words
// expected output: "object"

typeof [1,2,3]
// expected output: "object"

let obj = { a: 1}

typeof obj;
// expected output: "object"

여기서 무엇이 Array인지 객체인지 구분할 수 없기에 다른 방법을 써야 한다.
그래서 Array.isArray를 사용한다.

Array.isArray('문자열')
// expected output: false

Array.isArray(123)
// expected output: false

Array.isArray(words)
// expected output: ture

Array.isArray([1,2,3])
// expected output: ture
// Array.isArray에 직접 입력하여도 true를 반환한다

Array.isArray([])
// expected output: ture
// 열이 비어도 배열이 들어가면 true를 반환한다

input은 내가 검사하고 싶은 객체명을 작성하면 되고, 결과는 ture / false 둘 중 하나만 나온다.

💬 개념학습2

let arr = ['code'], [states'];

// 콘솔로그로도 볼 수 있지만
// 테이블로 확인이 가능하다
// index와 Value가 확인 가능하다
console.table(arr)

📂 push

arr.push('pre')

• .push는 기존 배열(Array)에다가 요소(element)를 추가하는 명령(method)이다.
  

📂 pop

arr.pop()
// expected output: "pre"

console.table(arr)

• .pop는 기존 배열(Array)의 마지막 요소(element)를 삭제하는 명령(method)이다.
  

📂 shift

arr.shift()
// expected output: "code"

• .shift는 기존 배열(Array)의 첫 번째 요소(element)를 삭제하는 명령(method)이다.
  

📂 unshift

arr.unshift('creative')
// expected output: 2
// 2는 length이다

console.table(arr)

• .unshift는 기존 배열(Array)의 첫 번째에 요소(element)를 추가하는 명령(method)이다.
  

1. 뒤에 element 추가: push
2. 뒤에 element 삭제: pop
3. 앞의 element 추가: unshift
4. 앞의 element 삭제: shift

addToFront
addToBack
removeFromFront
removeFromBack

💬 개념학습3

📂 indexOf

특정한 단어가 배열 안에 들어있는지 알고 싶을 때 사용할 수 있다.
특정한 단어가 있을 시 인덱스 값을 반환하고, 없을 시 -1을 반환한다.
대/소문자를 구분한다.

let words = ['Radagast', 'the', 'Brown'];

words.indexOf('the')
// expected output: 1 
// 인덱스의 n번째 값을 반환한다.

words.indexOf('Brown')
// expected output: 2

words.indexOf('Radagast')
// expected output: 0

words.indexOf('귤')
// expected output: -1
// 배열에 없는 단어는 -1을 반환한다.

Array에 특정한 엘리먼트를 찾고자 할 때 검사하려면 (특정 엘리먼트의 존재여부를 확인하려면)

words.indexOf('Brown') !== -1
// expected output: true

words.indexOf('귤') !== -1
// expected output: false

📂 hasElement

특정한 배열에 찾고자 하는 엘리먼트가 있는지 불리언 값으로 반환해 준다.

hasElement(배열, 찾으려는 엘리먼트)
// expected output: true or false

function hasElement(arr, element) {
 return arr.indexOf(element) !== -1
}

hasElement(words, 'Browns')
// expected output: true

hasElement(words, '귤')
// expected output: false

📂 includes

기본적으로 내장돼 있는 메소드도 있다.
특정한 배열에 찾고자 하는 엘리먼트가 있는지 불리언 값으로 반환해 준다.
특정 엘리먼트가 있는지 존재 여부만 알 수 있다.

words.includes('Brown')
// expected output: true

words.includes(words, '귤')
// expected output: false

👀 돌아보기