프론트엔드/javascript (20) 썸네일형 리스트형 [javascript] 객체에서 마지막 인덱스 찾는법 (findIndex 뒤에서부터 적용하기) 특정 조건을 만족하는 인덱스를 뽑아야 한다. 배열을 대상으로 할 경우 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.. [javascript] Converting circular structure to JSON (JSON 형태 배열 로그 찍는법) 에러 발생 원인 이벤트 발생 객체를 콘솔로그로 확인해보려고 하니 >> [objdec Object] 로 출력되어 헤당 내용을 확인할 수 없었다. 떄문에 JSON.stringify 형태로 로그를 확인하려 하니, 선회하는 구조를 JSON 구조로 아래와같은 에러가 발생하였다. 해결책 for in을 사용하여 해당 객체의 콘솔로그를 확인할 수 있다. 나는 키와 밸류를 모두 확인하고자 다음과 같은 로그로직을 짰다. for (let node in event) { console.log(JSON.stringify(node) , ' : ' , JSON.stringify(event[node])); } for in 과 for of의 차이는 여기를 참고! https://pro-jm.tistory.com/50 [javascript.. [javascript] Map 알아보기 (set, get 메소드 사용하기) 프로그래머스 해시문제를 풀고 다른사람 풀이를 살펴보던중 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.. [javascript] 누산기 reduce 알아보기 (알고리즘 자주출몰) 알고리즘 문제에 많은 사람들이 풀이법으로 reduce를 많이 사용하고있다. for문이나 카운트를 위해 별도 변수를 선언하지 않아도 아웃풋을 출력해낼 수 있기때문에 코드가 훨씬 직관적인것 같다. 정말 강력한 기능이라고 하는 reduce를 정리하자면 다음과 같다. 1. 개념 reduce는 배열 요소를 순회하며 리듀서 함수를 실행하고 누적된 하나의 값을 반환한다. 즉 함수의 반환값은 누산기에 할당되고, 배열을 순회하는 과정에 해당 값이 유지되므로 하나의 값을 반환하는 것이다. 2. 인자값 리듀서 함수가 인자로 받는것은 다음과 같다. 누산기 현재값 현재 인덱스 원본배열 MDN에서 제공하는 정보는 다음과 같다. arr.reduce(callback[, initialValue]) callback : 배열의 각 요소에.. [javascript] for in 과 for of 사용법(차이) 막상 쓰려고하면 두개가 헷갈려서 기록한다. for ... in for ... of 반복문으로 사용되는 for in 과 for of는 ES6부터 추가되었다. 우선 두개의 차이는 다음과 같다. for in - 객체 탐색 for of - 배열 요소 탐색(Array뿐 아니라 Map, Set, String 에도 사용 가능하다.) 그럼 예시를 살펴보자 1. for in const param = { a: 1, b: 2, c: 3 } 위와같은 param이라는 변수가 있을때, >> a, b, c 라는 출력값을 얻기위해서는 다음과 같은 로직을 짜면 된다. for (let item in param) { console.log(item) } // output >> a, b, c 해당 로직을 보면 item이 객체의 키값을 반환하.. [javascript] for문 제발 그마아안! (map 사용하여 한줄로 끝내기) 더이상 for문 그마아안! 한줄로 끝내는 map 구문 기록하기! 예를들어, 사용자의 id와 age 정보가 담긴 userInfo 변수가 있다고 가정해보면 나는 해당 객체에서 userAge만 뽑아 새로운 변수에 담고싶다. 주로 이럴때 사용하는것이 for문이다. 예를들면 이런식이겠다. /* userInfo변수의 값이 [{id: "1", age: "20"}, {id: "2", age: "32"}, {id: "3", age: "29"}] 일때 */ let userAge = [] for (let i = 0; i < userInfo.length; i++) { userAge[i] = userInfo[i]['age'] } 하지만 map을 사용하여 한줄로 끝내보겠다. // userInfo변수의 값이 [{id: "1", a.. [javascript] 자바스크립트 객체(Object타입)란..? ag grid 에서 지원하는 API를 사용하던 도중 콘솔로그에 값을 출력해보니 [Object Object] 라는 값이 출력되었다. 세부 내용을 꺼내보려 하다가 문득 객체이란 무엇인지 예전에 공부했던 내용을 기록하려 한다. 1. 객체란? (Object 란?) 객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입이며, Key - Value 쌍을 저장할 수 있는 구조이다. 자바스크립트는 객체 기반 프로그래밍 언어이며, JS를 이루고 있는 대부분은 객체이다. 객체를 생성하면 하나의 값만 담을 수 있는 변수의 단점을 커버할 수 있다. 아래 예제를 적어보았다. // 객체를 사용하지 않을 경우 let name = 'OhJeongMin' let job = 'developer' let rank = 1 .. [javascript] 비동기함수 setTimeout, 비동기 작업단위 Promise 동기는 동시에.. 비동기는 안..동시에..? 매일 써도 헷갈리는 개념이라 기록해두려고 한다. 1. 동기 / 비동기 핵심 특징 동기 > 동시에 여러 작업을 수행할 수 없다. > 흐름을 예측하기 쉽다. 먼저, 나중에 수행되는 것들이 명확하다. 비동기 > 동시에 여러 작업을 수행할 수 있다. > 흐름을 예측하기 어렵다. 무엇이 먼저 완료될지 보장할 수 없다. 2. setTimeout 비동기로 동작하는 함수중 대표적인 예는 setTimeout 함수이다. setTimeout 함수는 아무일도 하지않고 기다리기만 하는 자바스크립트 함수중 하나이다. function testFunc(param) { console.log(param); } setTimeout( testFunc(), 2000, 1 ); setTimeout(.. 이전 1 2 3 다음
