배열 기초

  • 배열에서 사용되는 다음 용어에 대해 정확히 이해할 수 있다.
    • index, element, length
    • arr[0], push, pop
let arr = [1, 2, 3, 4];
//element는 배열안의 요소들 1, 2, 3, 4;
//index는 각 배열의 요소들의 자릿값 
console.log(arr[0]) //1 
//length는 배열의 길이 
console.log(arr.length) //4

arr.push(5); //배열의 마지막에 새로운 요소를 넣는다
console.log(arr) // [1, 2, 3, 4, 5];

arr.pop() //배열의 마지막 요소를 빼고 그 값을 반환!
console.log(arr.pop()) //5
console.log(arr) //[1, 2, 3, 4]
  • 배열에서 특정 인덱스(index)의 요소(element)를 조회하거나, 변경할 수 있다.
  • 배열의 요소가 배열인 이중 배열을 이해할 수 있다.
  • 이중 배열의 요소를 조회하거나 변경할 수 있다.
let newArr = [arr, ['a', 'b', 'c', 'd']]
//[[1, 2, 3, 4], ["a", "b", "c", "d"] 배열안의 배열 이중배열!
//newArr[0] 번째 인덱스의 요소는 [1, 2, 3, 4]의 배열
console.log(newArr[0][3]) // 4; 
console.log(newArr[1][0]) // a;
  • 문자열과 배열의 타입 변환을 돕는 메소드를 알고 있다.
    • 띄어쓰기 (" ")로 문자열을 구분하여, 배열로 변경할 수 있다. str.split(" ").join(" ")
    • 문자열을 요소로 가지는 배열을 띄어쓰기 (" ")로 구분한 문자열로 변경할 수 있다.
let str = "안녕하세요 배열을 공부하는 중입니다";
console.log(str.split(' ')); // ["안녕하세요", "배열을", "공부하는", "중입니다"]

let newArr = str.split(' ');
console.log(newArr); // ["안녕하세요", "배열을", "공부하는", "중입니다"]

console.log(newArr.join()); //안녕하세요,배열을,공부하는,중입니다
console.log(newArr.join(' ')); //안녕하세요 배열을 공부하는 중입니다
console.log(newArr.join('-')); //안녕하세요-배열을-공부하는-중입니다

배열 기초 메소드

  • 배열 요소(element)를 조회할 수 있다. bracket notation
  • 배열을 복사, 분리하는 법을 이해할 수 있다. slice, splice
//slice(start[인덱스 위치부터], end[end - 1 인덱스 값까지 잘라서 값으로 전환한다])
let arr = [1, 2, 3, 4, 5, 6];
console.log(arr.slice(1, 5)) // [2, 3, 4, 5]

//slice(start만 입력한 경우 start[index 위치부터] 배열의 마지막 값까지 출력) 
console.log(arr.slice(3)) //  [4, 5, 6]

//slice는 음수도 사용이 가능하다
console.log(arr.slice(-1)) // [6]


//splice  메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다.
//splic(start[인덱스 위치], deleteCount[start 위치부터 몇 개 지울 것인가], item[지운 자리에 이 아이템을 삽입])
let month = ['1월', '3월', '4월', '5월', '11월', '12월']
month.splice(1, 0, '2월')
console.log(month)// ["1월", "2월", "3월", "4월", "5월", "11월", "12월"]

month.splice(5, 2, '6월', '7월')
console.log(month)//["1월", "2월", "3월", "4월", "5월", "6월", "7월"]
  • 변수, 데이터, 또는 특정 값이 배열인지 아닌지 판별할 수 있다. Array.isArray
//Array.isArray 배열인지 아닌지 boolean 값을 출력
let arr = [];
let notArr = 'array';

console.log(Array.isArray(arr)) //true
console.log(Array.isArray(notArr)) //false
  • 배열의 요소(element)를 추가 및 삭제할 수 있다. push, unshift, pop, shift
let arr = []
arr.push(1); //배열의 마지막에 요소를 추가
console.log(arr) // [1]
arr.unshift(0) //배열의 처음에 요소를 추가
console.log(arr) // [0, 1]
arr.pop() //배열의 마지막 요소를 삭제
console.log(arr) // [0]
arr.shift() //배열의 첫 요소를 삭제
console.log(arr) // []
  • 배열의 길이를 구할 수 있다. length
let arr = [1, 2, 3, 4]
console.log(arr.length) // 4 배열의 길이를 구한다
  • 변수, 데이터, 또는 특정 값이 배열에 포함되어 있는지 확인할 수 있다. indexOf, includes
//indexOf 배열에 찾는 값이 들어 있다면 그 값의 인덱스 값을 출력
let arr = ['사과', '배', '포도', '키위']
console.log(arr.indexOf('배')) // 1

//찾는 값이 없다면 -1을 반환
console.log(arr.indexOf('딸기')) //-1


//includes 배열에 찾는 값이 들어 있다면 boolean 값을 출력 
let arr = ['사과', '배', '포도', '키위']
console.log(arr.includes('배')) // true

//찾는 값이 없다면 -1을 반환
console.log(arr.includes('딸기')) //false

'학습' 카테고리의 다른 글

CSS - Flexbox  (0) 2021.08.03
for ... in 과 for ... of  (1) 2021.08.01
Git  (0) 2021.07.29
리눅스 CLI (feat. ubuntu)  (0) 2021.07.28
querySelector  (1) 2021.07.26