Javascript : 배열(Array)

   Javascript : 배열(Array)

1. 배열이란?
2. 배열 객체 생성 방법
3. 배열 객체 요소 선택하기(인덱스)
4. 배열 객체 메소드
5. 콜백 함수

 

 

1. 배열이란?

    배열(Array)

     변수는 데이터가 한개만 저장되었지만, 여러 개의 데이터를 하나의 장소에 저장하려면 배열 객체(Array Object)를 생성하면 된다.
     배열(配列)은 '나눌 배'와 '열거할 열'을 사용해 만든 글자로 하나의 저장소에 나눠서 데이터를 열거하라는 의미다.

// 변수에 담아주려면 하나 하나 따로 만들어야한다.

let user_no = 1.

    user_name = "이박사",

    user_age = 35,

    user_job = "연구원"

    user_addr = "서울"

// 배열 객체를 생성하면 한번에 해결 가능

let user_info = new Array(1, "이박사", 35, "연구원", "서울")

 

 

 

2. 배열 객체 생성 방법

    배열 객체를 생성하는 3가지 방법 : 세가지 방법 모두 결과는 동일하다.

// 배열객체를 생성하는 세가지 방법

 

// 배열객체 생성 방법_1

let 참조변수 = new Array( );

참조변수[0]=값1;

참조변수[1]=값2;

참조변수[3]=값3;

...

참조변수[n-1]=값n;

// 배열객체 생성 방법_2

let 참조변수 = new Array(값1, 값2, 값3, ... 값n);

// 배열객체 생성 방법_3

let 참조변수 = [값1, 값2, 값3, ... 값n];

 

    배열 객체 생성 방법_1

let bicycle = new Array();

bicycle[0] = 30;

bicycle[1] = "따르릉";

bicycle[2] = true

console.log(bicycle);

console.log(bicycle.length);

 

 

    배열 객체 생성 방법_2

let bicycle = new Array(30, "따르릉", true);

console.log(bicycle);

console.log(bicycle.length);

 

 

 

    배열 객체 생성 방법_3

let bicycle = [30, "따르릉", true];

console.log(bicycle);

console.log(bicycle.length);

 

 

 

 

3. 배열 객체 요소 선택하기

    배열 객체에 저장 된 데이터 가져오기(요소 접근)

참조변수[인덱스번호];

let bicycle = [30, "따르릉", true];

console.log(bicycle[0]);

console.log(bicycle[1]);

console.log(bicycle[2]);

 

 

0번째 방부터 시작해서 하나씩 차례대로 들어간다.

 

 

 

 

 

4. 배열 객체 메소드 

    배열 객체의 메소드 및 속성

종류	설명
join(연결문자)	배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환한다.
concat( )	2개의 배열 객체를 하나로 결합한다.
unshift(new data)	배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입한다.
push(new data)	배열 객체의 마지막 인덱스에 새 데이터를 삽입한다.
shift( )	배열 객체에 저장 된 데이터 중 첫번째 인덱스에 저장 된 데이터를 삭제한다.
pop( )	배열 객체에 저장 된 데이터 중 마지막 인덱스에 저장 된 데이터를 삭제한다.
splice( )	배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다.
sort( )	배열 객체의 데이터를 오름차순으로 정렬한다.
reverse( )	배열 객체의 데이터를 내림차순으로 정렬한다.
slice(index1, index2)	배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다.
length( )	배열에 저장 된 총 데이터의 개수를 반환한다. (배열의 인덱스 개수)

 

 

    배열객체.join( );   :  배열에 저장 된 데이터의 총 길이를 확인하는 메소드

 

 

    배열객체.concat( );   :  2개의 배열 객체를 하나로 결합하는 메소드

 

 

 

    배열객체.unshift("배열객체 맨 앞 인덱스에 넣어줄 데이터");   :  첫번째 인덱스에 데이터 추가하는 메소드

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

bicycle.unshift("철수");

console.log("2==>", bicycle);

 

 

.unshift 시 넣어주는 데이터가 0번째로 가면서 옆으로 밀어낸다.

 

 

    배열객체.push("배열객체 마지막 인덱스에 넣어줄 데이터");   :  마지막 인덱스에 데이터 추가하는 메소드

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

bicycle.push("바퀴");

console.log("2==>", bicycle);

 

 

 

    배열객체.shift();   :  첫번째 인덱스의 데이터를 삭제하는 메소드

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

bicycle.shift();

console.log("2==>", bicycle);

 

첫번째 index인 '30'이 삭제되었다.

 

 

    배열객체.pop( );   :  배열의 마지막을 삭제하는 메소드

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

bicycle.pop();

console.log("2==>", bicycle);

 

마지막 index인 'true'가 삭제되었다.

 

 

    배열객체.splice(시작 위치 인덱스 번호, 종료 위치 인덱스 번호, "삭제 후 대체하여 새로 넣어 줄 값");   
    :  배열에 저장 된 지정 데이터를 삭제 후 새로운 데이터를 넣어주는 메소드

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

bicycle.splice(1, 1,"타요")

console.log("2==>", bicycle);

1번 인덱스에 위치한 '따르릉'을 삭제 후 '타요'를 추가했다.

 

 

 

    배열객체.sort( );   :  배열에 저장 된 데이터의 총 길

 

 

    배열객체.reverse( );   :  배열에 저장 된 데이터의 총 길

 

 

    배열객체.slice( 시작 인덱스 번호, 종료 인덱스 번호);  :  배열에 저장 된 데이터를 잘라 새로운 배열 객체를 생성한다.

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

let newBicycle = bicycle.slice(1,2)

console.log("2==>", newBicycle);

 

 

 

 

 

    배열객체.length( );   :  배열에 저장 된 데이터의 총 길이를 확인하는 메소드

let bicycle = [30, "따르릉", true];

console.log("1==>", bicycle);

console.log("2==>", bicycle.length);

 

 

 

 

 

 

5. 콜백 함수

    배열의 내부 요소를 활용한 콜백 함수

 

    배열객체.forEach( );   :  배열 내부의 요소를 사용하여 콜백(callback)함수를 호출

배열객체.forEach(function (value, index, array) {

    // 자바스크립트 실행 로직;

 })

let numbers = [1, 2, 3, 4, 5];

// 매개변수 자리에 함수를 넣는 것을 콜백 함수라고 한다.

numbers.forEach(function(item){

    console.log("item입니다=>" + item)

});

 

 

 

 

numbers의 배열 요소를 item에 한번씩 던져서 실행해 준다.

 

 

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function(value, index){

    console.log(`${index}번째 요소 : ${value}`)

});

 

 

 

 

 

 

 

    배열객체.map( );   :  콜백 함수에서 return한 값을 기반으로 새로운 배열을 만드는 함수
                                          map 함수는 반드시 return문을 사용하여야 한다.

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map(function(item){

    return item * 2;

});

console.log(newNumbers)

 

 

 

    배열객체.filter( );  : 콜백 함수에서 return 하는 값이 true인 것만 모아서 새로운 배열을 만드는 함수 

 

let numbers = [1, 2, 3, 4, 5];

let filtersNumber = numbers.filter(function(item){

    return item === 5

});

console.log(filtersNumber);

 

item의 value가 5인 것을 찾아라

 

let numbers = [1, 2, 3, 4, 5];

let filtersNumber = numbers.filter(function(item){

    return item !== 5

});

console.log(filtersNumber);

 

item의 value가 5가 아닌 것을 찾아라

 

 

    배열객체.find( );  :  콜백 함수에서 return 하는 값이 true인 단 하나의 요소만 찾는다.
                                        .filter와 유사하지만 조건문에 맞는 첫번째 요소를 찾아 return하고 종료한다.

let numbers = [1, 2, 3, 4, 5];

let result = numbers.find(function(item){

    return item > 3;

})

console.log(result);