[FE/JS] JavaScript ES6 문법정리2

2021.04.01

14일차

 

입사 25일차.

JavaScript ES6 문법정리 3회차

 

 

1. (배열)변수명.filter( 파라미터 => 조건 )

  ① 배열 또는 Json Object의 값들 중, 조건을 정해 원하는 값을 출력하는 함수.

  ② 문자열간의 비교를 조건으로 설정하면, 에러를 발생하지 않지만 원하는 결과를 얻을 수 없다.

const smartPhone = [     { made: '애플', ver: '12', model: '아이폰', price: 100 },     { made: '삼성', ver: '21', model: '갤럭시', price: 80 },     { made: 'LG', ver: 'VELVET', model: '벨벳', price: 50 }, ];   // 스마트폰의 가격이 60이상인 Json Object 필터링 const priceChk = smartPhone.filter(variableName => variableName.price >= 60);   // 스마트폰의 버전이 '10' 이상인 Json Object 필터링 const verChk = smartPhone.filter(verNum => verNum.ver > '10' );   console.log(`priceChk = `, {priceChk}); console.log(`verChk = `, {verChk});

[ console ] priceChk =  { priceChk:    [ { made: '애플', ver: '12', model: '아이폰', price: 100 },      { made: '삼성', ver: '21', model: '갤럭시', price: 80 } ] } verChk =  { verChk:    [ { made: '애플', ver: '12', model: '아이폰', price: 100 },      { made: '삼성', ver: '21', model: '갤럭시', price: 80 },      { made: 'LG', ver: 'VELVET', model: '벨벳', price: 50 } ] }

 

 

2. (배열)변수명.map( 파라미터 => 조건 )

  ① 배열 또는 Json Object의 값들 중, 특정 파라미터에 원하는 값으로 수정할 수 있다.

  ② map에는 입력한 파라미터만 저장된다. ( 아래의 코드에서는 price만 저장된다 )

const ticket = [     { destination: '서울', price: 30000, },     { destination: '부산', price: 20000, },     { destination: '제주', price: 50000, }, ];   // 티켓의 가격을 50% 할인적용 const ticketSale = ticket.map(saleChk => saleChk.price * 0.5); for (let i = 0; i < ticketSale.length; i++) {     console.log(ticket[i].destination ,` = `, ticketSale[i]); }

[ console ] 서울  =  15000 부산  =  10000 제주  =  25000

 

 

3. 변수명.reduce( 파라미터1, 파라미터2 )

  ① 배열에 저장되어 있는 모든 값을 더해주는 메소드.

const ticket = [     { destination: '서울', price: 30000, },     { destination: '부산', price: 20000, },     { destination: '제주', price: 50000, }, ];   // 티켓의 가격만 map으로 selecr한다. const allPrice = ticket.map( myTicket => myTicket.price ); // 티켓의 가격만 map으로 selecr한다. const sumPrice = allPrice.reduce( ( prevIndex, nextIndex ) => prevIndex + nextIndex ); console.log( `서울 > 부산 > 제주 = ` , sumPrice );

[ console ] 서울 > 부산 > 제주 =  100000

 

개인적인 생각에는 filter()를 사용하는 일이 많을 것 같고, reduce()는 사용할 일이 별로 없을 것 같다.

코드를 직접 짜는 것을 선호하는 편이기도 하고, for문을 사용해도 충분히 구현할 수 있는 내용이기 때문에, 굳이 reudce를 외워서 사용할 일은 없을 것 같다.