배열 (Array)

배열 - [ ] 안에 데이터을 배열 해놓은 자료형
배열 안에 데이터들을 요소,element 라고 한다.

let arr = [1, 'wecode', 100, [10, 50]];
// 배열 안에는 모든 자료형이 들어갈수 있다.

배열의 선언

// 첫번째 방법
let arr1 = []  // 빈배열이 생성된다.
//두번째 방법
let arr2 = new Array(숫자)  // 숫자만큼의 length를 가지는 배열 생성
let arr3 = new Array(4);    // [ , , , ] length가 4인 빈배열 생성
console.log(arr3);          // 4 출력 → 빈배열이지만 길이를 가짐

배열의 다양한 메소드

요소 접근

배열은 각 요소가 index 값을 가지고 그 값으로 배열의 값에 접근 할 수 있다.
index 값은 0부터 시작

let arr = [1, 5, 60, 800, 156];
//index값  0  1   2   3    4
console.log(arr[0]);     // 1
console.log(arr[4]);     // 156

요소 수정

let arr = [1, 2, 3, 4];
arr.[0] = 100;   // 수정하고 싶은 index값으로 요소에 접근하고 값을 재할당
console.log(arr)    / [100, 2, 3, 4]

push, unshift (요소추가)

let arr = [100, 500, 123, 1000];
arr.push[456];     // 마지막에 추가됨
console.log(arr);      // [100, 500, 123, 1000, 456]
arr.unshift['wecode'];  // 맨 앞에 추가됨
console.log(arr);      // ['wecode', 100, 500, 123, 1000, 456]

pop , shift, slice (요소삭제)

let arr = [1, 2, 3, 4, 50, 60, 700, 8000]
arr.pop()          // 끝에 있는 요소 삭제
console.log(arr)   //[1, 2, 3, 4, 50, 60, 700]
--------------------------------------------------
arr.shift()        // 첫 요소 삭제
console.log(arr)   //[2, 3, 4, 50, 60, 700, 8000]
--------------------------------------------------
//arr.slice(시작index,끝index) 시작index부터 끝index(포함x) 전까지 삭제
let result = arr.slice(2,5)
console.log(result)   //[1, 2, 3, 700, 8000]
console.log(arr)      //[1, 2, 3, 4, 50, 60, 700, 8000]  원본 배열은 변경 x

length (배열의 길이)

배열의 요소의 갯수를 배열의 길이라고 한다.

let arr = [1, 2, 3, 4, 50, 60, 700, 8000]
console.log(arr.length)   // 8 출력

splice

arr.splice(시작index, n(숫자), x(변경할 데이터값))
시작index부터 n개 만큼 x로 값을 변경
n값이 생략되거나 length 보다 긴 경우 시작 index부터 모든 요소 제거
x값이 지정되지 않으면 요소 제거만 수행

let arr = [1, 2, 3, 4, 50, 60, 700, 8000]
arr.splice(1, 4, 0)
console.log(arr)         // [1, 0, 0, 0, 0, 60, 700, 8000]
let removeArr = arr.splice(5, 2)
console.log(arr)        // [1, 0, 0, 0, 0, 8000]
console.loge(removeArr) //[60, 700]   삭제된 요소들을 변수에 담아 출력할 수 있다.

concat (합치기)

let arr1 = [1, 2, 3, 4]
let arr2 = [4, 5, 6, 7]
let arr3 = arr1.concat(arr2)
console.log(arr3)    // [1, 2, 3, 4, 4, 5, 6, 7]  중복값 상관없이 합쳐짐
console.log(arr1)    // [1, 2, 3, 4]  원본배열에 영향 x

indexOf

특정값의 index 값을 반환하는 메소드

let animals = ['dog', 'cat', 'pig', 'bird', 'tiger', 'lion']
let num = animals.indexOf('dog')
let num2 = animals.indexOf('lion')
console.log(num)   // 0  'dog'의 index 값
console.log(num2)  // 5  'lion'의 index 값

• 중복된 값이 있을때는 먼저나온 index값이 반환된다.
• 값이 존재하지 않을 경우 -1 을 반환

join (문자열 반환)

let arr = ['3기', 'fullstack', 'wecode']
console.log(arr.join())     // 3기,fullstack,wecode  ()안에 인수가 없을시 쉼표(,)로 구분해서 반환
console.log(arr.join(' '))  // 3기 fullstack wecode

filter

특정 조건에서 참인 값들을 모아서 새로운 배열을 만드는 메소드

arr.filter(callback(element[, index[, array]])[, thisArg])

위와 같이 기본적인 형태를 가지고 있다.
element - 배열의 요소
index - 요소의 index
array - 호출한 배열
thisArg - filter에 사용될 this 값

간단하게 해석하면
callback 함수의 return 값이 참이되는 값들을 모아서 새로운 배열은 만든다.

let arr = [1, 2, 3, 4, 5, 10, 20, 40, 50]
// 10보다 작은 값들만 걸러지는 조건으로 filter 메소드 사용
let lessThanTen = arr.filter(function(num){
  return num < 10;
})
console.log(lessThanTen)  // [1, 2, 3, 4, 5]
// 함수의 다른 표현법
let lessThanTen = arr.filter(num => num <10) // 결과는 같다.

자세한 화살표 함수(Arrow function) 참조 자료

반복문 (for 문)

for문의 기본적인 형태

for (초기식 ; 조건식 ; 증감식){
  수행할 동작
}
// 1부터 1씩 증가해서 10까지 출력
for (i=0 ; i<10 ; i++){
  console.log(i+1)
}
/*
1
2
3
...
8
9
10
*/

// 배열안에 있는 모든 숫자(요소)에 더하기 2씩 해서 출력
let arr = [1, 2, 3, 4, 56, 67, 94]
for (i=0 ; i<arr.length ; i++){
  arr[i] = arr[i]+2;
}
console.log(arr)    // [3, 4, 5, 6, 58, 69, 96]