JS 자료 다루기

객체 - 객체를 배열로 순회하기

• 데이터 구조에 있어서, 객체 안에 객체, 그 객체 안에 배열 또 배열 안에 객체등 아래 예시와 같은 어지러운 구조가 흔함

const data = {
  squadName: 'Super hero squad',
  homeTown: 'Metro City',
  formed: 2016,
  secretBase: 'Super tower',
  active: true,
  members: [
    {
      name: 'Molecule Man',
      age: 29,
      secretIdentity: 'Dan Jukes',
      powers: ['Radiation resistance', 'Turning tiny', 'Radiation blast'],
    },
    {
      name: 'Madame Uppercut',
      age: 39,
      secretIdentity: 'Jane Wilson',
      powers: ['Million tonne punch', 'Damage resistance', 'Superhuman reflexes'],
    },
    {
      name: 'Eternal Flame',
      age: 1000000,
      secretIdentity: 'Unknown',
      powers: ['Immortality', 'Heat Immunity', 'Inferno', 'Teleportation'],
    },
  ],
};

객체 - Object.keys()

• Object.keys는 객체의 키들 인자로 넣은 것을 배열로 반환시켜줌, 일반적인 반복문과 동일한 순서로 순회되어 열거를 해 줌

// 위의 data에서 key에 해당하는 값만 가져옴
const keys = Object.keys(data); // squadName, homeTown, formed, secretBase, active, members

• 참고자료

객체 - Object.values()

• Object.values의 경우 객체를 넣으면 객체의 value의 값을 배열로 반환해서 처리한다는 의미(값들을 배열에 담아서 반환해줌)

// 위의 data에서 value에 해당하는 값만 가져옴(members의 배열 데이터 통으로 포함)
const values = Object.values(data);

• 참고자료

객체 - Object.entries()

• 마찬가지로 객체를 인자로 받고, [key, value]쌍의 배열로 반환을 함
• 배열 안의 배열로 [['key', 'value'], ['key', 'value']]로 순차적으로 데이터를 담아서 반환함

// [key, value]로 데이터를 배열형태로 가져옴
const entries = Object.entries(data);
// [ ['squadName', 'Super hero squad'],
      ['homeTown', 'Metro City'],
    ....
    ]

배열 - 요소 추가와 제거

• 배열안에 있는 하나하나의 인덱스와 그 값들이 요소들임, 그래서 아래 예시와 같이 처리할 수 있음

/**
 * unshift => 배열의 앞에 요소 추가
 * push => 배열의 끝에 요소 추가
 * shift => 배열의 앞에 요소 제거
 * pop => 배열의 끝에 요소 제거
 * splice => 배열의 인덱스를 기반으로 요소 추가 및 삭제
 */

const arr = ['one', 'two', 'three']

arr.push(1)
arr.push(2)
arr.unshift(0)
arr.unshift(-0)

arr.pop() // 배열의 마지막 요소 제거
arr.pop()

arr.shift() // 배열의 앞 요소 제거
arr.shift() 

// splice의 경우, 배열의 기존 요소를 가지고 삭제 혹은 교체 혹은 추가를 할 수 있는 메소드임(그만큼 인자를 많이 받음, 여러개 가능)

// 앞의 요소에 삭제하지 않고 four를 추가
arr.splice(0, 0, 'four')
// 0번째 인덱스를 하나 삭제하고 four를 추가
arr.splice(0, 1, 'four')
// 아무것도 삭제하지 않고 1번째 인덱스에 four를 추가
arr.splice(1, 0, 'four')
// 1번 인덱스를 제거하고 four를 추가한다
arr.splice(1, 1, 'four')

• 위의 메소드들의 단점은 원본 배열을 계속 건드린다는 점임

const arr = ['one', 'two', 'three']
const copyArr = arr;

arr.push(0)
arr.unshift(10)
arr.splice(1, 1, 'four')

// copyArr.push(0);을 해도 arr이 수정됨

// 아무리 copy를 해놔도, arr이 변함에 따라 copyArr도 바뀜
copyArr;

배열 - 요소 병합

• concat 메소드를 통해서 인자로 주어진 배열이나 값을 기존 배열에 합쳐서 새 배열로 반환함
• 즉, 원본 배열이 훼손된다고 했는데 이 원본 배열을 유지할 수 있다는 것

const array = ['JS', 'HTML', 'CSS'];

const newArr = array.concat(['TS', 'Java'])

// array가 훼손되지 않음
array
newArr

// 아래와 같이 해도 원본 배열인 array가 훼손되지 않고 오히려 값도 앞에 붙어서 추가됨
const newArr = ['TS', 'Java'].concat(array); // TS, Java, JS, HTML, CSS

• 혹은 배열 구조 분해를 통해서 값을 쉽게 추가할 수도 있음, 아래와 같이 해도 원본 배열은 유지하고 그 원본 배열의 값을 그대로 복사해서 처리함

const newArr = [ ...array, 'TS', 'Java']
const newArr = ['TS', 'Java', ...array];

• 배열로 해도 동일하게 병합됨

const array = ['JS', 'HTML', 'CSS']
const other = ['TS', 'Java']

const newArr = [...array, ...other];

배열 - 고차 함수로 조작(내장 메서드)

• 배열 메서드가 매우 많은데, 고차함수처럼 쓸 수 있는 것 위주로 알아볼 것임
• map, filter, reduce임
• map의 경우 forEach와 유사하게, 배열 요소마다 해당 아래 function이 자동으로 실행되는 것임

// map을 통해 익명 함수를 넘겨서 처리할 수 있음
const lang = ['JS', 'HTML', 'CSS'];

// return문이 매번 있어야함, 매 배열 요소마다 들어가기 때문에 필요
// 아래 map을 통해서 언어가 뒤에 붙음, 새로운 배열로 만들 수 있음(요소마다 반복해서 처리 용이)
const newLangs = langs.map(function(lang) {
  return lang + ' 언어' // lang.toLowerCase() + ' 언어'도 가능
})

// 조건에 맞는 배열을 만들 수 있음
const langs = ['JS', 'HTML', 'CSS', 0, 1, 2, 3];

// 아래 조건에 맞는 요소만 리턴해서 그 값들로 배열을 만듬
const numbers = langs.filter(function(el) {
  if (typeof el === 'number') {
    return el
  }
})

numbers // [1, 2, 3]

const strings = langs.filter(function(el) {
  if (typeof el === 'string') {
    return el // return true 로 해도 동일하게 생김
  }
})

strings; // ['JS', 'HTML', 'CSS']

// 화살표 함수 활용 가능
const strings = langs.filter((el) => (typeof el === 'string'))

// 별도의 함수로 빼서도 사용 가능
const isNumber = function (el) {
  if (typeof el === 'number') {
    return true;
  }
};

const numbers = langs.filter(isNumber);

• 배열의 인자로 함수를 넘겨서 처리하는 것을 고차함수로 조작한다고 볼 수 있음
• reduce는 누적된 값을 반환하는데 유용함, 함수를 인자로 넣고 마지막 인자로 초기값을 넣어서 쓸 수 있음

function sumTotal(...numbers) {
  // total에 계속 더하는데 current 값에 sumTotal에 인자들이 하나씩 들어와서 계속 누적되서 더해짐, 리턴된 값이 계속 total로 들어가서 더해짐
  // 누적된 값이 있을 때, 유용함
  return numbers.reduce(function(total, current) {
    return total + current
  }, 0)
}

// 화살표 함수로도 가능
function sumTotal(...numbers) {
  return numbers.reduce((total, current) => total + current, 0)
}

sumTotal(1,2,3,4,5,6,7)

배열 - 요소 정렬

• sort 메소드를 통해서 아래와 같이 요소를 정렬 할 수 있음(문자열, 숫자 정렬 용이함)

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

// 오름차순 정렬시, 이 때, a,b 파라미터명은 중요치 않음
const orderNumbers = numbers.sort(function(a, b) {
  return a - b; // b - a; => 내림차순 정렬
})

// 문자열도 가능함(단, 유니코드로 구분하기에 localCompare을 사용할 수 있음)
const strings = ['마', '가', '라', '나', '다'];

const orderStrings = strings.sort(function(a, b) {
  return a.localeCompare(b); // 반대로도 가능 b.localeCompare(a)
}

// 화살표 함수 사용 가능
const orderNumbers = numbers.sort((a, b) => b.localeCompare(a))

// 함수로 따로 빼서도 가능
const 내림차순 = (a, b) => b.localeCompare(a);
const orderNumbers = numbers.sort(내림차순);

배열 - 값 검색

• 아래와 같이 내장 메소드를 활용해서 배열 내의 값이 있는지 다양하게 확인할 수 있음

const members = ['kevin', 'zero', 'base', 'oh']

const result = members.find(function(member) {
  return member === 'zero'
})

// 혹은 해당 값이 있는 인덱스를 뽑을 수도 있음, 없는 값이라면 -1을 반환함
const result = members.findIndex(function(member) {
  return member === 'zero'
})

// indexOf의 경우, findIndex와 유사하고 왼쪽에서 오른쪽으로 찾고, lastIndexOf는 오른쪽에서 왼쪽으로 값을 찾음
const result = members.indexOf(function(member) {
  return member === 'zero'
})
const result = members.lastIndexOf(function(member) {
  return member === 'zero'
})

// includes의 경우 반환을 boolean으로 함, 존재하면 true 반환(비교적 최근 문법임)
const result = members.includes('zero');