타입, Array, Array에 유용한 메서드

자바스크립트 타입

javascript에는 크게 두가지 타입이 있다. 이건 자바스크립트라는 언어에 국한된게 아니고 대부분의 언어의 공통사항이다. 첫번째는 값이 담겨있는 primitive 타입과 두번째는 주소값이 담겨있는 reference 타입이다.primitive 타입에는

• primitive 타입에는 String, Number, Boolean, null, undefined, 그리고 es6에 추가된 symbol까지 6가지
• reference 타입에는 object 가 있다.

이 개념을 분명히 알고있어야 call by value와 call by reference 의 차이점을 이해할 수 있고, shallow copy 와 deep copy의 차이점을 이해할 수 있고, 리액트에서 자주 나오는 immutable의 의미를 이해할 수 있다.

---

Array

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체이다.

JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않다.

배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않는다.

---

Array에 유용한 메서드

아래와 같이 사람의 정보 객체를 담고 있는 array가 있다고 하자.

let people = [
  {name:"LDH", age: 26, height: 180},
  {name:"SMC", age: 25, height: 174},
  {name:"OHJ", age: 24, height: 177},
  {name:"OSH", age: 24, height: 171}
];

unshift (맨 앞에 추가)

사람의 정보 맨 앞에 name이 BOB, age가 30 height가 190인 객체를 배열 맨 앞에 추가하자.

리터럴 객체를 생성한 다음 unshift를 사용해서 결과를 확인해보자.

let bob = {name: "BOB", age: 30, height: 190};
people.unshift(bob);
console.log(people);

shift(맨 앞에 삭제)

people.shift();
console.log(people);

push(맨 뒤에 추가)

people.push(bob);
console.log(people);

push(맨 뒤에 삭제)

people.pop();
console.log(people);

splice

배열의 맨앞에 추가 삭제는 unshift, shift 였고 맨 뒤쪽에 추가 삭제는 push, pop 이였다.

이번에는 중간에 추가 삭제를 해본다.

splice는 세가지 파라미터를 가진다.

• 첫번째 파라미터는 삽입할 인덱스.
• 두번째 파라미터는 삭제할 갯수.
• 세번째 파라미터는는 추가할 객체.

삽입

어레이의 두번째와 세번째 요소에 삽입을 하고 싶으면 아래와 같이 하면 된다.

people.splice(2, 0, bob);

삭제

만약 위의 people Array에서 네번째 객채를 삭제하고 싶으면 아래와 같이 하면 된다.

people.splice(3, 1);

find

find는 배열을 루프를 돌려서 testing function을 수행한다. 이것을 predicate라고 한다. 

만약 testing function에서 조건을 만족시키면 true를 리턴하고 원본 배열에서 조건에 맞는 값이나 객체를 리턴하고 루프를 멈춘다.

그렇지 않으면 false를 리턴하고 조건에 만족시키는 값을 찾지 못하면 undefined를 리턴한다.

 

people 배열 안에 name이 SMC인 사람이 있나 찾아보고. age를 31로 변경하자.

const a = people.find(function(item){
  if(item.name === "SMC"){
    return true;
  } 
});
a.age = 31
console.log(a);

위의 코드를 arrow function으로 바꾸면 아래와 같다.

이 코드의 주의사항은 find가 원본 배열에서 값을 리턴해주므로 a가 SMC라는 이름을 가진 객체의 메모리 주소를 가리키고 있는 리퍼런스 타입이므로 값을 변경시키지 않는 키워드인 const를 사용해도 원본인 people 배열에서 SMC의 age가 31로 변경된다!

const a = people.find( item => item.name === "SMC");
a.age = 31;
console.log(a);

{ name: 'SMC', age: 31, height: 174 }

forEach

forEach는 단순히 루프를 반복하는 메서드이다.

array의 요소들을 하나씩 방문해서 forEach안에 있는 함수를 실행한다.

 

people 배열의 사람들의 나이를 모두 합해보자.

let sum = 0;
people.forEach((item) => {
  sum += item.age;
});
console.log(sum);

99

filter

filter에서 가장 중요한 것은 새로운 배열을 리턴한다.

즉, 원본 배열을 손상시키지 않기 때문에 이러한 Array 함수를 immutable 함수라고 부른다.

 

키가 175 이상인 사람만 추출해보자!

const over175 = people.filter(item => item.height >= 175);
console.log(over175);

[
  { name: 'LDH', age: 26, height: 180 },
  { name: 'OHJ', age: 24, height: 177 }
]

map

map 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 리턴한 결과를 모아 새로운 배열을 반환한다.

map 도 filter와 마찬가지로 새로운 배열을 리턴한다는 키워드가 가장 중요하고 원본 배열을 손상하지 않는 immutable 함수이다.

• 첫번째 인자는 단순히 배열 내의 요소 하나하나다.
• 두번째 인자는 배열의 내 요소의 인덱스이다. 두번째 인자는 사용하지 않아도 된다!

 

사람의 이름과 배열 내의 순번을 배열로 만들어 출력해보자.

const map1 = people.map((item, index) => [item.name, index]);
console.log(map1)

[ [ 'LDH', 0 ], [ 'SMC', 1 ], [ 'OHJ', 2 ], [ 'OSH', 3 ] ]

리액트에서 아래처럼 사용해서 똑같이 생긴 요소를 여러개 반환할 때 사용할 수 있다

const count = 3
return (
    <div className="App">
      {count.map((num, idx) => {
        return (
          <div
            //유니크한 값을 가진 key라는 props가 필요하다.
            key={num}
            style={{
              width: "150px",
              height: "150px",
              backgroundColor: "#ddd",
              margin: "10px",
            }}
          >
            nemo
          </div>
        );
      })}
    </div>
  );
}

sort

자바스크립트 배열의 내장 함수에 sort()가 있다. 명칭 그대로 배열 안의 원소를 정렬하는 함수이다.

매우 중요하게도 배열의 원본을 바꾸는 함수이다!

 

sort 메서드의 파라미터를 없이 넘기면 아스키코드 문자 순으로 정렬되기 때문에 숫자를 오름차순이나 내림차순으르로 정렬하고 싶으면 이렇게 사용하면 안된다!

 

sort 함수의 기본 문법은 arr.sort([compareFunction])이다. 여기서 우리가 정의해줘야 하는 것은 [compareFunction] 부분이다.

 

compareFunction을 작성할 때는 어떤 값을 반환하는지가 중요하다. 숫자 값을 반환해야 하는데 총 세가지 경우가 있다.

• 0보다 큰 경우
• 0
• 0보다 작은 경우

0을 기준으로 세가지 경우로 나뉜다.

• 파라미터로 x, y를 받고 [x, y]의 값이 들어왔을 때, 반환값이 0보다 큰 경우 x가 y보다 앞에 온다. 
• 파라미터로 x, y를 받고 [x, y]의 값이 들어왔을 때, 반환값이 0인 경우 x와 y의 위치가 그대로 유지된다.
• 파라미터로 x, y를 받고 [x, y]의 값이 들어왔을 때, 반환값이 0보다 작은 경우 [y, x]로 바뀐다.

정렬하는 중에 내부의 값들이 변하기 때문에 실제로 위의 x, y에 우리가 정렬하면서 바뀌게 된 값이 들어간다.

따라서 오름차순으로 정렬하고 싶으면 아래와 같이 코드를 작성하면 된다.

nums = [6, 7, 3, 2, 5, 4, 1];

nums.sort((x, y) => {
  if (x > y) {
    return 1;
  } else if (x < y) {
    return -1
  } else {
    return 0;
  }
});

console.log(nums);

수를 오름차순으로 정렬할 때는 아래와 같이 매우 간단하게 작성할 수 있다. 

nums = [6, 7, 3, 2, 5, 4, 1];

nums.sort((x, y) => x - y);

console.log(nums);

객체 정렬

• 키를 기준으로 정렬하는 경우

const unordered = {
  'b': 'foo',
  'c': 'bar',
  'a': 'baz'
};

console.log(JSON.stringify(unordered));
// → '{"b":"foo","c":"bar","a":"baz"}'

const ordered = {};
Object.keys(unordered).sort().forEach(function(key) {
  ordered[key] = unordered[key];
});

console.log(JSON.stringify(ordered));
// → '{"a":"baz","b":"foo","c":"bar"}'

---

immutable ,deep copy

react를 사용할 때 매우 중요한 키워드중 하나다. deep copy 하는 방법들을 아래에서 꼭 보도록하자!

 

https://duckgugong.tistory.com/121?category=1013859 

그리고 아래와 같이 스프레드 연산자 ...을 써서 deep copy하는 방법도 있다

let people = [
  { name: "LDH", age: 26, height: 180 },
  { name: "SMC", age: 25, height: 178 },
  { name: "OHJ", age: 24, height: 177 },
  { name: "OSH", age: 24, height: 171 }
];

people1 = [...people]