배열 데이터 활용

.concat()

: 배열 합치기

const numbers = [1,2,3,4,5,6];
const alphabets = ['a', 'b', 'c'];

console.log(numbers.concat(alphabets));
console.log(numbers);  
console.log(alphabets);

.concat() 함수는 원본 배열을 수정하지 않는다.

.forEach()와 .map()

const numbers = [1, 2, 3, 4, 5, 6];
const alphabets = ['a', 'b', 'c'];


alphabets.forEach(function (item, idx) {
  console.log(`${item} - ${idx}`);
});

const a = alphabets.map(function (item, idx) {
  return `${item}-${idx}`;
});

console.log(a);     //['a-0', 'b-1', 'c-2']

.forEach()는 리턴값을 반환하지 않지만 .map()은 배열을 리턴받을 수 있다. 또는 객체형으로 리턴받을 수도 있다.

const a = alphabets.map( (item, idx) =>  ({
    id: idx,
    name: item,
  }));

.filter()

const a = numbers.map((number) => {
  return number < 3;
});

console.log(a);
//[true, true, false, false, false, false]

const b = numbers.filter((number) => {
  return number < 3;
});
console.log(b);
//[1, 2]

.find()

const numbers = [1, 2, 3, 4, 5, 6];
const fruits = ['apple', 'banana', 'cherry'];

const a = fruits.find((fruit) => /^b/.test(fruit));    //b로 시작하는 요소를 찾으면 반복을 종료한다

console.log(a);       // banana

const b = fruits.findIndex((fruit) => /^b/.test(fruit));  //인덱스 찾기

console.log(b);

---

객체 데이터 활용

.assign()

const userAge = {
  name: 'jueon',
  age: 24,
};

const userEmail = {
  name: 'jueon',
  email: 'jueon@mail',
};

const target = Object.assign(userAge, userEmail);
console.log(target);
console.log(userAge);
console.log(target === userAge);  //true

const a = { k: 123 };
const b = { k: 123 };
console.log(a === b);             //false

Object.assign(target, source) 형태로 사용하며, 소스 객체를 타겟 객체에 붙여넣은 후 타겟 객체를 리턴한다. 따라서 위의 코드에서 target과 userAge는 같은 객체이다.

두 개의 객체를 합쳐 새로운 객체를 생성하기 위해서는 아래와 같은 코드를 사용하면 된다.

const target = Object.assign({}, userAge, userEmail);
const target = Object.assign({}, userAge);

.keys()

updateState(state, payload) {
      Object.keys(payload);
    },

객체데이터의 속성의 이름들만 추출하여 새로운 배열 생성

[movies, message, loading] 가 반환된다.

---

얕은 복사와 깊은 복사 - lodash 활용

얕은복사

const user = {
  name: 'Heropy',
  age: 85,
  emails: ['email1'],
};

// const copyUser = Object.assign({}, user);
const copyUser = { ...user };
console.log(copyUser === user);  //false

user.age = 22;
console.log('user', user);
console.log('copyUser', copyUser);

user.emails.push('email22');
console.log(user.emails === copyUser.emails);   //true

console.log(user.emails === copyUser.emails); 가 true인 이유는, 배열 또한 참조형 데이터이기 때문에 위의 두 객체 속성 중 email 은 같은 주소를 공유하고 있기 때문이다.

즉 위의 코드는 객체의 겉 표면만 복사한 것이고 내부의 속성까지는 복사하지 않는 얕은 복사를 수행하는 것이다. 내부의 내용을 모두 복사하기 위해서는 lodash 라이브러리를 활용하는 것이 유용하다

https://lodash.com/docs/4.17.15#cloneDeep