-04- Object v Array

mintgranita·2024년 3월 9일

JS101

목록 보기

4/9

Object v Array

객체와 배열은 자바스크립트의 자료구조입니다 객체와 배열을 통해서 데이터를 다룰 수 있습니다.

Object

객체는 key-value로 구성되어있는 자료구조입니다. 객체는 어떤 특성이 있는 데이터를 다룰 때 사용합니다 어떤 특성 혹은 속성은 key에 그 속성에 해당하는 값은 value에 저장합니다.

// 객체 예시 
const object = {
  key: 'value'
};

//  'person' 객체 예시
const person = {
  name: 'Zac',
  age: 33,
  likesCoding: true
};

객체 구조분해 (Object destructuring)

객체를 구조 분해하면 객체의 속성을 전부 각각의 변수로 바꿔줍니다. 객체를 좀 더 유연하게 이용할 수 있게 해 줍니다.

const obj1 = {
  a1: 1,
  b1: 2,
  c1: 3
};

const { c1, b1, a1 } = obj1; // 필요한 속성들을 {} 안에 변수로 담기 

console.log(c1, b1, a1); // 3,2,1

객체 속에 객체가 있을 경우, 안에 있는 객체도 구조 분해 가능합니다.

// Object deconstruction => Nesting

const objNested = {
  a: 1,
  b: 2,
  c: {
    n1: "Nested one",
    n2: "Nested two "
  }
};

const {
  a,
  b,
  c: { n1 }
} = objNested;

console.log(a, b, n1); // 1,2,'Nested one'

Array

배열은 인덱스 번호와 값으로 구성된 자료구조입니다 어떤 리스트를 저장하고 싶을 때 유용합니다. 배열에서 어떤 값을 불러오고 싶다면 배열의 인덱스를 이용해서 불러올 수 있습니다.

*인덱스는 0부터 시작.

const vacationSpots = ['Tokyo', 'Bali', 'Mexico City', 'Vancouver'];

vacationSpots[2]; // 'Mexico City'

배열 데이터 조작법

// push() - 배열의 끝에 새로운 값 추가
vacationSpots.push('Miami');
// pop() - 배열의 끝에있는 값 제거
vacationSpots.pop();

배열구조분해 (Array Destructring)

배열또한 구조분해 가능합니다. 배열은 인덱스로 값을 호출하는데 이때 각 인덱스에 해당하는 변수를 지정해야 합니다.

const data = [1, 2, 3];

const [value1, value2, value3] = data;
console.log(value1, value2, value3); // 1,2,3

배열 또한 객체와 마찬가지로 spread를 이용해서 복사할 수 있습니다 아래와 같이 구조 분해와 spread를 이용해서 배열을 분리할 수 있습니다.

const data3 = [1, 2, 3, 4, 5];
const [id, ...data3spread] = data3;
console.log(id, data3spread); // 1, [2,3,4,5]

const [otherId, id2, ...data3spreadTwo] = data3;
console.log(otherId, id2, data3spreadTwo); // 1, 2, [3,4,5]

Array methods

자바스크립트의 배열은 여러 가지 매서드들을 가지고 있습니다. 배열의 데이터들을 다루는 대표적인 메서드는 map filter reduce 등이 있습니다.


//map
const example = [3,2,4,5,7]

const mapExample = example.map((element) => element*2) // [6,4,8,10,14]

//filter

const filtered = example.filter((element) => element > 3) //[4,5,7]

//reduce

const initialValue = 0;
const sumWithInitial = example.reduce(
  (previousValue, currentValue) => previousValue + currentValue,
  initialValue
);  //21

. map(): map 메서드는 배열의 각 인자들에 대해서 동일한 동작을 수행한 뒤 그 동작을 적용한 새로운 배열을 반환합니다.

. filter(): filter 메서드는 지정한 조건을 만족하는 배열의 인자들만을 골라낸 뒤에

그 인자들만을 넣은 새로운 배열을 반환합니다.

. reduce(): reduce매서드는 배열의 모든 인자들을 합쳐서 하나의 값으로 리턴합니다

줄인다는 뜻에서 reduce입니다. 위 세 가지 메서드는 원본 배열을 그대로 두고 새로운 값을 반환하기 때문에 데이터 조작 시 에러를 일으킬 확률이 낮아집니다.

map v forEach

map매서드와 forEach매서드는 배열 각각의 인자들에 대해 같은 콜백 함수를 실행합니다. 차이점은 map매서드는 콜백 함수를 적용한 새로운 배열을 반환하지만 forEach매서드는 어떤 값도 리턴하지 않습니다.

const example = [10, 20, 30];

const returnMap = example.map((item) => {
  return item - 5;
}); 

console.log("map return value ==>", returnMap);
// map return value ==> [ 5, 15, 25 ]

let received = [] 

const returnForEach = example.forEach((item) => {
  return received.push(item - 5);
});

console.log("forEach return value ==>", returnForEach);
// forEach return value ==> undefined
console.log("forEach received value ==>", received);
// received value from forEach ==> [ 5, 15, 25 ]

forEach 메서드는 각 배열 요소에 대해 콜백을 한 번씩 실행하지만 새로운 값을 리턴하지 않습니다. 그러므로 어떤 데이터를 가공할 때는 map매서드를 쓰는 것이 더 낫습니다. 데이터를 조작하지 않는 부수효과가 필요한 경우에 사용해야 합니다. 만약 메서드 체이닝을 이용한다면 항상 체이닝의 끝에서 써야 합니다.

const example = [10, 20, 30];

const returnMap = example.map((item) => {
  return item - 5;
}); 

console.log("map return value ==>", returnMap);
// map return value ==> [ 5, 15, 25 ]

let received = [] 

const returnForEach = example.forEach((item) => {
  return received.push(item - 5);
});

console.log("forEach return value ==>", returnForEach);
// forEach return value ==> undefined
console.log("forEach received value ==>", received);
// received value from forEach ==> [ 5, 15, 25 ]