"이 배열에 이런 게 있냐?"를 물어볼 때 쓰는 도구들 🔍앞에서는 forEach, map, filter, reduce 같은 고차 함수로배열을 "돌면서 가공하는" 패턴을 봤다.이번 편은 살짝 역할이 다르다."이 조건을 만족하는 게 하나라도 있냐?""전부 다 이 조건을 만족하냐?""이 조건을 만족하는 첫 번째 애가 누구냐?"이런 질문에 답하는 조건 기반 탐색용 고차 함수 네 가지를 정리해본다.someeveryfindfindIndex결론 먼저some: 하나라도 조건을 만족하면 trueevery: 모두 조건을 만족해야 truefind: 조건을 만족하는 "첫 번째 요소"를 반환 (없으면 undefined)findIndex: 조건을 만족하는 "첫 번째 요소의 인덱스"를 반환 (없으면 -1)공통점전부 배열의 고차 ..

앞에서 for, while, for...of 같은 반복문들로"어떻게 도는지"를 직접 제어하는 방법을 봤다.이번에는 한 단계만 더 올라가서,배열에서 정말 자주 보게 되는 고차 함수 4종 세트를 정리해보려고 한다.forEachmapfilterreduce이 네 개만 제대로 익혀도,데이터를 순회하고 가공하는 코드가 훨씬 깔끔해진다.결론 먼저forEach: 단순히 "각 요소에 대해 어떤 작업을 한다" → 결과를 모으지 않음map: 각 요소를 변환해서 새 배열을 만든다filter: 조건을 만족하는 요소만 골라서 새 배열을 만든다reduce: 배열 전체를 하나의 값으로 축약한다 (합계, 평균, 객체로 묶기 등)아주 짧게 요약하면 나는 이렇게 쓴다부수 효과(로그 찍기, DOM 조작 등)만 필요 → forEach배열을 ..

Set 한 줄 요약Set은 "중복 없는 값 목록(넣은 순서는 유지됨)"이다.배열처럼 순회할 수 있지만, 같은 값은 중복 저장되지 않는다. 처음 보면 배열이랑 뭐가 다르지? 싶을 수 있다.하지만 Set은 아래 2가지에서 정말 자주 쓴다.중복 제거값 존재 여부 확인 (has)먼저 감 잡기 (배열과 차이)Array(배열): 순서 있는 목록, 중복 허용, 인덱스 접근 가능 (arr[0])Set: 중복 없는 값 목록, 넣은 순서 유지, 포함 여부 확인에 좋음 (set.has(value))인덱스 접근 / 정렬 / map / filter 중심이면 → Array중복 제거 / 선택 상태 / 포함 여부 체크 중심이면 → Set용어 10초 정리블로그/문서에서 아래 단어가 자주 나오는데, 처음엔 이렇게 이해하면 충분하다.컬렉..

구분함수설명🔁 반복for인덱스가 필요할 때 사용 (범위나 횟수 직접 제어) for...of인덱스 필요 없을 때 사용 for...in객체의 키를 순회할 때 forEach멈춤 없이 전부 순회할 때 (break 불가) while조건이 참인 동안 계속 반복할 때 do...while최소 한 번은 실행 후 조건 검사할 때 📦 배열 조작push / pop배열 뒤에서 요소를 추가하거나 제거 shift / unshift배열 앞에서 요소를 추가하거나 제거 slice배열이나 문자열의 일부를 복사해 새로 만듦 (원본 유지) splice배열의 특정 위치에 있는 요소를 삭제하거나 삽입 (원본 변경) sort배열을 정렬 (기본은 문자열 기준, 원본 변경됨) reverse배열 순서를 거꾸로 바꿈 (원본 변경됨) concat여..

Array 한 줄 요약Array는 "순서 있는 값 목록(인덱스로 접근 가능)"이다.자바스크립트에서 가장 자주 쓰는 컬렉션이며, 순회/검색/변형 메서드가 매우 많다. 처음에는 메서드가 너무 많아서 복잡해 보이지만,실제로는 아래 3가지만 먼저 잡으면 훨씬 쉬워진다.값 추가/삭제 (push, pop, splice)검색/확인 (includes, find)순회/변형 (map, filter, reduce)먼저 감 잡기 (Array가 왜 중요한가?)Array(배열)는 거의 모든 코드에서 등장한다.API 응답 목록화면에 렌더링할 데이터 리스트검색 결과체크된 항목 목록정렬/필터링 대상 데이터즉, "여러 값을 순서 있게 다룬다" 싶으면 대부분 Array부터 시작한다.용어 10초 정리블로그/문서에서 아래 단어가 자주 나오는..

Map 한 줄 요약Map은 "키-값 쌍 목록(넣은 순서는 유지됨)"이다.키로 문자열뿐 아니라 숫자, 객체, 배열 같은 값도 그대로 사용할 수 있다. 처음 보면 보통 이런 생각이 든다.Object({})랑 뭐가 다르지?그냥 객체 쓰면 안 되나?Map도 결국 객체라던데?먼저 감 잡기 (Object와 차이)Object ({}): JSON/응답 데이터/설정값처럼 이름 붙은 데이터 구조에 자주 사용Map (new Map()): 키-값을 추가/삭제/검색/순회하는 컬렉션 용도에 잘 맞음서버 응답 / 설정값 / 모델 데이터 중심이면 → Object매핑 테이블 / 캐시 / lookup / 키-값 컬렉션 조작 중심이면 → Map용어 10초 정리블로그/문서에서 아래 단어가 자주 나오는데, 처음엔 이렇게 이해하면 충분하다.컬..

Object 한 줄 요약Object는 "이름 붙은 값(키-값)"을 묶어 두는 기본 데이터 구조다.서버 응답/설정값/유저 정보처럼 "데이터 레코드"를 표현할 때 제일 많이 쓴다. 처음 보면 Map이랑 뭐가 다르지? 싶을 수 있다.하지만 Object는 아래 같은 데이터를 표현할 때 거의 기본으로 등장한다.서버 응답 데이터(JSON)설정값(config)유저 정보그런데 막상 정리해서 설명하려고 하면“프로퍼티? 키? 필드? 뭐가 뭔데?”“for...in이랑 for...of는 또 뭐가 다른데?”“Map이랑은 언제 뭐 써야 돼?”여기서 헷갈리기 쉽다.이번 글은 Object 리터럴({}) 기준으로 기본기를 정리하고, 중간에 Map과도 가볍게 비교하는 흐름으로 간다.먼저 감 잡기 (Map과 차이)Object: 데이터 레..

반복문은 "조건에 따라 코드를 여러 번 실행"하게 해주는 기본 도구! 🧑‍💻코드를 짜다 보면 자연스럽게 반복이 생긴다.댓글 목록 돌기API 응답 배열 순회하기사용자 입력이 끝날 때까지 계속 받기이럴 때 쓰는 게 바로 반복문(loops)근데 막상 정리하려고 하면for, while, do...while, for...in, for...of…“대체 뭐가 어떻게 다른 거냐”이렇게 헷갈리기 쉽다.이번 글에서는 주니어 기준으로, 실무에서 자주 쓰는 반복문만 골라서 정리해보려고 한다.결론 먼저반복문은 조건에 따라 코드를 반복 실행하는 문법상황에 맞게 for, while, for...of, for...in 중에서 골라 쓰는 게 중요특히 배열 / 객체 순회에서 어떤 반복문을 쓰느냐가 가독성과 성능에 영향을 준다아주 짧..

new는 그냥 "객체 만드는 키워드"가 아니다.this를 어떻게 묶고, 어떤 과정을 거쳐 인스턴스를 만드는지 아는 게 핵심이다. 🧑‍💻예전에 자바스크립트 공부할 때,"생성자 함수에는 무조건 new 붙여라""클래스는 new 없으면 에러 난다"이런 말만 듣고 넘겨버리기 쉬운데,정작 new가 내부에서 무슨 일을 하는지 모르면버그가 생겨도 감으로만 디버깅하게 된다.이번 글에서는 new가 실제로 하는 일을4단계 과정으로 풀어서 정리해본다.결론 먼저한 줄 요약하면new = 새 객체(인스턴스)를 만들고, 그 안에서 this를 알맞게 바인딩해 주는 연산자내부적으로는 대략 이런 일이 일어난다.빈 객체 하나 만든다그 객체에 프로토타입을 연결하고, this로 묶는다생성자 함수(또는 클래스의 constructor)를 실행..

"HTML 문자열을 어디에, 어떻게 넣을까" 정리해 두면성능이랑 보안 둘 다 덜 털린다.처음에 DOM 다룰 때는 거의 무조건 이렇게 시작한다.target.innerHTML = "뭐라도 나오게 해봐...";빠르고 편하다. 근데 규모가 커지면 갑자기 이런 고민이 튀어나온다.innerHTML += 로 계속 추가해도 되나?특정 위치에만 쏙 끼워 넣고 싶을 땐 뭐 쓰지?XSS 같은 보안 이슈는 어떻게 피하지?이번 글에서는 HTML 삽입/조작할 때 자주 쓰는 3가지 DOM 메서드를내가 실제로 써본 기준으로 정리해 본다.innerHTMLinsertAdjacentHTMLdocument.createRange().createContextualFragment결론 먼저한 줄씩만 꽂으면 이렇게 정리할 수 있다전체 교체 → in..