티스토리 뷰
아래 코드 분석 내용을 어제 작성하려고 했는데, 관련 내용을 찾다보니 어쩌다가 js에서의 배열, 객체 생성 시 메모리 할당까지 보고 있었다.
너무 길어지는 것 같아서 우선 간략하게만 먼저 하려고 한다.
일단 아래는 물음표 가득한 그 코드다.
var solution = (_,$) => _.find(_ => !$[_]--, $.map( _ => $[_]=($[_]|0)+1) );
먼저 기호를 좀 보기 편하게 바꿔보자.
// pArr = 참가자, cArr = 완주자
var pArr = ['eden', 'leo', 'eden', 'kiki', 'que'];
var cArr = ['eden', 'kiki', 'leo', 'eden'];
var solution = (pArr, cArr) => pArr.find( p => !cArr[p]--, cArr.map( c => cArr[c] = (cArr[c] | 0) +1) ) ;
console.log( solution(pArr, cArr) );
이렇게만 바꿔도 파악하기가 수월해진다. 참고로 디버깅은 vscode에서 이런 방식으로 진행했다.
하나씩 봐보자.
(pArr, cArr) =>
: 화살표 함수 정의
pArr.find( p => { } );
: 여기서 { } 는 판별함수이다. find 함수를 이용해 pArr에 있는 값들을 하나하나 판별함수에 대입해보고, 판별함수를 만족하는(true) 첫 번째 요소의 값을 반환한다.
!cArr[p]--, cArr.map( c => cArr[c] = (cArr[c] | 0) +1 )
: 비구조화 할당. 여기서 진행 순서에 따라 둘로 나눠 살펴보겠다.
(1) cArr.map( c => cArr[c] | 0) +1
: 우선 수행된다. 이유는 따로 알아보자.
여기서는 cArr에 다음 내용을 삽입한다.
- index = cArr의 각각의 값
- index에 대응하는 값 = cArr[c] 와 0을 | 연산 후 +1 한 값
string 값이 index로 사용되었는데, 이 부분도 따로 살펴보려고 한다.
(2) !cArr[p]--
: 판별함수에 해당한다. (1)에서 가공된 cArr에 대해 p를 대입했을 때 대응하는 값의 유무가(true, false) 역으로 반환된다. 대응하는 값이 있어서 false가 나온 경우에는 value -1 을 하고 다시 진행된다. 만약 대응하는 값이 없어서 true가 나오면 해당 p값을 find 함수에서 반환하고 그 값이 최종 반환 값이 된다.
음.. 관련 내용으로 다뤄볼게 꽤 많은 것 같다.
(1) ES6 문법 : 화살표 함수, 비구조화 할당 등
(2) javascript에서 배열과 객체의 메모리 할당 (string 값을 index로 사용 가능한 이유)
(3) 비트 OR 연산자의 사용 이유와 예제
'개발 일지' 카테고리의 다른 글
1일차 react-native 개발일지 (0) | 2020.10.24 |
---|---|
[javascript] ES6 궁금한거만 정리 (0) | 2020.09.10 |
[알고리즘] 해시 > 완주하지 못한 선수 (0) | 2020.09.07 |
[Angular/Ionic] 클래스 바인딩 (0) | 2020.08.25 |
[Angular 4/vscode] 4. 데이터 바인딩 (0) | 2020.08.01 |