8-1. [JavaScript] 배열

# 배열?

* 배열은 순서가 있는 값

 순서(index) :  0부터 번호를 매김

 값=요소( element)

 

* 배열 만드는 법

let myNumber = [73, 98, 86, 61, 96];
//대괄호를 이용해서 배열을 만들고, 각각의 원소는 쉼표로 구분한다.

 

*값은 인덱스를 이용해 접근

let myNumber = [73, 98, 86, 61, 96];
//myNumber의 배열의 3번째 인덱스를 조회하려면?
myNumber[3];//61

//배열의 변수를 변경하고 싶다면? 
myNumber[3]=200;//200의 값 할당
myNumber; //[73, 98, 86, 200, 96];

 

*퀴즈 1

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

console.log(fruits[2]);
console.log(fruits[3]);

정답 1

console.log(fruits[2]); //pineapple
console.log(fruits[3]);//undefined

//index의 범위를 넘어서면 undefined이다!

 

*퀴즈 2

let myNumber = [[13,30],[73,8],[44,17]];
console.log(myNumber[1]); //[73,8]
console.log(myNumber[1][0]);//[73]

 

	0	1
0	13	30
1	73	8
2	44	17

2차원 배열을 표로 나타낸 것, 행렬도 배열로 나타낼 수 있다.

 

 

*배열로 할 수 있는 것들

 온점. 을 이용해서 관련된 명령(method)도 실행할 수 있다.

• 길이(.length)

let myNumber = [73, 98, 86, 61, 96];
myNumber.length; //4

 

• 요소추가(.element)

let myNumber = [73, 98, 86, 61];
myNumber.push(96); 
//myNumber
//[0] [1] [2] [3] [4]
//73  98  86  61  96

 

• 요소삭제(.pop)

let myNumber = [73, 98, 86, 61];
myNumber.pop(61); 
//myNumber
//[0] [1] [2] [3]
//73  98  86  61

---

# 배열의 반복

"배열 myNum의 n번째 인덱스"를 출력하자!

 

조건) - 숫자n는 0부터 시작한다. - 숫자n를 언제까지 반복할까? 배열의 길이보다 작을때 까지 ! - 숫자n는 1씩 증가한다.

console.log(myNum[n]) let n =0; n<myNum.length; n++;

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

for(let n =0;n<myNum.length;n++;){
console.log(myNum[n])
}

 

*퀴즈 

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

for(let n=0; n < myNum.length ; n++){
sum = sum + myNum[n] 
//sum = 0+10 -->sum + myNum[0] 
//sum = 10+20 -->sum + myNum[1] 
//sum = 30+40 -->sum + myNum[1]
//sum = 70+10 -->sum + myNum[1]
}
console.log(sum); //80

위 코드에서 let sum = 0;을 쓰지 않는다면?

  0은 값 할당을 하지 않았기 때문에 0 = undefined

  결과는 undefined+10 =  NaN 

  따라서 초기값을 항상 설정해줘야 한다!

 

---

# 배열 메서드

 

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

let mandoo = ['만두','고기만두', '김치만두'];
Array.isArray('단무지'); // false
Array.isArray(10002); // false
Array.isArray(mandoo); // true
Array.isArray([10,0,02]); // true
Array.isArray([]); //true

input : 검사하고 싶은 객체

결과는 true/false로 나온다.

---

배열의 요소 element를 추가, 삭제하기

 

let arr=['man','doo'];
console.table(arr) //배열 시각화

 

 

arr.push('kimchi') //push : 기존 array에 elemant를 추가하는 메서드
console.table(arr)

- 제일 뒤쪽 kimchi가 삽입되었다.

 

 arr.pop() //뒤쪽에 추가한 요소 삭제
 console.table(arr)

- 제일 뒤쪽 kimchi가 삭제되었다.

 

arr.shift() //제일 앞쪽 요소를 삭제
console.table(arr)

- 제일 앞쪽  man이 삭제되었다.

 

arr.unshift('gogi','man');
console.table(arr);

- 제일 앞쪽에 순서대로 gogi, man이 삽입되었다.

 

<정리>

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

 

---

indexOf, includes

 

let words = ['gogi', 'man', 'doo'];
words.indexOf('man'); // 1
words.indexOf('doo'); // 2
words.indexOf('gogi'); // 0
words.indexOf('kimchi'); // -1 배열에 없는 값는 -1이 나온다!
words.indexOf('단무지'); // -1


//단어가 배열에 있는지 없는지 찾는방법 
//'찾는 단어'가 -1이 아니다 = 참, 거짓

words.indexOf('man') !== -1 //true 참이므로 배열에 'man'이 존재한다.
words.indexOf('단무지') !== -1 //false 거짓이므로 배열에 '단무지'는 존재하지 않는다.
words.indexOf('MAN') !== -1 //false 대소문자를 구분하기 때문에 element 그대로 적어줘야한다.

결과값이 -1만 아니면 배열내에 존재 하는것이다.

 

 

 

words.includes

//hasElement(배열, 찾으려는 엘리먼트) // 결과는 true of false

function hasElement(arr,element){ //함수 생성
	let isPresent = arr.indexOf(element) !== -1;
    return isPresent;
    }
    
hasElement(words,'man') // true
hasElement(words, 'MAN')// false

//===========================================
words.includes("man") // true
words.includes('단무지') // false

.includes는 Internet Explorer에서 작동하지 않는다.

호환성 면에서 .indexOf가 더 낫다.

 

검색 키워드 : mdn array indexof 

검색시 호환성 정보가 나온다.

 

---

 

 

 

끝 🍎