목록개발 Web/JS (37)
음악, 삶, 개발
const toNumString = (index: number): string => { let indexStr = index + '' while (indexStr.length { let indexCounter = 128 for (let i = 0; i < 32; ++i) { let padStrings: string[] = [] for (let j = 0; j < 4; ++j) { padStrings.push (`pad_${toNumString(indexCounter)}`) indexCounter-- } const result = JSON.stringif..
개발이 후반부으로 가다보면 작지만 더럽게 널부러져있는 코드를 정리하고, 최적화에 집중하게된다. array 와 루프는 js 코드에서 매우 자주쓰이는 형태인데, 루프를 도는 여러 방법들이 존재하지만, forEach 는 느려서 사용하지않고, 대부분 그냥 for loop 를 사용하였다. 가독성은 조금 떨어지지만 가장 빠르기때문이다. 만약 for loop 의 도는 순서가 반대로 바뀌어도 상관없는 경우에만, 아래의 loop 를 쓰면 가장 빠르다. for (let i = array.length; i--; ) 여기서 i-- 만으로 조건이 확인이된다. i 가 0 일 경우 false 로 간주되기때문이다. 주의할점은 일반적인 for loop 와 달리 --i 를 하면 안된다. 벤치마크 : http://jsbench.githu..
Array 의 대부분의 메소드들은 콜백함수를 인자로 넘기게되는데, 이때 인자가 하나만 들어가는 콜백함수의 경우 굳이 () 를 하지않아도 된다. const arr = [1, 2] const good = arr.map(item => item * 100) const bad = arr.map((item) => item * 100) // 굳이 (item) 안해도됨, 그냥 item 으로.
Array 가 제공하는 함수들의 강력한점은 composition 한 일들을 구사할수있는것이다. 아래는 나이가 40세 이상일 경우 이 나이들을 string 으로 변환하는 코드이다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 35 }, { name : 'choi', age : 45 }, { name : 'park', age : 55 }, ] const oldPeople = people .map((p) => p.age) // age 만으로 이루어진 배열 return .filter((age) => age >= 40) // 이 배열에서 다시 40 이상인 요소들만으로 이루어진 배열 return .join('_') // 요소사이에 _ 삽입하..
reduce 는 배열의 요소들의 특정 프로퍼티의 합을 계산한다던지 하는 counter 를 만들때 유용하다. 콜백함수의 첫번째 인자값은 계속해서 누적 되게된다. 이 reduce 의 두번째 인자로는, 콜백 함수의 첫번째 인자의 초기값을 넘기게된다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 20 }, { name : 'choi', age : 30 }, ] const ageTotal = people.reduce((counter, person) => counter + person.age, 0) console.log(ageTotal) // 60 아래는 더 쉬운 예제...
some 은 Array 의 요소들중 하나라도 내가 정한 조건에 충족하면 true 를 return 하는 함수이다. 인자로 조건을 확인하는 콜백함수를 넘기게된다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 64 }, { name : 'choi', age : 55 }, ] const hasOldPeople = people.some((p) => p.age >= 50) console.log(hasOldPeople) // true 반면 every 는 모든 조건이 충족해야만 true 를 return 하게 된다. some : 배열중에 어떤 것이라도 하나 만족되는것이 있는지 없는지 확인할때 사용. every : 모든것이 만족되는지 ..
map 은 Array 에서 각 요소들을 다른 방식으로 매핑해주는것이다. 또는 각 요소들이 객체일 경우, 일부 property 만을 추출하는 새로운 array 로 만들때도 유용하다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 64 }, { name : 'choi', age : 55 }, ] const ages = people.map((p) => p.age) console.log(ages) // [10, 64, 55]
Array 의 filter 함수를 사용하면, 특정 조건이 맞는 요소들만을 가진 새로운 Array 를 얻을수있다. 다음 코드는 50세 이상의 사람들만을 추출하는 코드이다. const people = [ { name : 'kim', age : 10 }, { name : 'seo', age : 64 }, { name : 'choi', age : 55 }, ] const oldPeople = people.filter((p) => p.age >= 50) console.log(oldPeople) // [ { name: 'seo', age: 64 }, { name: 'choi', age: 55 } ] 당연히 oldPeople 이 가진 요소들은 people 의 요소들의 reference 이다. 따라서 oldPeople..
join 을 활용하면 배열을 string 으로 변환할수있다. 인자로 seperator 를 넘기게되며, optional 파라미터이다. const a = [ 'one', 'two', 'three' ] console.log(a.join()) // one, two, three console.log(a.join('_')) // one_two_three 요소가 숫자인 경우 자동으로 string 으로 변환해주며, 중첩된 배열이 들어가 있는 경우 역시 각 요소를 string 으로 똑똑하게 변한한다. console.log([ 1, 2 ].join('_')) // 1_2 console.log([false, 'one'].join('_')) // false_one console.log([[1, 2, 3], 'kim'].joi..