기본 선언방식의 아쉬운점 사실 로직을 짜다보면 가독성을 높이기 위해 변수를 선언하는 경우가 있다. 예를어 아래처럼 사용자 정보가 담긴 배열이 있다고 하자. (설명을 위해 복잡한 인덱스를 만들어보았다.) // 사용자 아이디 userInfoArr[0][1].userId[0]; // 사용자 이름 userInfoArr[0][1].userName[0]; // 사용자 주소 userInfoArr[0][1].userAddr[0]; 특정 값을 반복적으로 사용해야하는 경우가 있다고 할때 아래처럼 코드의 길이를 줄이고 가독성을 높이기 위해 명확한 뜻을 가진 변수명을 선언하곤 한다. const uInfo = userInfoArr[0][1]; uInfo.userId[0]; uInfo.userName[0]; uInfo.userA..

sort() 란? sort 메서드는 배열의 요소를 정렬할때 사용하는 함수이다. MDN에서는 기본 구문을 아래와 같이 정의한다. arr.sort([compareFunction]) * 대괄호[] 는 괄호 안의 매개변수가 생략이 가능하다는 의미이다. 정렬의 경우 매개변수가 있을 경우와 없을 경우, 값이 다르게 출력되는 경우가 발생한다. 실제로 정렬 알고리즘을 풀면서 원하는 출력값이 나오지 않아 내용을 정리해보고자 한다. 10 이 2보다 먼저 정렬된다? 다음과같은 배열이 주어졌을때 sort 메서드로 정렬을 수행한 수 0번째 인덱스 값을 추출하려 한다. 2가 가장 작고, 7, 10 순으로 커지니 출력 기댓값은 2였다. 하지만 실제로는 10이 출력된다. 대체 왜일까? let sortArray = [7, 10, 2]..

에러내용 ag grid에서 headerName이 '컬럼명'인 컬럼에만 편집모드 옵션을 활성화했다. 그랬더니 필드값이 그리드상에 그려지지 않는 문제가 발생하였다. 셀을 클릭하여 편집모드를 활성화해보니 값을 가지고는 있으나 랜더링이 되지 않는 문제가 발생됐다. 해결방안 기본 그리드는 렌더러를 수행해야한다. 따라서 셀 렌더러(cellRenderer)로 파라미터값을 렌더링함으로써 해결할 수 있다. // 예시 let columnDefs = [ { headerName: 'No', field: 'id' }, { headerName: '컬럼명', field: 'columnName', cellRenderer: (params) => { return params.value } }, ] 참고링크 : https://stacko..

특정 조건을 만족하는 인덱스를 뽑아야 한다. 배열을 대상으로 할 경우 lastIndexOf() 를 사용하면 쉽게 찾아지지만, 배열안에 객체형태로 되어있는경우는 예외이다. 만약 다음과같은 데이터를 가진 arr 변수가 있다고 할때 나는 name이 jeongmin인 객체의 마지막 인덱스을 구하고싶다. let arr = [{ 'name': 'jeongmin', 'job': null }, { 'name': 'kim', 'job': 'dancer' }, { 'name': 'lee', 'job': 'actor' }, { 'name': 'jeongmin', 'job': 'developer' }] 해당 경우에 만약 아래 로직처럼 findIndex를 사용하게 된다면 조건을 만족하는 첫번째 값을 반환한다. let first..

위아래로 아코디언(accordion) 형식으로 메뉴를 펼치고 접는 로직을 짜면서 메소드를 정리하고자 부트스트랩의 콜랩스 예제를 정리했다. 아코디언(Accordion) 타입 예제 HTML 삽입 미리보기할 수 없는 소스 1. href or data-target 첫번째 예시는 클릭했을때 펼칠 영역을 href를 사용하여 선언하였고, 두번째 예시는 클릭하였을때 펼칠 영역을 data-target을 사용하여 선언하였다. 접힌 대상은 두가지 속성을 사용하여 요소를 표시하고 숨길 수 있다. 다만, 두가지 속성을 이용할때 data-toggle="collapse" 선언은 필수이다. 2. role 컨트롤의 HTML 요소가 버튼이 아닌 경우에는 role에 속성을 추가해야한다. 위의 예시의 경우 div 속성이므로 role에 ta..

프로그래머스 해시문제를 풀고 다른사람 풀이를 살펴보던중 Map을 사용한 풀이를 보았다. Map역시 ES6에 도입된 문법이다. 이번엔 Map의 key value를 사용해보는 예제를 정리해보려 한다. 나의 풀이는 https://pro-jm.tistory.com/52 여기를 참고. 1. Map() 이란? Map()은 key-value 페어로 이루어져있다. key를 사용하여 value를 get, set 할 수 있다. key는 중복될 수 없다. (하나의 key에 하나의 value값만 가질 수 있다는 뜻) key로 사용 가능한 데이터타입은 string, symbol, object, function 이 있다. 2. 메소드 개념 set() set 메소드를 사용하여 Map에 새로운 객체를 추가할 수 있다. (key, v..

https://github.com/ohjeongmin/Programmers_Algorithm/tree/main/src/javascript/hash GitHub - ohjeongmin/Programmers_Algorithm Contribute to ohjeongmin/Programmers_Algorithm development by creating an account on GitHub. github.com 나의 풀이 function solution(p, c) { p.sort() c.sort() while(p.length) { let pVal = p.pop() if(pVal !== c.pop()) return pVal } } 풀이 이유 1. 중복값이 있을 경우 중복값이 있을 경우, 앞 인덱스보다 뒷 인덱스로..

알고리즘 문제에 많은 사람들이 풀이법으로 reduce를 많이 사용하고있다. for문이나 카운트를 위해 별도 변수를 선언하지 않아도 아웃풋을 출력해낼 수 있기때문에 코드가 훨씬 직관적인것 같다. 정말 강력한 기능이라고 하는 reduce를 정리하자면 다음과 같다. 1. 개념 reduce는 배열 요소를 순회하며 리듀서 함수를 실행하고 누적된 하나의 값을 반환한다. 즉 함수의 반환값은 누산기에 할당되고, 배열을 순회하는 과정에 해당 값이 유지되므로 하나의 값을 반환하는 것이다. 2. 인자값 리듀서 함수가 인자로 받는것은 다음과 같다. 누산기 현재값 현재 인덱스 원본배열 MDN에서 제공하는 정보는 다음과 같다. arr.reduce(callback[, initialValue]) callback : 배열의 각 요소에..