JS 코딩의 기술) 2일차

4. push() 대신 펼침 메서드를 이용해 원본 조작을 방지

 

push() 메서드는 새로운 항목을 배열 뒤에 생성해서 원본 배열을 조작한다.

원본조작으로 인해 발생하는 문제들을 방지하고자 부수효과가 없는 순수 함수(pure function)를 만들기를 노력해야한다.

이는 펼침 연산자를 이용하면 쉽게 해결된다.                             (순수 함수에 대해서는 따로 공부 해보자)

cart.push(reward);

    return cart;

 

return [...cart, reward];

위의 코드처럼 새로운 항목을 추가할 시 [...arry, newOne]이란 형식으로 해주면 된다. (앞 뒤로 여러개 추가 가능)

slice(begin, end) 를 이용해 복사한 배열을 붙여 추가할 수 있지만 펼침연산자를 이용하는게 더 편하다.

slice(begin, end)는 배열의 begin부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환합니다.

음수 인덱스는 배열의 끝에서부터의 길이를 나타낸다.

 

 

5. 펼침연산자와 정렬 ( 사이드 프로젝트에 사용하자 )펼침 연산자를 이용해서 정렬을 여러번 해도 같은 배열의 순서가 나오게 해보자

const friends = [

  {

    name: `Joe`,

    years: 22,

  },

  {

    name: `Theo`,

    years: 25,

  },

  {

    name: `Dyan`,

    years: 21,

  },

];

위의 배열을

function sortByYears(a, b) {

  if (a.years === b.years) {

    return 0;

  }

  return a.years - b.years;

}

const sortByName = (a, b) => {

  if (a.name === b.name) {

    return 0;

  }

  return a.name > b.name ? 1 : -1;   //조건(삼항)연산자 : 조건이 참이면 val1(a.name), 거짓이면 val2(b.name) 반환

}

이 함수로 정렬할 때

staff.sort(sortByYears);

위와 같은 형식으로 정렬하면 다시 정렬할 때 인덱스가 뒤섞여 사용자가 혼란스러워 진다.

이번엔 펼침 연산자를 이용한 코드를 보자

[...staff].sort(sortByYears);

위의 펼침 연산자를 이용한 코드를 작성하면 인덱스가 섞이지 않게 된다.

하지만, 위와 같이 인덱스가 섞이면 안되는 경우에서 원본을 조작하는 메서드를 이용해야 할 경우 원본 데이터를 조작하지 말고 사본을 만들어 그 사본을 조작하면 된다. 그러면 원본의 인덱스는 섞이지 않아 사용자는 애플리케이션에 대한 신뢰를 잃지 않을 것이다.

 

6. 객체를 이용한 키-값 탐색

배열을 사용하기 복잡한 상황에서 객체를 이용해서 유연하게 코드를 작성하자

복잡한 상황이란? 색의 rgb값과 같은 값이나 16진수 등 직설적으로 사용자에게 값의 정보를 전달하기 힘들때 객체를 이용하여 정보를 전달하자. 아래의 예시를 보자.

const color1 = [`#d11111`, `#d12345`, `#00000`];

 

const color2 = {

  1: `#d11111`,

  2: `#d12345`,

  3: `#00000`,

};

이렇게 배열을 사용하면 해당 인덱스에 있는 값이 무슨 값인지를 나타내지 못한다.

하지만 객체를 이용하면 키-값을 설정하여 사용자에게 보다 용이하게 정보전달을 할 수 있다.

달리 말하면, 사용자에게 값을 표시하기 위해 사용한다.

다른 컬렉션과 같이 하나의 컬렉션이라 생각하고 어떠한 상황에서 맵과 다른 컬렉션을 제치고 객체를 사용해야하나?

바로 정적인 정보를 사용할 때. 즉, 객체에 배정된 값이 변하지 않는 상황이다. 갱신, 반복을 하는 것에는 맵이 어울린다.

또한 항목을 매개변수로 받는 대신, 객체를 전달해 필요한 값을 꺼내 쓸 수 있도록 하는 경우에도 객체가 더 좋다.

객체에서 중괄호에 키-값을 작성 하는 것을 객체 리터럴(object literal)이라 한다.

 

 

7. Object.assign()을 이용해 개체를 조작 없이 생성하자

객체가 완전하지 않기에 객체에 기존 데이커가 있는 상태에서 새로운 필드추가, 외부 API의 데이터를 가져와 현재 데이터 모델에 열결하는 경우에 문제가 발생한다. 여기서 문제는 새로운 필드 또는 데이터로 채워지지 않는 나머지 부분을 디폴트 객체로 채워야 한다는 점이다. 여기서 디폴트 객체는 부수효과나 조작은 없어야 한다.

 

Object.assign()을 이용한 복사는 문제점이 있다.

1) 디폴트값 객체를 갱신하면 원본 객체를 조작하게 된다.

    - 이 문제의 해결책은 빈 객체를 사용하여 빈 객체에 새로운 값이 갱신되게 반환하는 것이다.

   ex)

Object.assign(defaults, anotherBook);

Object.assign({}, defaults, book);

    이런 형식으로 빈 객체 활용

2) 위의 방식대로 속성을 복사할 경우, 값만 복사가 된다.

    - 문자열이나 정수만 있는 경우에는 문제가 없지만 값이 중첩된 객체가 있는 경우는 문제가 된다.

      중첩된 객체를 복사 하는 것을 깊은 복사, 깊은 병합이라 한다. 이때는 속성이 복사가 안된다.

      그저 객체에 대한 참조만 복사되고, 중첩된 객체의 값을 변경하면 원본 객체와 복사한 객체 모두 변경됨.

      해결책은 중첩된 객체도 복사해주면 된다. 예를 들어보자.

const employee2 = Object.assign(

  {},

 defaultEmployee,

  {

    name: Object.assign({}, defaultEmployee.name),

  },

);

      이렇게 사용해주면 된다. defaultEmployee라는 객체는 name이라는 key에 중첩된 값이 쌍을 이루는 객체이다.

 

 

 

오늘은 여기까지이다.

 

화이팅 해서 보다 나은 내일을 위해 

 

Just 두 IT!!!