[javascript] JavaScript 내장 메소드2(배열 관련 메소드) - length(), push, pop, unshift, shift, indexOf, join, reverse, includes, map, forEach, find, filter, for ~ or

 배열 관련 메소드

    - length (속성)
    - push, pop, unshift, shift, indexOf, join, reverse
    - includes, map, forEach, find, filter
    - for ~ of (함수 아님)

 

let arr1 = [1,2,3,4,5];
let arr2 = ["quakka","puppy","rabbit","hamster"];

arr1[5] = 6;
arr1[7] = 7;
console.log(arr1) // (6) [1, 2, 3, 4, 5, 6]
                 // (8) [1, 2, 3, 4, 5, 6, empty, 7]

 

 

push() : 배열 뒤부분 추가 

arr1 = [1,2,3,4,5];
arr1.push(6);
arr1.push(7);
arr1.push(10);
console.log(arr1); // (8) [1,2,3,4,5,6,7,10]

 

 

pop() : 배열 뒤부분 삭제 

arr1 = [1,2,3,4,5,6,7,10];
arr1.pop(); 
arr1.pop();
arr1.pop();
console.log(arr1); // (5) [1, 2, 3, 4, 5]

 

 

 

unshift() : 배열 앞에 원소 추가 

let arr2 = ["quakka","puppy","rabbit","hamster"];

arr2.unshift("cat"); 
console.log(arr2); // (5) ['cat', 'quakka', 'puppy', 'rabbit', 'hamster']

 

 

shift() : 배열 앞에 원소 제거

let arr2 = ['cat', 'quakka', 'puppy', 'rabbit', 'hamster'];

arr2.shift(); 
console.log(arr2) // (4) ['quakka', 'puppy', 'rabbit', 'hamster']

 

 

 

includes : 매개변수 한개 - 배열의 요소가 들어감

     - 매개변수로 들어간 요소가 배열에 있으면 true, 없으면 false

     - 문자열이 특정 문자열을 포함하는지 확인하는 메서드

let arr2 = ["quakka","puppy","rabbit","hamster"];

console.log(arr2.includes("cat")) // false
console.log(arr2.includes(1)) // false
console.log(arr2.includes("quakka")) // ture

 

 

indexOf : 문자열에서 특정 문자의 위치를 찾기

      - 문자열의 indexOf와 동일
      - 몇번 인덱스인지 확인 후 인덱스값 반환

let arr2 = ["quakka","puppy","rabbit","hamster"];

console.log(arr2.indexOf("quakka")) // 0
console.log(arr2.indexOf("hamster")) // 3

 

 

 

reverse : 배열의 순서를 뒤집어줌

      - 실제 배열이 변경됨

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

arr1.reverse();
console.log(arr1); // (5) [5, 4, 3, 2, 1]

 

 

join : 배열을 문자열로 변경

     - 문자열의 split 메소드와 반대

let str1 = "Strawbery Moon";

str1 = str1.split('');
console.log(str1); // (14) ['S', 't', 'r', 'a', 'w', 'b', 'e', 'r', 'y', ' ', 'M', 'o', 'o', 'n']

str1 = str1.join('+');
console.log(str1) // S+t+r+a+w+b+e+r+y+ +M+o+o+n

 

 

 

for of  : 반복문

     - 반복 가능한 객체(Array, Map, Set, String, TypedArray, arguments 객체 등 포함)에 대해 사용함. 

     - 대체로 Array(배열)에 사용함

let arr3 = [5,6,7,8,9];
let alphabets = ["a","b","c","d","e","f"];
for(let i = 0; i < arr3.length; i++){
    console.log(arr3[i]) // 5 6 7 8 9
}

console.log('===== for of ======')
for(let number of arr3){
    console.log(number) // 5 6 7 8 9
}

for(let alphabet of alphabets){
    console.log(alphabet) // a b c d e f
}

 

 

 

forEach  : 반복문

     - Array(배열)에 사용되는 메서드

     - map() 메서드와 거의 비슷하지만 return 하는 값이 없음

     - 1. 배열의 요소들을 반복하여 작업을 수행할 수 있고 foreach 구문의 인자로 콜백 함수를 등록함

     - 2. 배열의 각 요소들이 반복될 때 콜백 함수가 호출

// forEach 문법
배열.forEach(function(element(요소)[,index,array]) {

})

let arr3 = [5,6,7,8,9];

console.log('===== forEach =====')
arr3.forEach(function(element, index, arr){
    console.log(element, index, arr) 
}); // 순서 중요 (element, index, array)

 

 

filter : return 이후 조건을 만족하는 요소들을 모아서 "배열"로 반환

let arr2 = ["quakka","puppy","rabbit","hamster"];

// 1. filter 함수 표현식
let six = arr2.filter(function(word){
    return word.length === 6;
});


// 2. filter 화살표 함수 & return 있는 ver.
let six2 = arr2.filter((word) => {
    return word.length === 6;
});


// 3. flieter 화살표 함수 & return 없는 ver.(중괄호 없어야 성립)
let six3 = arr2.filter((word) =>word.length === 6);

console.log(arr2); // (4) ['quakka', 'puppy', 'rabbit', 'hamster']
console.log(six); // (2) ['quakka', 'rabbit']
console.log(six2); // (2) ['quakka', 'rabbit']
console.log(six3); // (2) ['quakka', 'rabbit']

 

 

 

map : 배열 내의 모든 요소에 대해 함수 호출한 결과를 모아서 배열로 반환

console.log('===== map =====')
let arr4 = [1,2,3,4,5];

let multiArr = arr4.map(function(element){
    return element * 3;
});
console.log(multiArr); // (5) [3, 6, 9, 12, 15]

 

 

 

fine : 배열에서 특정 조건을 만족하는 첫번째 "요소" 반환

let multiArr = [3, 6, 9, 12, 15];

console.log('===== fine =====')
let findResult = multiArr.find(function(element){
    return element > 10;
});
console.log(findResult); // 12