JS 71

[javascript] 배열 5 / 배열 탐색, 조건 검색, 검증 (indexOf(), lastIndexOf(), includes(), find(), findIndex(), every(), some()..)

배열 탐색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문자열..

JS/Javascript 2025.09.11

[javascript] 배열 4 / 배열 반복 (for, forEach, for...of)

배열 순회 방법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 배열) { //..

JS/Javascript 2025.09.11

[javascript] 이터러블(iterable)

이터러블(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])중..

JS/Javascript 2025.09.11

[javascript] 배열 3-3(요소 조작) / 문자열 반환 (join, toString())

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..

JS/Javascript 2025.09.10

[javascript] 배열 3-2(요소 조작) / 복사, 잘라내기, 붙여넣기(slice, concat, spread)

slice(start, end)배열의 일부를 잘라내어 새로운 배열을 반환 배열 일부 추출, 복사원본 배열은 변경 X특징start부터 end 전까지(즉, end는 포함 x) 잘라냄end를 생략하면 배열 끝까지음수 가능 → 뒤에서부터 계산 (-1 → 마지막 요소)// [문법]배열.slice(시작인덱스, 끝인덱스(끝 인덱스 요소는 반환 X))let arr = [10, 20, 30, 40, 50];arr.slice(1, 3); // [20, 30] (인덱스 1~2)arr.slice(2); // [30, 40, 50]arr.slice(-2); // [40, 50]arr.slice(); // 전체 복사 [10, 20, 30, 40, 50]concat()배열을 합쳐서 새로운 배열 생성..

JS/Javascript 2025.09.08

[javascript] 배열 3-1 (요소 조작) / 요소 제거, 추가, 교체(push, pop, unshift, shift, splice)

push / pop (조작 위치 : 끝)성능 : 느림 (앞에서 처리할 때 배열 전체가 밀리거나 당겨져야 해서 비용이 큼)1. push()배열의 끝(뒤)에 요소를 추가하는 메서드여러 개의 요소를 한 번에 넣을 수 있음반환값 : 새로운 배열의 length(길이)// [문법]배열.push(요소1, 요소2, ...)let arr = [1, 2];arr.push(3); // [1, 2, 3]console.log(arr.push(4, 5)); // 5 (요소를 추가한 뒤, 변경된 length륾 반환)console.log(arr); // [ 1, 2, 3, 4, 5 ]2. push()배열의 끝(뒤)에서 요소를 제거하는 메서드반환값 : 맨 마지막 요소를 꺼내고, 그 값을 반환배열이 비어있으면 undef..

JS/Javascript 2025.09.05

[javascript] 배열 2 / 배열 생성 방식 (리터럴, new Array, Array.of, Array.from, 전개 연산자)

1. 배열 리터럴(Literal) 방식가장 흔히 사용되고, 가장 간단한 방법.배열 길이는 요소 개수에 따라 자동 결정.요소 타입은 혼합 가능: 숫자, 문자열, 객체, 함수, 다른 배열 등.배열 내부는 0부터 시작하는 인덱스로 접근 가능.장점직관적빠르고 읽기 쉬움for..of, map, filter 등 반복문과 함께 사용하기 좋음// [문법]const 배열이름 = [요소1, 요소2, ...];const fruits = ["사과", "바나나", "체리"];console.log(fruits[0]); // "사과"console.log(fruits[fruits.length - 1]); // "체리"2. Array 생성자 사용new Array() 로 배열 생성new Array(요소1, 요소2, ...) → 배열 생..

JS/Javascript 2025.09.04

[javascript] 배열 1 / 배열(Array) 정의, 배열 인덱스, 배열 길이

배열(Array) 이란배열(Array) 은 여러 개의 값을 순서대로 저장하는 자료 구조각각의 값은 "요소(element)"라고 부르고, 요소는 고유한 번호(인덱스)로 구분됨자바스크립트 배열은 동적 배열이라 크기가 고정되지 않고, 중간에 요소를 추가하거나 삭제할 수 있음특징인덱스 기반 접근길이(length) 속성동적 크기 할당 가능희소 배열(sparse array) 가능let fruits = ["사과", "바나나", "포도"];배열과 객체의 차이구분객체(Object) 배열(Array)저장 구조키: 값 쌍순서(index)에 따른 값접근 방법obj.key 또는 obj["key"]arr[index]순서보장되지 않음(ES6 이후 일부 보장되지만 기본적으로 순서 의미 X)반드시 0부터 시작하는 순서 유지용도데이터의..

JS/Javascript 2025.09.04

[javascript] 메서드 체이닝(Method Chaining)

메서드 체이닝(Method Chaining)정의 : 한 객체에서 여러 메서드를 연속으로 호출하는 기법한 메서드가 호출된 후 자신(객체)을 반환해서 다음 메서드를 이어서 호출할 수 있는 구조문자열, 배열, 커스텀 객체 등 다양한 곳에서 활용 가능각 메서드는 반드시 객체 자신(this) 또는 메서드 체이닝 가능한 값을 반환해야 체이닝이 가능함'장점단점코드가 간결해짐한 메서드라도 잘못되면 전체 체인 실패객체를 여러 번 참조할 필요 없음디버깅 시 어느 단계에서 문제 생겼는지 찾기 어려움연속 연산이 직관적으로 표현됨체이닝만 의존하면 가독성이 떨어질 수 있음// ex)object.method1().method2().method3();체이닝 활용 문자열 체이닝 활용활용: URL slug 생성, 사용자 입력 정리 등...

JS/Javascript 2025.09.03

[javascript] 객체 9 / 프로토타입(prototype)

프로토타입(prototype)자바스크립트에서 모든 객체는 다른 객체를 가리키는 링크를 갖고 있음. 이 링크를 [[Prototype]]이라고 부르며, 흔히 "객체의 부모"처럼 생각할 수 있음다른 객체를 참조할 수 있는 내부 연결([[Prototype]]) 링크를 통해 객체가 자신에게 없는 속성이나 메서드를 상위 객체에서 찾아서 사용할 수 있음.객체 → 부모 객체 → 부모의 부모 객체 → ... → Object.prototype → null왜 프로토타입이 필요한가?1. 메모리 효율성을 위해프로토타입을 사용하면 메서드를 객체마다 반복 생성하지 않고 공유 메서드를 하나만 정의하고 모든 객체가 참조 가능// ex) 공유 메서드 활용 Person.prototype.sayName = function() { retu..

JS/Javascript 2025.09.03