[JavaScript 기본] 배열 / 반복문 / 배열 내장 함수

📖 배열

📍 생성자 호출해서 배열 만들기

1. let arr = new Array();
2. 🌟 let arr = [];

📍 js 배열 특징

자료형이 상관 없다. let arr = [1, "2", true, null, undefined, {}, [], function () {}];

📍 배열 접근

//인덱스를 통해서 배열 접근
let num = [1, 2, 3, 4, 5];
console.log(num);
console.log(num[0]);
console.log(num[1]);

>>> 출력값
[1, 2, 3, 4, 5]
1
2

📍 배열 추가: push

let num = [1, 2, 3, 4, 5];
num.push(6); //배열 마지막에 추가
console.log(num);

>>> 출력값
[1, 2, 3, 4, 5, 6]

📍 배열 길이 확인: length

let num = [1, 2, 3, 4, 5];
console.log(num.length);

>>> 출력값
5

📖 반복문

1. for (초기식, 조건식, 증감식) {}
2. while (조건식) {}

📍 객체 순회: keys, values

• keys: 객체의 키값을 배열 형태로 반환해주는 메소드

  let person = {
  name: "sk",
  age: 22,
  tall: 165,
  };
  
  const personKeys = Object.keys(person);
  console.log(personKeys);
  
  >>> 출력값
  [ 'name', 'age', 'tall' ]
  

• values: 객체의 값만 배열 형태로 반환해주는 메소드

  let person = {
    name: "sk",
    age: 22,
    tall: 165,
  };
  const personValues = Object.values(person);
  console.log(personValues);
  
  >>> 출력값
  ['sk', 22, 165]
  

📖 배열 내장 함수

1. forEach((elm) => {}): 배열을 순회하며 elm를 가져오는 함수

   let arr = [1, 2, 3, 4];
   arr.forEach((elm) => console.log(elm * 2));
   
   >>> 출력값
   2
   4
   6
   8
   

2. map((elm) => {}): 배열의 요소를 하나씩 불러와서 값 수정 후 값들을 모아서 배열로 반환하는 함수

   let arr = [1, 2, 3, 4];
   const newArr = arr.map((elm) => {
   return elm * 2;
   });
   
   newArr.forEach((elm) => console.log(elm));
   
   >>> 출력값
   2
   4
   6
   8
   

3. includes: 어떤 값이 있다면 true, 없다면 false를 반환하는 함수

   let arr = [1, 2, 3, 4];
   let num = 3;
   let str = "3";
   
   console.log(arr.includes(num)); //true
   console.log(arr.includes(str)); //false
   

4. indexOf: 어떤 값이 있다면 그 값의 인덱스를 반환하는 함수

   let arr = [1, 2, 3, 4];
   
   console.log(arr.indexOf(num)); //2
   console.log(arr.indexOf(str)); //-1 : 배열에 값이 없다면 -1 리턴
   

5. findIndex((elm) => {}): 객체 배열인 경우 처음부터 순회하면서 같은 값의 인덱스를 반환하는 함수

   const obj = [
     { color: "red" }, //객체 하나
     { color: "black" },
     { color: "green" },
     { color: "blue" },
     { color: "purple" },
   ];
   
   console.log(obj.findIndex((elm) => elm.color === "green")); //2
   
   const idx = obj.findIndex((elm) => {
     return elm.color === "blue";
   });
   
   console.log(idx); //3
   

6. find((elm) => {}): 객체 배열의 요소에 직접 접근하는 함수

   const obj = [
     { color: "red" }, //객체 하나
     { color: "black" },
     { color: "green" },
     { color: "blue" },
     { color: "purple" },
   ];
   
   const element = obj.find((elm) => {
     return elm.color === "blue";
   });
   
   console.log(element); //{ color: 'blue' }
   

7. filter((elm) => {}): 객체 배열에서 특정한 조건을 만족하는 요소를 모두 찾아서 배열로 반환하는 함수

   const obj = [
     { num: 1, color: "red" }, //객체 하나
     { num: 2, color: "black" },
     { num: 3, color: "green" },
     { num: 4, color: "blue" },
     { num: 5, color: "purple" },
   ];
   
   console.log(obj.filter((elm) => elm.color === "blue")); //[ { num: 4, color: 'blue' } ]
   

8. slice(start, end + 1): 객체 배열 슬라이싱 해주는 함수

   const obj = [
     { num: 1, color: "red" }, //객체 하나
     { num: 2, color: "black" },
     { num: 3, color: "green" },
     { num: 4, color: "blue" },
     { num: 5, color: "purple" },
   ];
   
   console.log(obj.slice(0, 3));
   
   >>> 출력값
   [
   { num: 1, color: 'red' },
   { num: 2, color: 'black' },
   { num: 3, color: 'green' }
   ]
   

9. arr.concat(arr2): 배열의 값을 붙혀서 배열로 반환해주는 함수

   const numArr = [1, 2, 3];
   const numArr2 = [4, 5];
   
   console.log(numArr.concat(numArr2)); //[ 1, 2, 3, 4, 5 ]
   

10. sort(): 배열 정렬

    let chars = ["나", "하", "사"];
    console.log(chars); //[ '나', '하', '사' ]
    chars.sort();
    console.log(chars); //[ '나', '사', '하' ]
    

    sort의 경우는 문자열을 기준으로 정렬하므로 숫자를 기준으로 정렬을 하려면 인자로 비교 함수를 넣는다.

    let numbers = [0, 1, 3, 2, 10, 30, 20];
    
    const compare = (a, b) => {
      if (a > b) {
        return 1; //크다
      } else if (a < b) {
        return -1; //작다.
      } else {
        return 0;
      }
    };
    
    numbers.sort(compare);
    console.log(numbers);
    
    >>> 출력값
    [
    0,  1,  2, 3,
    10, 20, 30
    ]
    

11. join(): 인자가 구분자가 되어 모든 배열의 값을 문자열로 합치는 함수

    const strArr = ["안녕하세요", "손수경입니다."];
    console.log(strArr.join()); //안녕하세요,손수경입니다.
    console.log(strArr.join(" ")); //안녕하세요 손수경입니다.