[{"data":1,"prerenderedAt":1044},["ShallowReactive",2],{"navigation_docs_ko":3,"-ko-note-javascript-filter":195,"-ko-note-javascript-filter-surround":1039},[4,124,181],{"title":5,"icon":6,"path":7,"stem":8,"children":9,"page":27},"Note (개발 지식)","emojione-v1:note-pad","\u002Fko\u002Fnote","ko\u002F1.note",[10,28,42,68,78,88,104,114],{"title":11,"icon":12,"path":13,"stem":14,"children":15,"page":27},"Spring","logos:spring-icon","\u002Fko\u002Fnote\u002Fspring","ko\u002F1.note\u002F0.spring",[16],{"title":17,"icon":18,"path":19,"stem":20,"children":21,"page":27},"Spring Ai","custom:ai","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai",[22],{"title":23,"path":24,"stem":25,"icon":26},"Spring AI 핵심 개념과 LLM 애플리케이션 구조 이해","\u002Fko\u002Fnote\u002Fspring\u002Fspring-ai\u002Fspring-ai","ko\u002F1.note\u002F0.spring\u002F1.spring-ai\u002F1.spring-ai","lucide:file-text",false,{"title":29,"icon":30,"path":31,"stem":32,"children":33,"page":27},"Javascript","skill-icons:javascript","\u002Fko\u002Fnote\u002Fjavascript","ko\u002F1.note\u002F1.javascript",[34,38],{"title":35,"path":36,"stem":37,"icon":26},"Promise.all과 구조 분해 할당을 활용한 데이터 처리 패턴","\u002Fko\u002Fnote\u002Fjavascript\u002Fdestructuring","ko\u002F1.note\u002F1.javascript\u002F1.destructuring",{"title":39,"path":40,"stem":41,"icon":26},"JavaScript 배열 고차 함수와 데이터 처리 패턴 이해","\u002Fko\u002Fnote\u002Fjavascript\u002Ffilter","ko\u002F1.note\u002F1.javascript\u002F2.filter",{"title":43,"icon":44,"path":45,"stem":46,"children":47,"page":27},"Nuxt4","logos:nuxt-icon","\u002Fko\u002Fnote\u002Fnuxt4","ko\u002F1.note\u002F2.nuxt4",[48,52,56,60,64],{"title":49,"path":50,"stem":51,"icon":26},"Nuxt 4를 선택한 이유와 아키텍처 및 실무 가이드","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-info","ko\u002F1.note\u002F2.nuxt4\u002F1.nuxt-info",{"title":53,"path":54,"stem":55,"icon":26},"Nuxt useAsyncData 동작 원리와 SSR 데이터 페칭 최적화","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-use_async_data","ko\u002F1.note\u002F2.nuxt4\u002F2.nuxt-use_async_data",{"title":57,"path":58,"stem":59,"icon":26},"Nuxt Content v3 데이터 모델과 Query 시스템 이해","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-content-v3","ko\u002F1.note\u002F2.nuxt4\u002F3.nuxt-content-v3",{"title":61,"path":62,"stem":63,"icon":26},"Nuxt Auto-imports 내부 동작과 컴파일 과정 분석","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-auto-import","ko\u002F1.note\u002F2.nuxt4\u002F4.nuxt-auto-import",{"title":65,"path":66,"stem":67,"icon":26},"Nuxt 렌더링 방식 이해: SSR, SSG, ISR, CSR 구현 방법","\u002Fko\u002Fnote\u002Fnuxt4\u002Fnuxt-rendering-strategy","ko\u002F1.note\u002F2.nuxt4\u002F5.nuxt-rendering-strategy",{"title":69,"icon":70,"path":71,"stem":72,"children":73,"page":27},"Nitro","unjs:nitro","\u002Fko\u002Fnote\u002Fnitro","ko\u002F1.note\u002F3.nitro",[74],{"title":75,"path":76,"stem":77,"icon":26},"Nitro 아키텍처와 서버 엔진 구조","\u002Fko\u002Fnote\u002Fnitro\u002Fnitro","ko\u002F1.note\u002F3.nitro\u002Fnitro",{"title":79,"icon":80,"path":81,"stem":82,"children":83,"page":27},"Devops","vscode-icons:file-type-pipeline","\u002Fko\u002Fnote\u002Fdevops","ko\u002F1.note\u002F4.devops",[84],{"title":85,"path":86,"stem":87,"icon":26},"서버사이드 WebAssembly(Wasm)와 차세대 실행 환경","\u002Fko\u002Fnote\u002Fdevops\u002Fwebassembly","ko\u002F1.note\u002F4.devops\u002F1.webAssembly",{"title":89,"icon":90,"path":91,"stem":92,"children":93,"page":27},"Tooling","lucide:wrench","\u002Fko\u002Fnote\u002Ftooling","ko\u002F1.note\u002F4.tooling",[94],{"title":95,"icon":96,"path":97,"stem":98,"children":99,"page":27},"Package Manager","devicon:npm","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager","ko\u002F1.note\u002F4.tooling\u002F1.package-manager",[100],{"title":101,"path":102,"stem":103,"icon":26},"Package Lock 파일의 역할과 의존성 관리 원리","\u002Fko\u002Fnote\u002Ftooling\u002Fpackage-manager\u002Fpackage-lock","ko\u002F1.note\u002F4.tooling\u002F1.package-manager\u002F1.package-lock",{"title":105,"icon":106,"path":107,"stem":108,"children":109,"page":27},"Web","streamline-plump:web","\u002Fko\u002Fnote\u002Fweb","ko\u002F1.note\u002F4.web",[110],{"title":111,"path":112,"stem":113,"icon":26},"웹 애플리케이션 렌더링 아키텍처 이해","\u002Fko\u002Fnote\u002Fweb\u002Frendering-modes","ko\u002F1.note\u002F4.web\u002F2.rendering-modes",{"title":115,"icon":116,"path":117,"stem":118,"children":119,"page":27},"SEO","icon-park-solid:seo","\u002Fko\u002Fnote\u002Fseo","ko\u002F1.note\u002F6.seo",[120],{"title":121,"path":122,"stem":123,"icon":26},"[SEO] 개발 블로그 검색 노출을 위한 robots.txt와 SEO 설정 가이드","\u002Fko\u002Fnote\u002Fseo\u002Fseo","ko\u002F1.note\u002F6.seo\u002F1.seo",{"title":125,"icon":126,"path":127,"stem":128,"children":129,"page":27},"Project (개발일지)","icon-park-solid:branch-two","\u002Fko\u002Fproject","ko\u002F2.project",[130],{"title":131,"icon":132,"path":133,"stem":134,"children":135,"page":27},"Brolog","custom:symbol","\u002Fko\u002Fproject\u002Fbrolog","ko\u002F2.project\u002F1.brolog",[136,140,144,148,152,156,160,164,168,173,177],{"title":137,"path":138,"stem":139,"icon":26},"Brolog 프로젝트 개요","\u002Fko\u002Fproject\u002Fbrolog\u002Foutline","ko\u002F2.project\u002F1.brolog\u002F1.outline",{"title":141,"path":142,"stem":143,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (3) - Runtime 기능 문제 분석과 AI Assistant 전환","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy3-ai-integration","ko\u002F2.project\u002F1.brolog\u002F10.vercel-deploy3-ai-integration",{"title":145,"path":146,"stem":147,"icon":26},"[Brolog] AI Assistant 적용 과정 - Agent 구조와 API 사용량 관리 시 고려사항","\u002Fko\u002Fproject\u002Fbrolog\u002Fai-assistant-application-process","ko\u002F2.project\u002F1.brolog\u002F11.ai-assistant-application-process",{"title":149,"path":150,"stem":151,"icon":26},"[Brolog] 검색 엔진 노출을 위한 SEO 적용 과정","\u002Fko\u002Fproject\u002Fbrolog\u002Fbrolog-seo","ko\u002F2.project\u002F1.brolog\u002F12.brolog-seo",{"title":153,"path":154,"stem":155,"icon":26},"Brolog 프로젝트 구조","\u002Fko\u002Fproject\u002Fbrolog\u002Fstructure","ko\u002F2.project\u002F1.brolog\u002F2.structure",{"title":157,"path":158,"stem":159,"icon":26},"[Nuxt Content] 네비게이션 아이콘 커스텀 빌드","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-icon","ko\u002F2.project\u002F1.brolog\u002F3.custom-icon",{"title":161,"path":162,"stem":163,"icon":26},"[Nuxt 4] Auto-imports 동작 원리와 자동 import 시스템 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fnuxt-auto-import","ko\u002F2.project\u002F1.brolog\u002F4.nuxt-auto-import",{"title":165,"path":166,"stem":167,"icon":26},"[Brolog] 개발 블로그 메인 페이지 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fdevelop-main","ko\u002F2.project\u002F1.brolog\u002F5.develop-main",{"title":169,"path":170,"stem":171,"icon":172},"[Brolog] 브랜드 아이덴티티 적용 - Custom 404 페이지와 Default No Image 구현","\u002Fko\u002Fproject\u002Fbrolog\u002Fcustom-error-and-default-thumbnail","ko\u002F2.project\u002F1.brolog\u002F6.custom-error-and-default-thumbnail","lucide:image",{"title":174,"path":175,"stem":176,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (1)","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy1","ko\u002F2.project\u002F1.brolog\u002F8.vercel-deploy1",{"title":178,"path":179,"stem":180,"icon":26},"[Brolog] Nuxt Multi Layer 프로젝트 Vercel 배포 (2) - Build Pipeline 오류 분석과 Nuxt 실행 구조 이해","\u002Fko\u002Fproject\u002Fbrolog\u002Fvercel-deploy2-error-analyze","ko\u002F2.project\u002F1.brolog\u002F9.vercel-deploy2-error-analyze",{"title":182,"icon":183,"path":184,"stem":185,"children":186,"page":27},"Error (트러블슈팅)","emojione:stop-sign","\u002Fko\u002Ftrouble-shooting","ko\u002F3.trouble-shooting",[187],{"title":131,"icon":132,"path":188,"stem":189,"children":190,"page":27},"\u002Fko\u002Ftrouble-shooting\u002Fbrolog","ko\u002F3.trouble-shooting\u002F1.brolog",[191],{"title":192,"path":193,"stem":194,"icon":26},"[Nuxt Content] Nuxt Icon 오류 해결과 Custom Collection 기반 오프라인 아이콘 구성","\u002Fko\u002Ftrouble-shooting\u002Fbrolog\u002Fnuxt-icon-restricted-network-troubleshooting","ko\u002F3.trouble-shooting\u002F1.brolog\u002F1.nuxt-icon-restricted-network-troubleshooting",{"id":196,"title":39,"body":197,"date":1023,"description":1024,"extension":1025,"links":1026,"meta":1027,"navigation":1034,"path":40,"seo":1035,"stem":41,"__hash__":1038},"docs_ko\u002Fko\u002F1.note\u002F1.javascript\u002F2.filter.md",{"type":198,"value":199,"toc":1005},"minimark",[200,1001],[201,202,204,209,238,241,246,249,257,273,275,283,293,390,395,400,434,449,475,477,481,490,501,508,543,602,609,624,665,675,682,860,867,874,960,962,966],"u-page-card",{":spotlight":203},"true",[205,206,208],"h1",{"id":207},"고차-함수-구조를-통해-이해하는-선언적-배열-제어","고차 함수 구조를 통해 이해하는 선언적 배열 제어",[210,211,212,221,222,226,227,226,230,233,234,237],"p",{},[213,214],"img",{"alt":215,"className":216,"src":219,"width":220},"자바스크립트 썸네일",[217,218],"mx-auto","mb-10","\u002Fimages\u002Fjavascript_thumbnail.png",450,"\n자바스크립트에서 배열을 조작할 때 사용하는 ",[223,224,225],"code",{},"filter",", ",[223,228,229],{},"some",[223,231,232],{},"map"," 등은 모두 **고차 함수(Higher-Order Function)**라는 프로그래밍 패러다임 위에 구축되어 있다. 단순히 반복문을 대체하는 편의 기능 수준을 넘어, 함수를 다루는 자바스크립트만의 독특한 문법적 성격을 이해해야 ",[223,235,236],{},"filter(Boolean)"," 같은 생략형 패턴의 진짜 원리를 파악할 수 있다. 고차 함수의 본질적인 개념과 함께, 실무에서 데이터 흐름을 명확하게 통제해 주는 유용한 배열 고차 함수들을 해부한다.",[239,240],"hr",{},[242,243,245],"h2",{"id":244},"_1-고차-함수higher-order-function란-무엇인가","1. 고차 함수(Higher-Order Function)란 무엇인가?",[210,247,248],{},"자바스크립트에서 함수는 **'일급 객체(First-Class Object)'**다. 이는 함수를 일반 변수나 객체와 완벽하게 동일하게 취급할 수 있음을 의미한다. 함수를 다른 함수의 인자로 전달할 수도 있고, 함수가 또 다른 함수를 결과로 리턴할 수도 있다.",[210,250,251,252,256],{},"이 메커니즘을 따르는 함수를 ",[253,254,255],"strong",{},"고차 함수","라고 부른다.",[258,259,260,267],"ul",{},[261,262,263,266],"li",{},[253,264,265],{},"고차 함수의 조건:"," 함수를 인자로 받거나(Callback 함수), 함수를 반환하는 함수",[261,268,269,272],{},[253,270,271],{},"이점:"," 어떻게(How) 배열을 순회할지 프로그래밍하는 상세 로직은 자바스크립트 내부 엔진에 위임하고, 개발자는 무엇을(What) 필터링하거나 변형할지 '조건과 비즈니스 로직'만 함수 형태로 주입하면 되므로 코드가 선언적이고 간결해진다.",[239,274],{},[242,276,278,279,282],{"id":277},"_2-filterboolean의-구조적-작동-원리","2. ",[223,280,281],{},".filter(Boolean)","의 구조적 작동 원리",[210,284,285,286,289,290,292],{},"카테고리 경로 등을 split한 후 유효하지 않은 문자열이나 ",[223,287,288],{},"null"," 등을 제거하기 위해 사용하는 ",[223,291,236],{},"은 고차 함수의 성격을 100% 활용한 대표적인 문법이다.",[294,295,300],"pre",{"className":296,"code":297,"language":298,"meta":299,"style":299},"language-js shiki shiki-themes material-theme-lighter material-theme material-theme-palenight","const pathParts = \"\u002Fcontent\u002Fko\u002Ftech\u002Fspring\u002F\u002F\".split('\u002F')\n\u002F\u002F 결과: ['', 'content', 'ko', 'tech', 'spring', '', '']\n\nconst cleanParts = pathParts.filter(Boolean)\n\u002F\u002F 결과: ['content', 'ko', 'tech', 'spring']\n","js","",[223,301,302,350,357,364,384],{"__ignoreMap":299},[303,304,307,311,315,319,322,326,329,332,336,339,342,345,347],"span",{"class":305,"line":306},"line",1,[303,308,310],{"class":309},"spNyl","const",[303,312,314],{"class":313},"sTEyZ"," pathParts ",[303,316,318],{"class":317},"sMK4o","=",[303,320,321],{"class":317}," \"",[303,323,325],{"class":324},"sfazB","\u002Fcontent\u002Fko\u002Ftech\u002Fspring\u002F\u002F",[303,327,328],{"class":317},"\"",[303,330,331],{"class":317},".",[303,333,335],{"class":334},"s2Zo4","split",[303,337,338],{"class":313},"(",[303,340,341],{"class":317},"'",[303,343,344],{"class":324},"\u002F",[303,346,341],{"class":317},[303,348,349],{"class":313},")\n",[303,351,353],{"class":305,"line":352},2,[303,354,356],{"class":355},"sHwdD","\u002F\u002F 결과: ['', 'content', 'ko', 'tech', 'spring', '', '']\n",[303,358,360],{"class":305,"line":359},3,[303,361,363],{"emptyLinePlaceholder":362},true,"\n",[303,365,367,369,372,374,377,379,381],{"class":305,"line":366},4,[303,368,310],{"class":309},[303,370,371],{"class":313}," cleanParts ",[303,373,318],{"class":317},[303,375,376],{"class":313}," pathParts",[303,378,331],{"class":317},[303,380,225],{"class":334},[303,382,383],{"class":313},"(Boolean)\n",[303,385,387],{"class":305,"line":386},5,[303,388,389],{"class":355},"\u002F\u002F 결과: ['content', 'ko', 'tech', 'spring']\n",[391,392,394],"h3",{"id":393},"왜-괄호-없이-함수-이름만-써도-작동할까","🔍 왜 괄호 없이 함수 이름만 써도 작동할까?",[210,396,397,399],{},[223,398,225],{},"는 자바스크립트가 제공하는 고차 함수이며, 인자로 '참\u002F거짓을 반환하는 콜백 함수'를 받도록 설계되어 있다. 원래 식을 생략 없이 풀어서 쓰면 아래와 같다.",[294,401,403],{"className":296,"code":402,"language":298,"meta":299,"style":299},"const cleanParts = pathParts.filter(item => Boolean(item))\n",[223,404,405],{"__ignoreMap":299},[303,406,407,409,411,413,415,417,419,421,425,428,431],{"class":305,"line":306},[303,408,310],{"class":309},[303,410,371],{"class":313},[303,412,318],{"class":317},[303,414,376],{"class":313},[303,416,331],{"class":317},[303,418,225],{"class":334},[303,420,338],{"class":313},[303,422,424],{"class":423},"sHdIc","item",[303,426,427],{"class":309}," =>",[303,429,430],{"class":334}," Boolean",[303,432,433],{"class":313},"(item))\n",[210,435,436,437,440,441,444,445,448],{},"자바스크립트의 고차 함수 구동 시, 인자로 전달하는 익명 함수(",[223,438,439],{},"item => ...",")의 매개변수 구조가 내부적으로 호출할 타겟 함수(",[223,442,443],{},"Boolean",")의 매개변수 구조와 1:1로 정확히 일치하면, 중간 전달자 역할을 하는 익명 함수 구문을 생략하고 ",[253,446,447],{},"함수의 참조(Reference) 이름 자체","를 직접 넘길 수 있다.",[210,450,451,453,454,456,457,459,460,463,464,466,467,470,471,474],{},[223,452,225],{}," 엔진은 순회 중인 원소(",[223,455,424],{},")를 ",[223,458,443],{}," 함수에 그대로 주입하고, ",[223,461,462],{},"Boolean()","은 값이 있으면 ",[223,465,203],{},", 빈 문자열이나 ",[223,468,469],{},"undefined"," 같은 Falsy 값이면 ",[223,472,473],{},"false","를 내뱉으므로 완벽하게 필터링이 완료된다.",[239,476],{},[242,478,480],{"id":479},"_3-효율적-배열-제어를-위한-주요-고차-함수-리스트","3. 효율적 배열 제어를 위한 주요 고차 함수 리스트",[210,482,483,484,486,487,489],{},"흔히 쓰이는 ",[223,485,232],{},"이나 기본 ",[223,488,225],{}," 외에, 특정 비즈니스 조건을 효율적으로 끊어내거나 정밀하게 다룰 때 유용한 고차 함수들이다.",[391,491,493,494,497,498],{"id":492},"_1-조기-종료로-연산을-최적화하는-some-every","⚡ 1) 조기 종료로 연산을 최적화하는 ",[223,495,496],{},".some()"," \u002F ",[223,499,500],{},".every()",[210,502,503,504,507],{},"배열 내부의 조건 충족 여부를 판단할 때, ",[223,505,506],{},"filter().length > 0","을 쓰면 배열 전체를 끝까지 순회하므로 메모리와 연산 낭비가 발생한다. 반면 이 둘은 조건 만족 즉시 동작을 멈춘다.",[258,509,510,526],{},[261,511,512,518,519,522,523,525],{},[253,513,514,517],{},[223,515,516],{},"some()",":"," 배열 원소 중 ",[253,520,521],{},"단 하나라도"," 조건 함수를 만족하면 즉시 순회를 중단(Short-circuit)하고 ",[223,524,203],{},"를 반환한다.",[261,527,528,533,534,536,537,539,540,542],{},[253,529,530,517],{},[223,531,532],{},"every()"," 모든 원소가 조건을 만족해야만 ",[223,535,203],{},"를 반환하며, 순회 중 ",[253,538,521],{}," 탈락 조건이 발견되면 그 즉시 순회를 멈추고 ",[223,541,473],{},"를 뱉는다.",[294,544,546],{"className":296,"code":545,"language":298,"meta":299,"style":299},"\u002F\u002F activeTags 중 현재 글의 태그에 매칭되는 게 하나라도 나오면 탐색 즉시 종료\nconst matchTag = post.meta.tags.some(tag => activeTags.value.includes(tag))\n",[223,547,548,553],{"__ignoreMap":299},[303,549,550],{"class":305,"line":306},[303,551,552],{"class":355},"\u002F\u002F activeTags 중 현재 글의 태그에 매칭되는 게 하나라도 나오면 탐색 즉시 종료\n",[303,554,555,557,560,562,565,567,570,572,575,577,579,581,584,586,589,591,594,596,599],{"class":305,"line":352},[303,556,310],{"class":309},[303,558,559],{"class":313}," matchTag ",[303,561,318],{"class":317},[303,563,564],{"class":313}," post",[303,566,331],{"class":317},[303,568,569],{"class":313},"meta",[303,571,331],{"class":317},[303,573,574],{"class":313},"tags",[303,576,331],{"class":317},[303,578,229],{"class":334},[303,580,338],{"class":313},[303,582,583],{"class":423},"tag",[303,585,427],{"class":309},[303,587,588],{"class":313}," activeTags",[303,590,331],{"class":317},[303,592,593],{"class":313},"value",[303,595,331],{"class":317},[303,597,598],{"class":334},"includes",[303,600,601],{"class":313},"(tag))\n",[391,603,605,606],{"id":604},"_2-다차원-구조를-파괴하며-결합하는-flatmap","🧩 2) 다차원 구조를 파괴하며 결합하는 ",[223,607,608],{},".flatMap()",[210,610,611,612,615,616,619,620,623],{},"배열을 가공한 결과물이 중첩 배열(2차원 구조)로 떨어질 때, 이를 1차원 평탄화 배열로 변환하기 위해 객체 내부에서 ",[223,613,614],{},"map()","을 돌린 후 ",[223,617,618],{},"flat()","을 연이어 호출하는 중복 연산을 자주 수행한다. ",[223,621,622],{},"flatMap","은 이 두 고차 함수 아키텍처를 단 한 번의 순회 매핑 인터페이스로 병합한 구조다.",[294,625,627],{"className":296,"code":626,"language":298,"meta":299,"style":299},"\u002F\u002F 각 카테고리 오브젝트가 가지고 있는 하위 태그 배열들을 하나의 단일 리스트로 가공\nconst totalTags = categories.flatMap(category => category.tags)\n",[223,628,629,634],{"__ignoreMap":299},[303,630,631],{"class":305,"line":306},[303,632,633],{"class":355},"\u002F\u002F 각 카테고리 오브젝트가 가지고 있는 하위 태그 배열들을 하나의 단일 리스트로 가공\n",[303,635,636,638,641,643,646,648,650,652,655,657,660,662],{"class":305,"line":352},[303,637,310],{"class":309},[303,639,640],{"class":313}," totalTags ",[303,642,318],{"class":317},[303,644,645],{"class":313}," categories",[303,647,331],{"class":317},[303,649,622],{"class":334},[303,651,338],{"class":313},[303,653,654],{"class":423},"category",[303,656,427],{"class":309},[303,658,659],{"class":313}," category",[303,661,331],{"class":317},[303,663,664],{"class":313},"tags)\n",[391,666,668,669,497,672],{"id":667},"_3-정밀한-후방-탐색을-지원하는-findlast-findlastindex","🔍 3) 정밀한 후방 탐색을 지원하는 ",[223,670,671],{},".findLast()",[223,673,674],{},".findLastIndex()",[210,676,677,678,681],{},"조건에 부합하는 요소를 배열의 처음(인덱스 0)이 아닌, ",[253,679,680],{},"배열의 맨 마지막(역순)부터"," 훑으며 찾아내려가는 고차 함수다. 시간 순서대로 정렬된 아카이브 데이터나 로그 기록에서 '가장 최근에 추가된 타겟 요소'의 위치 및 값을 정확히 타격할 때 유용하다.",[294,683,685],{"className":296,"code":684,"language":298,"meta":299,"style":299},"const logs = [\n  { action: 'login', date: '01일' },\n  { action: 'write', date: '02일' },\n  { action: 'login', date: '03일' }\n]\n\n\u002F\u002F 뒤에서부터 거꾸로 뒤져 가장 최근에 발생한 login 객체를 즉시 반환\nconst lastLogin = logs.findLast(log => log.action === 'login') \u002F\u002F { action: 'login', date: '03일' }\n",[223,686,687,699,736,766,796,801,806,812],{"__ignoreMap":299},[303,688,689,691,694,696],{"class":305,"line":306},[303,690,310],{"class":309},[303,692,693],{"class":313}," logs ",[303,695,318],{"class":317},[303,697,698],{"class":313}," [\n",[303,700,701,704,708,710,713,716,718,721,724,726,728,731,733],{"class":305,"line":352},[303,702,703],{"class":317},"  {",[303,705,707],{"class":706},"swJcz"," action",[303,709,517],{"class":317},[303,711,712],{"class":317}," '",[303,714,715],{"class":324},"login",[303,717,341],{"class":317},[303,719,720],{"class":317},",",[303,722,723],{"class":706}," date",[303,725,517],{"class":317},[303,727,712],{"class":317},[303,729,730],{"class":324},"01일",[303,732,341],{"class":317},[303,734,735],{"class":317}," },\n",[303,737,738,740,742,744,746,749,751,753,755,757,759,762,764],{"class":305,"line":359},[303,739,703],{"class":317},[303,741,707],{"class":706},[303,743,517],{"class":317},[303,745,712],{"class":317},[303,747,748],{"class":324},"write",[303,750,341],{"class":317},[303,752,720],{"class":317},[303,754,723],{"class":706},[303,756,517],{"class":317},[303,758,712],{"class":317},[303,760,761],{"class":324},"02일",[303,763,341],{"class":317},[303,765,735],{"class":317},[303,767,768,770,772,774,776,778,780,782,784,786,788,791,793],{"class":305,"line":366},[303,769,703],{"class":317},[303,771,707],{"class":706},[303,773,517],{"class":317},[303,775,712],{"class":317},[303,777,715],{"class":324},[303,779,341],{"class":317},[303,781,720],{"class":317},[303,783,723],{"class":706},[303,785,517],{"class":317},[303,787,712],{"class":317},[303,789,790],{"class":324},"03일",[303,792,341],{"class":317},[303,794,795],{"class":317}," }\n",[303,797,798],{"class":305,"line":386},[303,799,800],{"class":313},"]\n",[303,802,804],{"class":305,"line":803},6,[303,805,363],{"emptyLinePlaceholder":362},[303,807,809],{"class":305,"line":808},7,[303,810,811],{"class":355},"\u002F\u002F 뒤에서부터 거꾸로 뒤져 가장 최근에 발생한 login 객체를 즉시 반환\n",[303,813,815,817,820,822,825,827,830,832,835,837,840,842,845,848,850,852,854,857],{"class":305,"line":814},8,[303,816,310],{"class":309},[303,818,819],{"class":313}," lastLogin ",[303,821,318],{"class":317},[303,823,824],{"class":313}," logs",[303,826,331],{"class":317},[303,828,829],{"class":334},"findLast",[303,831,338],{"class":313},[303,833,834],{"class":423},"log",[303,836,427],{"class":309},[303,838,839],{"class":313}," log",[303,841,331],{"class":317},[303,843,844],{"class":313},"action ",[303,846,847],{"class":317},"===",[303,849,712],{"class":317},[303,851,715],{"class":324},[303,853,341],{"class":317},[303,855,856],{"class":313},") ",[303,858,859],{"class":355},"\u002F\u002F { action: 'login', date: '03일' }\n",[391,861,863,864],{"id":862},"_4-술어-함수-기반의-정밀-인덱스-교체-findindex","🧪 4) 술어 함수 기반의 정밀 인덱스 교체 ",[223,865,866],{},".findIndex()",[210,868,869,870,873],{},"객체들로 채워진 복잡한 데이터 배열 내부에서 특정 속성 값 조건을 만족하는 원소의 정확한 방 번호(인덱스)를 추출할 때 쓰인다. 원본 데이터 가공 및 특정 요소 교체 작업 시 수동 ",[223,871,872],{},"for"," 루프 검사 코드를 완전히 대체한다.",[294,875,877],{"className":296,"code":876,"language":298,"meta":299,"style":299},"\u002F\u002F 태그 리스트 중 삭제 대상 태그의 인덱스를 찾아 확보한 뒤 splice 연산으로 연계\nconst targetIndex = activeTags.value.findIndex(t => t === tag)\nif (targetIndex > -1) activeTags.value.splice(targetIndex, 1)\n",[223,878,879,884,919],{"__ignoreMap":299},[303,880,881],{"class":305,"line":306},[303,882,883],{"class":355},"\u002F\u002F 태그 리스트 중 삭제 대상 태그의 인덱스를 찾아 확보한 뒤 splice 연산으로 연계\n",[303,885,886,888,891,893,895,897,899,901,904,906,909,911,914,916],{"class":305,"line":352},[303,887,310],{"class":309},[303,889,890],{"class":313}," targetIndex ",[303,892,318],{"class":317},[303,894,588],{"class":313},[303,896,331],{"class":317},[303,898,593],{"class":313},[303,900,331],{"class":317},[303,902,903],{"class":334},"findIndex",[303,905,338],{"class":313},[303,907,908],{"class":423},"t",[303,910,427],{"class":309},[303,912,913],{"class":313}," t ",[303,915,847],{"class":317},[303,917,918],{"class":313}," tag)\n",[303,920,921,925,928,931,934,938,941,943,945,947,950,953,955,958],{"class":305,"line":359},[303,922,924],{"class":923},"s7zQu","if",[303,926,927],{"class":313}," (targetIndex ",[303,929,930],{"class":317},">",[303,932,933],{"class":317}," -",[303,935,937],{"class":936},"sbssI","1",[303,939,940],{"class":313},") activeTags",[303,942,331],{"class":317},[303,944,593],{"class":313},[303,946,331],{"class":317},[303,948,949],{"class":334},"splice",[303,951,952],{"class":313},"(targetIndex",[303,954,720],{"class":317},[303,956,957],{"class":936}," 1",[303,959,349],{"class":313},[239,961],{},[242,963,965],{"id":964},"요약","📌 요약",[258,967,968,977,986],{},[261,969,970,973,974,976],{},[253,971,972],{},"일급 객체의 활용:"," 자바스크립트의 배열 메서드들은 함수를 데이터처럼 다룰 수 있는 일급 객체적 특성을 활용한 ",[253,975,255],{}," 기반으로 설계되어 있다.",[261,978,979,982,983,985],{},[253,980,981],{},"생략형 패턴의 본질:"," ",[223,984,281],{},"은 콜백 함수 아규먼트 구조의 일치성을 활용해 중간 익명 함수 레이어를 걷어낸 고차 함수 지향적 축약 표현이다.",[261,987,988,991,992,994,995,997,998,1000],{},[253,989,990],{},"적재적소의 선택:"," 무조건적인 전체 순회를 수행하는 ",[223,993,225],{}," 외에도, 단일 매칭 즉시 스코프를 빠져나오는 ",[223,996,229],{},"이나 역방향 고차 함수인 ",[223,999,829],{}," 등을 적절히 배치해야 정밀하고 낭비 없는 데이터 파이프라인을 구축할 수 있다.",[1002,1003,1004],"style",{},"html pre.shiki code .spNyl, html code.shiki .spNyl{--shiki-light:#9C3EDA;--shiki-default:#C792EA;--shiki-dark:#C792EA}html pre.shiki code .sTEyZ, html code.shiki .sTEyZ{--shiki-light:#90A4AE;--shiki-default:#EEFFFF;--shiki-dark:#BABED8}html pre.shiki code .sMK4o, html code.shiki .sMK4o{--shiki-light:#39ADB5;--shiki-default:#89DDFF;--shiki-dark:#89DDFF}html pre.shiki code .sfazB, html code.shiki .sfazB{--shiki-light:#91B859;--shiki-default:#C3E88D;--shiki-dark:#C3E88D}html pre.shiki code .s2Zo4, html code.shiki .s2Zo4{--shiki-light:#6182B8;--shiki-default:#82AAFF;--shiki-dark:#82AAFF}html pre.shiki code .sHwdD, html code.shiki .sHwdD{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#546E7A;--shiki-default-font-style:italic;--shiki-dark:#676E95;--shiki-dark-font-style:italic}html .light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html.light .shiki span {color: var(--shiki-light);background: var(--shiki-light-bg);font-style: var(--shiki-light-font-style);font-weight: var(--shiki-light-font-weight);text-decoration: var(--shiki-light-text-decoration);}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sHdIc, html code.shiki .sHdIc{--shiki-light:#90A4AE;--shiki-light-font-style:italic;--shiki-default:#EEFFFF;--shiki-default-font-style:italic;--shiki-dark:#BABED8;--shiki-dark-font-style:italic}html pre.shiki code .swJcz, html code.shiki .swJcz{--shiki-light:#E53935;--shiki-default:#F07178;--shiki-dark:#F07178}html pre.shiki code .s7zQu, html code.shiki .s7zQu{--shiki-light:#39ADB5;--shiki-light-font-style:italic;--shiki-default:#89DDFF;--shiki-default-font-style:italic;--shiki-dark:#89DDFF;--shiki-dark-font-style:italic}html pre.shiki code .sbssI, html code.shiki .sbssI{--shiki-light:#F76D47;--shiki-default:#F78C6C;--shiki-dark:#F78C6C}",{"title":299,"searchDepth":352,"depth":352,"links":1006},[1007,1008,1012,1022],{"id":244,"depth":352,"text":245},{"id":277,"depth":352,"text":1009,"children":1010},"2. .filter(Boolean)의 구조적 작동 원리",[1011],{"id":393,"depth":359,"text":394},{"id":479,"depth":352,"text":480,"children":1013},[1014,1016,1018,1020],{"id":492,"depth":359,"text":1015},"⚡ 1) 조기 종료로 연산을 최적화하는 .some() \u002F .every()",{"id":604,"depth":359,"text":1017},"🧩 2) 다차원 구조를 파괴하며 결합하는 .flatMap()",{"id":667,"depth":359,"text":1019},"🔍 3) 정밀한 후방 탐색을 지원하는 .findLast() \u002F .findLastIndex()",{"id":862,"depth":359,"text":1021},"🧪 4) 술어 함수 기반의 정밀 인덱스 교체 .findIndex()",{"id":964,"depth":352,"text":965},"2026-07-10","map, filter, some 등 배열 고차 함수의 동작 원리와 filter(Boolean) 패턴을 활용한 데이터 가공 방법 정리","md",null,{"tags":1028,"image":1033},[1029,1030,1031,1032],"JavaScript","Functional-Programming","Array","High-Order-Function","images\u002Fjavascript_thumbnail.png",{"icon":26},{"title":1036,"description":1037},"JavaScript 배열 고차 함수 map filter some 이해","JavaScript 배열 메서드인 map, filter, some의 동작 원리와 실무에서 자주 사용하는 데이터 처리 패턴을 설명합니다.","0wYDNw9srdZXaqJ0uHKW-ZabY7vYZ0mtkRpHmaHFaWo",[1040,1042],{"title":35,"path":36,"stem":37,"description":1041,"icon":26,"children":-1},"비동기 요청 결과를 구조 분해하고 객체 형태로 매핑하는 JavaScript 데이터 처리 방식 분석",{"title":49,"path":50,"stem":51,"description":1043,"icon":26,"children":-1},"Vue 생태계에서 Nuxt가 등장한 배경부터 Nuxt 4의 단일 앱 레이어 구조, Auto-imports, SSR 데이터 페칭, 그리고 실무 주의점 정리",1785305903695]