1. Object

  • object 역시 array 처럼 순회가 가능하다. 단지 array와 다르게 명확하게 정해진 순서가 없기 때문에 어떤 순서에 따라 object의 key에 접근하게 될 지는 알 수 없다. ('순서가 보장되지 않은 순회')

1.1 Object.keys()

  • 개체의 고유 속성의 이름을 array로 반환한다.
    cosnt object {
       name: jotang,
       age: 31,
       city: busan
       phone: 0101234567
    };
    Object.keys(object) // ['name', 'age', 'city', 'phone']
  • Object.values() / Object.entries()
    • Object.values() : object의 key가 아닌 value로 이루이어진 array 를 return 한다.
    • Object.entries() : object의 key와 value로 이루어진 array를 array로 reuturn 한다.
      Object.values(object) // ['jotang', 31, 'busan', 0101234567]
      Object.entries(object) 
      // [['name', 'jotang'], ['age', 31], ['city', 'busan'], ['phone', 0101234567]]

1.2 for - in

  • ES6에서 object와 array를 위해 특별히 추가된 문법이다.
  • object 외에도 일반적인 array에도 굉장히 유용하다.
    // array에서의 for-in
    const name = ['jotang', 'dongtak', 'dama', 'health']
    for (let i in name) {
        console.log(i) //index value
        console.log(name[i]) // 'jotang', 'dongtak' 등 각 요소 반환
    }
    // object에서의 for-in
    cosnt object {
        name: jotang,
        age: 31,
        city: busan
        phone: 0101234567
    };
    for (let i in object) {
        console.log(i) // 해당 object의 key // 'name', 'age', 'city', 'phone'
        console.log(object[i]) //object의 value // 'jotang',31,'busan',0101234567
    }

2. Array

2.1 Array

  • object와 같이 앞서 array에 대해서 정리하였지만 한번 더 학습하도록 한다.
  • array란 여러개의 항목들이 들어있는 리스트와 같다.
    const array = [1, 2, 3, 4, 5];
    array[0] = 1;
    array[1] = 2;
    //객체 배열
    const objects = [{name: '멍멍이'}, {name: '야옹이'}]
    object[0] = {name: '멍멍이'}
    object[1] = {name: '야옹이'}

2.2 array의 내장함수

  1. push() / unshift() / pop() / shift()
    • push() : 배열의 맨 뒤에 추가
    • unshift() : 배열의 맨 앞에 추가
    • pop() : 배열의 마지막 요소를 추출, 마지막 요소의 값을 반환한다.
    • shift() : 배열의 제일 앞 요소를 추출, 제일 앞 요소의 값을 반환한다.
    • pop() / shift() : 추출하는 과정에서 기존 array에서 해당 요소는 사라진다)
  1. forEach()
    • for문을 대체 할 수 있다. 배열의 각 요소별로 지정된 함수를 실행한다.
      const superheroes = ['아이언맨', '토르', '헐크', '스파이더맨']
      //for문 사용
      for(let i = 0; i < superheroes.length; i++) {
           console.log(superheroes[i);
      }
      // forEach()
      superheroes.forEach(hero => {
           console.log(hero);
      });
    • 함수형태의 parameter를 전달하는 것을 callback 함수라고 부른다.
  1. map()

    • forEach()와 같이 array를 반복해주고, array안의 각 요소를 변환 할 때 사용한다.
    • callback 함수에서 return한 값으로 각각의 요소를 수정하고 수정된 값으로 다시 새로운 array를 만든다. 쉽게 말해서 array의 각 요소별로 지정된 함수를 실행하고 그 결과로 구성된 새로운 array를 반환하게 된다.
      const array = [1, 2, 3, 4, 5, 6, 7, 8];
      // 위 array를 제곱하여 새로운 array를 만들고 싶다면??
      // for 문
      const array2 = [];
      for(let i = 0; i < array.length; i++) {
           array2.push(array[i] * array[i]);
      }
      const array2 = [];
      //forEach()
      array.forEach(n => {
           array2.push(n * n);
      }
      //map()
      const array2 = n => n * n
      const array3 = array.map(array2)

      https://www.robinwieruch.de/javascript-map-array/

  2. indexOf()

    • 내가 찾고자 하는 항목의 index를 찾아주는 함수이다.
    • array 안의 값이 number, string, boolean 일 때
      const superheroes = ['아이언맨', '토르', '헐크', '스파이더맨'];
      const index = superheroes.indexOf('헐크');
      console.log(index) // 2
  3. findIndex() / find()

    • array안의 값이 object이거나 array 일 때
      const todos = [
      {
         id: 1,
         text: '자바스크립트 입문',
         done: true
      },
      {
         id: 2,
         text: '함수 배우기',
         done: true
      },
      {
         id: 3,
         text: '객체와 배열 배우기',
         done: true
      }];
      const index = todos.findIndex(todo => todo.id === 2);
      console.log(index) // 1
    • findIndex 함수에 검사하고자 하는 조건을 반환하는 함수를 넣어서 찾을 수 있다.
    • find() 함수는 findIndex()와 비슷하지만, find()는 찾아낸 값 자체를 반환한다.
      const index2 = todos.find(todo => todo.id === 1);
      console.log(index2) // {id: 1, text: '자바스크립트 입문', done: true}
  4. splice() / slice()

  • splice()

    • array에서 특정 요소를 제거할 때 사용하는 함수이다.
    • index를 알아내고, 이를 splice()를 통해서 지울수 있따.
      const numbers = [10, 20, 30, 40];
      const index = numbers.indexOf(30);
      numbers.splice(index, 1);
      console.log(numbers); // [10, 20, 40]
      // splice(제거할 index, 몇개를 지울지를 의미, 그 자리에 추가될 요소)
  • slice()

    • array을 잘라낼 때 사용하지만, 기존의 array는 건드리지 않는다.
      const numbers = [10, 20, 30, 40];
      const sliced = numbers.slice(0, 2); // 0부터 시작해서 2전까지
      console.log(sliced); // [10, 20]
      console.log(numbers); // [10, 20, 30, 40]
      // slice(어디서부터 자를지, 어디까지 자를지)
  1. concat() / join()
  • concat()
    • 여러개의 array를 하나의 array로 합쳐준다.
      const arr1 = [1, 2, 3];
      const arr2 = [4, 5, 6];
      const concated = arr1.concat(arr2);
      console.log(concated); // [1, 2, 3, 4, 5, 6];
      // arr1과 arr2에는 변화를 주지 않는다.
  • join()
    • array안의 값들을 문자열 형태로 합쳐준다.
      const array = [1, 2, 3, 4, 5];
      console.log(array.join()); // 1,2,3,4,5
      console.log(array.join(' ')); // 1 2 3 4 5
      console.log(array.join(', ')); // 1, 2, 3, 4, 5
  1. reduce()
    • 주어진 array의 총 합을 구하는데 유용하게 사용할 수 있다.
      const numbers = [1, 2, 3, 4, 5];
      let sum = array.reduce((accumulator, current) => accumulator + current, 0);
      console.log(sum);
    • reduce()는 2개의 parameter를 전달한다.
      • accmulator와 current를 parameter로 가져와서 결과를 반환하는 callback 함수
      • 2번째 parameter는 reduce함수에서 사용할 초기 값
      • accmulator는 누적된 값을 의미한다.

https://learnjs.vlpt.us/basics/09-array-functions.html
http://blog.302chanwoo.com/2017/08/javascript-array-method/