[JS/Node]: 배열

hosik kim·2021년 9월 13일
0

With CodeStates

목록 보기
32/45
post-thumbnail

💡[JS/Node]:배열


📌배열 기초


  • 배열은 순서가 있는 값
  • 순서는 index(인덱스)라고 부르며, 1이 아닌 0부터 번호를 매긴다
  • 값은 element(요소/원소)라고 부른다.
// 배열은 대괄호(square bracket)를 이용해서 만든다
// 각각의 요소(element)는 쉼표(comma)로 구분한다.

let myNumber = [73, 98, 86, 61, 96];
  • 값은 index(인덱스)를 이용해서 접근한다.
let myNumber = [73, 98, 86, 61, 96];

// myNumber 배열에서 3번째 index를 조회하려면
myNumber[3]; // 61

// myNumber 배열에서 3번째 index의 값을 200으로 변경하려면
myNumber[3] = 200;

// myNumber 배열에서 3번째 index의 값이 200으로 변경된 이후의 배열
myNumver; // [73, 98, 86, 200, 96];

📌배열 기초 실습


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

// myNumber 의 1번째 index의 값은
myNumber[1]; // [73, 8]

// myNumber 의 1번째 index의 0번째 index의 값은
myNumber[1][0]; // 73

📌배열로 할 수 있는 것들


길이 구하기

  • 온점(.)을 이용하여 변수가 가지고 있는 속성(propety)에 접근 가능하다.
let myNumber = [73, 98, 86, 61];

// myNumber 배열의 길이를 알아내려면
myNumber.length; // 4

요소(element) 추가하기

  • 온점(.)을 이용하여 관련된 명령(method)을 실행할 수 있다
  • 명령을 실행할 때에는 함수를 실행하듯 괄호를 열고 닫는 형태로 실행
let myNumber =  [73, 98, 86, 61];

// myNumber 배열의 끝에 96이라는 값을 추가하려면?
myNumber.push(96); // 5

// arr.push() 의 특성상 추가된 값을 포함한 배열이 반환되는 것이 아니라
// 추가된 값을 포함한 배열의 길이가 반환된다

요소(element) 삭제하기

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

// myNumber 배열의 마지막 값을 삭제하려면?
myNumber.pop(); // 65

// arr.pop() 의 특성상 삭제된 값을 제외한 배열이 반환되는 것이 아니라
// 삭제한 값 자체가 반환됨

📌배열의 반복


  • 배열과 반복문을 조합하는 경우는 굉장히 많다.
// 반복문을 이용해 배열의 요소(element)를 한번씩 출력하려면

// 조건1. 숫자(n)은 0부터 시작
// 조건2. 숫자(n)은 배열의 길이보다 작을 때까지 반복
// 조건3. 숫자(n)는 1씩 증가

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

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

📌배열의 반복 실습


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

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

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

console.log(sum); // 80

📌배열 기초 메소드


배열인지 아닌지 확인

  • 배열이나 객체의 경우 typeof 를 이용하면 모두 object 라고 나와서 정확히 배열인지 객체인지 알 수 없으므로 Array.isArray 를 사용
  • Array.isArray 는 boolean 값으로 반환
let words = ['피', '땀', '눈물']; // undefined
let obj = {a: 1} // undefined

typeof '문자열' // "string"
typeof '123' // "number"
typeof words // "object"
typeof [1, 2, 3] // "object"
typeof obj // "object"

Array.isArray('문자열') // false
Array.isArray(123) // false
Array.isArray(words) // true
Array.isArray([1, 2, 3]) // true
Array.isArray(obj) // false

배열 요소 추가 및 삭제

1. 배열 요소 추가: arr.push(), arr.unshift()

  • arr.push()는 맨 뒤에 요소 추가
let arr = ['code', 'states'];
arr.push('pre') // 3
indexvalue
0'code'
1'states'
2'pre'
  • arr.unshift() 는 맨 앞에 요소 추가
let arr = ['code', 'states'];
arr.unshift('pre') // 3
indexvalue
0'pre'
1'code'
2'states'

2. 배열 요소 삭제: arr.pop(), arr.shift()

  • arr.pop() 는 맨 뒤에 요소 삭제
let arr = ['code', 'states'];
arr.pop() // 'states'
indexvalue
0'code'
  • arr.shift() 는 맨 앞에 요소 삭제
let arr = ['code', 'states'];
arr.shift() // 'code'
indexvalue
0'states'

Tips

let arr = ['code', 'states'];
console.table(arr);
  • console.table() 을 이용하면 아래와 같이 표를 통해 시각화가 잘 된 상태로 확인 가능하다.
    | index | value |
    |:----------:|:----------:|
    | 0| 'code' |
    | 1| 'states' |

배열 요소 포함 여부 확인


1. arr.indexOf()

  • arr.indexOf() 를 이용하여 배열 안에 특정 요소가 있는지 확인 가능
  • 대소문자가 정확하게 일치하지 않으면 해당 요소가 존재하지 않는다고 보고 -1 반환
  • 특정 요소가 존재한다면 인덱스를 반환, 특정요소가 존재하지 않는다면 -1 반환
let words = ['Radagast', 'the', 'Brown'];

words.indexOf('the') // 1
words.indexOf('Brown') // 2
words.indexOf('Radagast') // 0
words.indexOf('Blue') // -1
words.indexOf('brown') // -1

words.indexOf('Brown') !== -1 // true
words.indexOf('Blue') !== -1 // false

2. arr.includes()

  • hasElement 와 같은 함수를 직접 만들어도 되지만, arr.includes() 와 같이 내장 함수를 사용해도 된다.
  • 단, 브라우저 호환성에 따라 사용불가할 수도 있으므로 확인이 필요하다.
let words = ['Radagast', 'the', 'Brown'];

hasElement(arr, element) {
  let isPresent = arr.indexOf(element) !== -1;
  return isPresent;
}

hasElement(words, 'Brown') // true
hasElement(words, 'Blue') // false

words.includes('Brown') // true
words.includes('Blue') // false
profile
안되면 될 때까지👌

0개의 댓글