반응형

map 4

반복문 'for', 'forEach', 'map' 사용법과 차이점

자바스크립트의 for( ), forEach( ), map( ) 함수에 대해 비교를 통해 알아보겠습니다.​ 1) for( ) 초깃값부터 시작해서 증가 또는 감소하면서 조건에 부합하면 계속 순회합니다. 중간에 "break;" 문을 만나면 반복문을 중단합니다. for ([initialization]; [condition]; [final-expression]) statement​ ​ 2) forEach( ) 배열의 각 요소에 대해 callback을 실행합니다. 배열을 순회하므로 중간에 "break;" 문을 사용할 수 없습니다. 이런 경우라면 for( )문을 사용해야 합니다. array.forEach(callback(currentvalue[, index[, array]])[, thisArg]) ​ 3) map( ..

IT/JavsScript 2022.06.23

SCSS/SASS 이해하기

Sass(Syntactically Awesome Style Sheets)의 3 버전에서 새롭게 등장한 SCSS는 CSS 구문과 완전히 호환되도록 새로운 구문을 도입해 만든 Sass의 모든 기능을 지원하는 CSS의 상위 집합입니다. SCSS는 CSS에서 사용하던 비슷한 문법으로 Sass 기능을 사용할 수 있습니다. Sass와 Scss의 눈에 보이는 차이는 {}(중괄호)와 ;(세미콜론)의 유무입니다. sass .list float: left li color: red &:first-child margin-right: -10px scss .list { float: left; li { color: red; &:first-child { margin-right: -10px; } } } Sass는 선택자의 유효 범위를..

IT/HTML & CSS 2021.04.15

리액트(React) 스터디일지7:반복문(Map)

리액트에 반복문을 사용할 때 Map함수를 사용합니다. Map함수를 조금 더 자세히 알고 싶으시면 Mozilla에서 제공하는 Map Docs를 살펴보거나 이전에 제가 작성한 Map 매서드 이해하기 글을 한번 읽어보시면 조금 더 이해하기 쉬울거에요. 같이 읽어보면 조금 더 도움이 되는 내용으로는 전개연산자와 filter 매서드 도 같이 한번 읽어 보시면 앞으로 우리가 React에서 반복문을 사용할 때 많은 도움이 될거라 생각합니다. 우선 오늘의 주인공인 Map에 대해서 간략히 살펴보겠습니다. arr.map( callback, [thisArg]) callback : 새로운 배열의 요소를 생성하는 함수. currentValue : 처리할 현재 요소 index : 처리할 현재 요소의 인덱스 array : 현재 처..

IT/React 2021.04.08

Map() 매서드 이해하기

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. const array1 = [1, 4, 9, 16]; const map1 = array1.map(x => x * 2); console.log(map1); // 결과: Array [2, 8, 18, 32] 위의 코드를 한번 보면 배열에 들어있는 값을 화살표 함수를 이용하여 배열의 값을 매개변수로 받아서 각 배열의 값을 반복문을 돌며 값을 출력하는 코드입니다. map은 callback 함수를 각각의 요소에 대해 한번씩 순서대로 불러 그 함수의 반환 값으로 새로운 배열을 만듭니다. callback 함수는 (undefined도 포함해서) 배열 값이 들어있는 인덱스에 대해서만 호출됩니다. 즉, 값이..

IT/JavsScript 2021.03.31
반응형
//