-

[javascript] 배열 7/ 배열 축약, 누적 (reduce, reduceRight)

reduce() / reduceRight() 특징초기값이 없으면 배열 첫 요소가 누적값으로 사용됨 (단, 빈 배열에서 초기값 없으면 오류 발생)원본 배열 변경 없음 : reduce()/reduceRight()는 순회만 하고 배열을 변형하지 않음체이닝 가능 : map(), filter() 등과 결합해서 사용 가능reduce()reduce()는 배열의 각 요소를 순회하면서 누적 계산을 수행하고, 최종적으로 하나의 값으로 축약할 때 사용합계, 평균, 객체 변환, 문자열 결합 등 일반적인 누적 계산기본 문법배열.reduce((누적값, 현재값, 인덱스, 배열) => { // 누적 계산 로직 return 누적값;}, 초기값);요소설명누적값(acc)이전 계산 결과를 담는 변수현재값(cur)현재 배열 요소인덱스(..

[javascript] 배열 6-2 / 배열 정렬(reverse)

reverse()reverse()는 배열의 순서를 뒤집는 메서드새로운 배열을 반환하지 않고, 원본 배열을 변경매개변수 없음sort(), map(), filter() 등과 체이닝 가능비교함수 없음 : 단순히 순서만 뒤집음배열 요소 타입에 상관없이 순서 뒤집기 가능 (문자열, 숫자, 객체 배열 모두 가능)// [문법]배열.reverse();reverse() 활용1. 숫자 배열const nums = [1, 2, 3, 4];nums.reverse();console.log(nums); // [4, 3, 2, 1]2. 문자열 배열const fruits = ['apple', 'banana', 'cherry'];const reversed = fruits.reverse();console.log(reversed); // ..

[javascript] 배열 6-1 / 배열 정렬(sort, localCompare)

sort() 배열의 요소를 정렬할 때 사용기본 동작: 문자열 유니코드 순서로 정렬숫자 정렬: compareFn을 사용하여 직접 비교// [문법 - 문자열 기준 유니코드 순서]배열.sort();// [문법 - 비교 함수 포함]배열.sort((첫번째값, 두번째값) => { // 비교 로직 return 결과; // 음수, 0, 양수}); 문자열 정렬유니코드 순서로 정렬그냥 sort()만 쓰면 대소문자 구분, 한글이나 특수 문자 등에서 직관적인 순서가 나오지 않을 수 있음문자열 비교는 localeCompare를 사용하면 알파벳 순서, 한글 순서 등 지역 기준으로 정렬 가능const arr = ['apple', 'Banana', 'cherry'];arr.sort();console.log(arr); // ['B..

[javascript] 배열 5-1 / 배열 변환 (map, filter, flatMap)

map()배열의 모든 요소에 대해 콜백 함수를 실행하고, 그 결과를 모아 새로운 배열을 반환함.원본 배열은 변하지 않음원본 배열과 길이가 동일변환 중심 메서드 (요소 변경)✓ 지도는 길을 변환해서 보여줌 → map은 값을 변환기본 문법// [문법]배열.map((요소, 인덱스, 배열) => { return 변환값;});// [문법 - 한 줄 반환이면 중괄호 {}와 return 생략 가능]배열.map(요소 => 변환값);구분설명요소현재 순회 중인 배열의 값인덱스현재 요소의 인덱스 (선택)배열map을 호출한 원본 배열 전체 (선택)반환변환된 요소들로 이루어진 새로운 배열const numbers = [1, 2, 3];const squares = numbers.map(num => num * num);consol..

배열 탐색1. indexOf() 배열에서 특정 값이 나타나는 위치(인덱스)를 반환값이 존재하지 않으면 -1을 반환배열 앞에서부터 검색첫 번째로 등장하는 요소만 반환문자열에도 사용 가능 (문자열 내 위치(인덱스) 반환)// [문법]배열 또는 문자열.indexOf(찾고 싶은 값, 검색을 시작할 인덱스(기본값은 0))// ex) 배열 검색const fruits = ['apple', 'banana', 'cherry', 'apple'];fruits.indexOf('apple'); // 0fruits.indexOf('apple', 1); // 3fruits.indexOf('mango'); // -1// ex) 문자열 검색const 문자열 = 'hello world';문자열.indexOf('o'); // 4문자열..

배열 순회 방법1. for문 배열의 인덱스를 직접 사용 가능반복 제어가 자유로움 (중간에 break, continue 가능).성능 면에서 가장 빠른 경우가 많음⚠️ 주의: 배열 길이를 매번 확인하면 성능에 영향을 줄 수 있으니, 큰 배열에서는 const len = arr.length;로 미리 저장하는 것이 좋음.const arr = ['apple', 'banana', 'cherry'];for (let i = 0; i 2. for...of 배열의 값만 직접 접근 가능. 인덱스는 자동으로 제공되지 않음.읽기 쉽고 간결함.반복문 내에서 break, continue 사용 가능인덱스가 필요하면 entries()와 함께 사용 가능// [문법]for (const 요소 of 배열) { //..

이터러블(iterable)iterable은 반복이 가능한 데이터 구조를 의미for...of나 스프레드(...) 같은 ES6 기능이 바로 이 특징을 활용하는 예로, 기능을 활용해 하나씩 값(value)을 꺼낼 수 있는 객체중요한 조건: 객체 안에 Symbol.iterator 메서드가 있어야 함Symbol.iterator는 이터레이터(iterator)를 반환하고, 이 iterator 를 통해 값을 하나씩 순회할 수 있음 대표적인 iterable 객체* 객체는 이터러블이 아님, (따라서 for..of로 바로 순회할 수 없음)종류예시설명배열[1,2,3]값이 순서대로 나옴문자열'hello'문자 하나씩 순회 가능Mapnew Map([[1,'a'],[2,'b']])키-값 쌍 순회Setnew Set([1,2,3])중..

버전 관리 시스템(VCS(Version Control System)) 코드나 문서 같은 파일의 변경 이력을 관리하는 도구VCS는 크게 로컬, 중앙집중식, 분산형으로 나눌 수 있음분산형 VCS (Distributed VCS, Git)개념: 모든 개발자가 전체 히스토리(copy)를 로컬에 보관하고, 필요 시 서버와 동기화예: Git, Mercurial장점오프라인 작업 가능 → 로컬에서 커밋, 브랜치, 병합 가능안정성 → 로컬과 원격 서버 모두에 기록 존재빠른 속도 → 대부분 작업이 로컬에서 이루어짐유연한 브랜치 관리 → 브랜치 생성, 병합, 삭제가 자유로움단점: 서버와 연동 시 초기 설정과 동기화 필요Git파일의 변경 이력을 기록하고, 협업 시 여러 사람이 동시에 작업할 수 있도록 도와주는 분산 버전 관리 ..

join() 배열의 모든 요소를 하나의 문자열로 결합요소 사이에 사용자가 지정한 구분자를 넣을 수 있음구분자 : 각 배열 요소 사이에 들어갈 문자열을 지정, 지정하지 않으면 기본값은 ,(콤마)반환값 : 배열의 모든 요소를 연결한 문자열을 반환배열 자체는 변하지 않음 (원본 배열 유지).활용 예 : CSV나 특수한 형식 문자열 포맷을 만들 때 사용// [문법]배열.join(구분자) const fruits = ['apple', 'banana', 'cherry'];console.log(fruits.join()); // "apple,banana,cherry"console.log(fruits.join(' - ')); // "apple - banana - cherry"console.log(fruit..

MapSCSS 데이터 타입 중 하나로 키(key)와 값(value) 쌍으로 이루어진 데이터 구조자바스크립트의 객체({key: value})와 비슷한 개념반복문과 결합하면 반복적인 CSS 생성에 매우 편리리스트와 달리 값을 키로 접근할 수 있고 데이터 접근이 명확하고 실무에서 재사용성이 높음기본 문법키와 값은 콜론(:)으로 구분각 쌍은 쉼표(,)로 구분$map-name : 맵 변수 이름key : 문자열처럼 쓰지만, 따옴표 없어도 됨value : 숫자, 색상, 문자열 등 SCSS에서 가능한 값괄호 ()로 묶고, 각 쌍은 쉼표 ,로 구분/* [문법] */$map: ( 키1: 값1, 키2: 값2, 키3: 값3);$colors: ( primary: #3498db, secondary: #2ecc71, d..