[매일코딩] 001 - 자바스크립트 배열(array) 생성 및 변경

2개월 전

dailycoding.jpg

출처

https://www.freecodecamp.org/news/javascript-array-of-objects-tutorial-how-to-create-update-and-loop-through-objects-using-js-array-methods/

배열만들기

아래처럼 중괄호와 각 항목을 구분짓는 컴마를 사용하여 개체(Object)을 열거할 수 있습니다.

let cars = [
  {
    "color": "purple",
    "type": "minivan",
    "registration": new Date('2017-01-03'),
    "capacity": 7
  },
  {
    "color": "red",
    "type": "station wagon",
    "registration": new Date('2018-03-03'),
    "capacity": 5
  },
  {
    ...
  },
  ...
]

맨 앞에 넣기 ( unshift )

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.unshift(car);

맨 뒤에 넣기 ( push )

let car = {
 "color": "red",
 "type": "cabrio",
 "registration": new Date('2016-05-02'),
 "capacity": 2
}
cars.push(car);

중간에 끼워 넣기 ( splice )

Array.splice(
  {시작 하려는 인덱스},
  {제거할 항목 수},
  {추가할 항목}
);

let car = {
  "color": "red",
  "type": "cabrio",
  "registration": new Date('2016-05-02'),
  "capacity": 2
}
cars.splice(4, 0, car);

대상 찾기 ( find )

찾는 대상 중 맨 앞에 존재하는 항목을 찾습니다.(return first match item)

let car = cars.find(car => car.color === "red");

조건이 일치하는 목록 찾기 / 필터링 ( filter )

let redCars = cars.filter(car => car.color === "red");
console.log(redCars);
// output:
// [
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   {
//     color: 'red',
//     type: 'cabrio',
//     registration: 'Sat Mar 03 2012 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 2
//   }
// ]

내부 개체 정보(Object) 변경하기 ( map )

map 을 통해 조건식을 만들어 해당 개체의 정보를 변경(transform) 할 수 있습니다.

let sizes = cars.map(car => {
  if (car.capacity <= 3){
    return "small";
  }
  if (car.capacity <= 5){
    return "medium";
  }
  return "large";
});
console.log(sizes);
// output:
// ['large','medium','medium', ..., 'small']

개체 반복 ( forEach )

forEach 는 반복이라는 점은 동일하지만 map 은 해당 개체의 값을 변형하는 반면, forEach 는 해당 개체의 정보를 순차적으로 탐색 합니다. ( 물론 탐색하는 과정에서 값을 update 하는 것 가능 ) / map - transform ( 변형) vs forEach - loop / update ( 순차탐색 , 변경 ) 정도의 의미를 부여할 수 있습니다.

cars.forEach(car => {
 car['size'] = "large";
 if (car.capacity <= 5){
   car['size'] = "medium";
 }
 if (car.capacity <= 3){
   car['size'] = "small";
 }
});

정렬 ( sort )

정렬 함수를 통해 값의 순서를 재정렬 할 수 있습니다.

let sortedCars = cars.sort((c1, c2) => (c1.capacity < c2.capacity) ? 1 : (c1.capacity > c2.capacity) ? -1 : 0);
console.log(sortedCars);
// output:
// [
//   {
//     color: 'purple',
//     type: 'minivan',
//     registration: 'Wed Feb 01 2017 00:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 7
//   },
//   {
//     color: 'red',
//     type: 'station wagon',
//     registration: 'Sat Mar 03 2018 01:00:00 GMT+0100 (GMT+01:00)',
//     capacity: 5
//   },
//   ...
// ]

sort 는 함수의 결과(-1<=,0,>=1)에 따라 순서를 아래와 같이 재정렬 합니다.

조건 매칭 함수 ( every, some )

조건 함수의 값이 모두 ( every ) 또는 일부 ( some ) 가 일치하면 참(true) 을 return 합니다.

cars.some(car => car.color === "red" && car.type === "cabrio");
// output: true

cars.every(car => car.capacity >= 4);
// output: false

맺음말

솔직히 매일은 힘들지만 뭐 꾸준한 컨텐츠를 기록해보려 하네요 :) 제 스스로에게도 큰 도움이 되기 때문이니까요 :)

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
STEEMKR.COM IS SPONSORED BY
ADVERTISEMENT
Sort Order:  trending

Hi! Did you know that steemit.com is now censoring users and posts based on their opinions?
All the posts of these users are gone!
https://github.com/steemit/condenser/commit/3394af78127bdd8d037c2d49983b7b9491397296

Here's a list of some banned users:
'roelandp', 'blocktrades', 'anyx', 'ausbitbank', 'gtg', 'themarkymark', 'lukestokes.mhth', 'netuoso', 'innerhive'
See anyone you recognize? There could be more, they also have a remote IP ban list.

Will you be censored next?

@wonsama transfered 2.4 KRWP to @krwp.burn. voting percent : 99.58%, voting power : 1407, voting power : 1793032.36, SBD KRW : 1219.24.

아들녀석 가르치는데 갓사마님처럼 하려면 무슨 프로그램을 배워야 하나요?
아들녀석이 오늘 물어봤는데 ㅋㅋㅋ 뭘 배우라고 못아려주는 아버지
맴은 찢어집니다. ㅋㅋㅋㅋ 자바를 배우면 되나요?

·

쉽고 간단한거 따라 만들기 부터 해보면 좋을거 같아요.

게임만들기 / 웹으로 달력 만들기 등등

본인이 좋아하는것을 주제로 삼고 그것을 따라 해보면 분명 부족하거나 더 하고 싶은것이 생길 것 이에요

언어보단(프로그램 랭기지) 일단 뭘 하고 싶어 ? 라는 말로 흥미를 찾아가면 좋을거 같습니다 :)

·
·

웹만들기는 어려운건지 쉬운건지 잘 모르겠는데 우선 독학으로 만들었다고 합니다. 제가 스몬자동프로그램 및 스팀잇에 적용시킬 프로그램 만드는걸
좀 시켜볼까 하구요 ㅋㅋㅋㅋ 잘 키웠으니 일 좀 시키려구요. 언제 해 낼지 모르겠지만요?? 답변 감사합니다.