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에서 해당 요소는 사라진다)

2. 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 함수라고 부른다.

3. 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/

4. indexOf()

   • 내가 찾고자 하는 항목의 index를 찾아주는 함수이다.
   • array 안의 값이 number, string, boolean 일 때

     const superheroes = ['아이언맨', '토르', '헐크', '스파이더맨'];
     const index = superheroes.indexOf('헐크');
     console.log(index) // 2

5. 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}

6. 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(어디서부터 자를지, 어디까지 자를지)

7. 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

8. 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/