자바스크립트에는 비동기적 생태계가 있다. 아래는 배열의 helper 기능이 비동기 함수 setTimeout과 함께 쓰였을 때 어떤 값이 출력될지 확인해보는 예제이다. const peppers = [5, 6, 6].map((e, i) => { setTimeout(() => { console.log(e) return 100 }, 1000) }) // what is peppers? console.log(peppers) 퀴즈 1) peppers에는 무엇이 할당되었을까? 퀴즈 2) setTimeout의 log는 어떻게 찍힐까? 해설) 먼저 map 기능이 동작된다. 이 기능은 매우 빠르게 모든 배열을 순회하며 setTimeout을 거의 동시에 동작시킨다. settimeout의 return이 100인 것이지, map..
문제 4. fizzbuzz 기능을 배열 프로토타입으로 만들어라. (3의 배수이면 fizz로 변환, 5의 배수이면 buzz로 변환, 3과 5의 배수이면 fizzbuzz로 변환) const arr = [9, 80, 12, 2, 30] arr.fizzbuzz() // arr is ["fizz", "buzz", "fizz", 2, "fizzbuzz"] 풀이 전 생각) 3과 5의 배수는 3의 배수와 5의 배수와 겹치니, 이것의 구성 순서를 잘 생각해보아야 한다. 해당 배열을 모두 순회해야하고, 배열을 바꾸어야하므로, forEach를 사용할 수 있다. 풀이) Array.prototype.fizzbuzz = function() { this.forEach((e, i, arr) => { if (e % 3 === 0 &&..
1. getEvens 이라는 프로토타입 기능을 만들어라. 이 기능은 배열 내 짝수만 포함하는 새로운 배열을 리턴한다. const arr = [9, 80, 12, 2] arr.getEvens() // return [80, 12, 2] 풀이 전 생각) 새로운 배열을 만들어야하므로, 배열을 저장하는 내부 변수를 생성한 뒤 짝수를 push 해준다. 인자로 사용된 배열을 모두 순회했다면 만들었던 내부 변수(배열)을 return 한다. 풀이) Array.prototype.getEvens = function(i = 0, result = []) { if (this.length === i) return result if (this[i] % 2 === 0) result.push(this[i]) return this.get..
앞서, 몇 개의 배열 기능들에 대해 배웠다. Add / remove 기능 : push, pop / shift, unshift Helper 기능 : map, filter, find, reduce 이 때, 배열에 새로운 기능들을 넣고 싶다면 어떻게 하면 좋을까? 예를 들어, [9, 8, 6, 1].last() 는 배열의 가장 마지막 요소를 리턴하게 한다던지, [1, 2, 3, 4, 5].evens() 는 배열의 짝수 부분만 리턴하게 한다던지의 방법 말이다. 이 말인 즉슨, 배열에 last()와 evens()라는 메서드를 내가 직접 코드할 수 있냐는 것이다. 물론 배열 기능들에 대해 커스터마이징을 할 수 있다. 아래의 절차를 따르면 가능하다. function(파라미터) {코드} 의 식으로 함수를 정의한다. (..
** 그냥 노트필기 입니다. Object(객체)는 키 값 쌍으로 이루어진 자료구조로 비원시값이다. 객체는 배열과 같이 인덱스로 자료가 정리되어있지는 않지만 키, 값으로 자료를 컨트롤 할 수 있다. 객체의 선언 let object = { a : 1, b : 2, c : 3 } 과 같이 직접적으로 객체를 선언하는 방법이 있다. 위 스크린샷과 같은 방식으로 미리 선언된 변수를 이용해서 객체를 선언할 수 있다. 그 외에도 방법은 무수히 많을 것으로 사료된다. Object 메서드. keys, values, entries Object 메서드를 활용해서 객체 내의 키, 값, 전체 구성요소를 확인할 수 있다. 앞의 Object의 O는 반드시 대문자로 적어라. 위 스크린샷처럼 Object.keys(확인하고 싶은 객체) ..
Map 문제) 각 배열에 담긴 문자열의 첫번째 인덱스만 배열화하는 firstLetters 함수를 작성하라. firstLetters(['hello', 'my', 'name', 'is', 'pikachu']) // returns ["h", "m", "n", "i", "p"] 풀이) Map 메서드는 콜백함수의 파라미터로 (각 요소(element), 요소의 인덱스, 배열) 을 받는다. 또한 Map 메서드가 붙은 배열과 동일한 길이의 배열만큼의 새로운 배열을 만들어 return 한다. 답) const firstLetters = (arr) => { return arr.map((e) => { return e[0] }) } forEach 문제) 아래 코드를 보고, 코드의 주석에 대해 답변하시오. const arr = ..
reduce는 상당히 난해한 개념으로 인식이 되었다. 그래도 원리만 알면 별거 없는게 문법이다. reduce에 대해 알아보자. reduce는 배열내 값을 계속 누산(accumulate)해서 연산하는 메서드이다. 연산이 된 값이 계속 이어져 나가서 마지막 배열이 연산될 `때, reduce의 최종 값이 return 된다고 생각을 해야한다. const scores = [22, 28, 80, 48, 32] const addNumber = scores.reduce((acc, e) => { console.log(acc, e) return acc + e }, 19) console.log(`addNumber의 누산된 값 : `, addNumber); 이 때 19가 어디서 나왔냐고 물을 수 있다. 19는 reduce의 ..
find 메서드는 인수로 함수를 받아, 함수를 참으로 만드는 요소를 그대로 반환한다. 이 때, 요소 중 함수를 참으로 만드는 여러 요소가 있을 수 있지만 반환되는것은 첫번째 요소이다. const ages = [22, 26, 80, 5000, 32] const olderThanHarrisonFord = ages.find(e => { return e > 77 }) console.log(olderThanHarrisonFord) // 80 배열이 반환되는 것이 아님을 주목하라. 또한 80도 e > 77을 만족하고, 뒤의 5000도 e > 77을 만족한다. 하지만 반환 되는 것은 가장 빠른 인덱스에 있는 요소인 80이 출력된다.
필터 메서드는 메서드가 받는 인수 함수가 참이 될 경우, 해당하는 요소를 반환하여 배열로 만들어준다. 무슨소리인지 이해하기 위해 함수를 직접 구현해보자. const ages = [22, 26, 80, 48, 32] const youngerThanCardiB = ages.filter(e => { return e < 27 }) // youngerThanCardiB = [22, 26] 배열의 각 요소에서 e < 27을 만족하는 것은 22와 26밖에 없다. 따라서 두 요소만 필터에 걸러져서 새로운 배열로 만들어진다.
forEach는 map의 동작방식과 거의 완벽히 똑같지만, 다른 점이 하나 있다. 다른 점은 forEach가 인수로 받는 내부 함수가 배열 자체를 수정한다는 것, 그리고 forEach 자체는 undefined를 리턴한다는 것이다. 즉, map과 동작원리는 비슷하나 새로운 배열을 만들지 않고 기존 배열을 수정한다. forEach가 받는 인자는 (각 배열의 요소, 그것의 인덱스, 배열 원본) 3가지 이다. (map과 똑같다) 하지만 undefined를 return 한다는 것을 기억해라. const ages = [22, 28, 80, 48, 32] const add5InPlace = (elem, idx, arr) => { arr[idx] = arr[idx] + 5 } ages.forEach(add5InPlac..
