JavaScript 50

[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

[javascript] 객체 8 / 객체에서의 this

객체 메서드에서 thisthisthis는 현재 실행 중인 함수가 속한 객체를 가리키는 특별한 참조 값즉, 함수가 호출될 때 누구에 의해 호출되었는지에 따라 달라지는 값핵심: 함수가 “어디서 호출되었는지”가 중요 객체 메서드에서 this의 동작 원리객체 안에서 메서드를 정의하고 호출할 때, this는 그 메서드를 호출한 객체 자신을 가리킴객체 메서드에서는 보통 메서드를 호출한 대상(점(.) 또는 대괄호([])의 왼쪽 값) 이 this가 된다.예: obj.method() → this는 obj.const obj = { name: "Alice", greet: function() { console.log(this.name); }};obj.greet(); // Alice 호출 비교메서드 호출 규칙: 객체..

JS/Javascript 2025.09.03

[javascript] 객체 7 / 객체 내장 메서드

객체 속성 관련 메서드Object.keys(obj)객체의 자신의 속성(열거 가능한 속성) 키를 배열로 반환상속받은 속성은 제외됨.속성 순서는 추가된 순서를 따름// [문법]Object.keys(객체)const user = { name: "Alice", age: 25 };console.log(Object.keys(user)); // ["name", "age"]Object.values(obj)객체의 자신의 값(value)만 배열로 반환.// [문법]Object.values(객체)console.log(Object.values(user)); // ["Alice", 25]Object.entries(obj)객체의 [키, 값] 쌍을 2차원 배열로 반환.// [문법]Object.entries(객체)console.log..

JS/Javascript 2025.09.02

[javascript] 객체 5 / 객체 존재 여부 확인, 반복 (in 연산자, hasOwnProperty(), for...in)

in 연산자객체 또는 배열에 특정 프로퍼티(키)가 존재하는지 여부를 확인하는 연산자반환값: true 또는 false범위 : 객체 자신 + 부모(상속)값이 undefined라도 존재하면 true.배열의 경우 인덱스 존재 여부 확인 가능// [문법]"키이름" in 객체이름const person = { name: "Alice", age: 25};console.log("name" in person); // trueconsole.log("gender" in person); // false사용 예값이 없어도 in은 "존재"로 판단 → 디폴트 값 처리할 때 유용상속까지 포함 → 객체가 어디서 프로퍼티를 받았는지 신경 써야 할 때 주의배열 인덱스 체크 → sparse array(빠진 요소) 처리 가능in연산자 특징..

JS/Javascript 2025.08.21

[javascript] 객체 4 / 객체 삭제

객체 삭제객체 프로퍼티 삭제방법1. delete 연산자가장 기본적인 방법객체에서 해당 프로퍼티 자체를 완전히 제거키 자체가 사라짐성능상 아주 큰 객체를 반복 삭제할 때는 조금 느릴 수 있음// [문법]delete 객체명.키명;delete 객체명["키명"];const user = { name: "철수", age: 20, city: "서울" };delete user.age; // 점 표기법delete user["city"]; // 대괄호 표기법console.log(user);// { name: "철수" }2. null 또는 undefined 할당프로퍼티를 아예 제거하는 대신, 값만 없애는 방식키(name, age)는 여전히 존재데이터만 비워야 할 때 사용프로퍼티는 유지, 값만 비움/..

JS/Javascript 2025.08.21

[javascript] 객체 1 / 객체 기본, 특징, 객체 선언, 메서드 정의

객체객체는 키(key)와 값(value)의 쌍으로 구성된 속성을 가진 데이터 타입키(key): 보통 문자열(String) 또는 심볼(Symbol)값(value): 숫자, 문자열, 불리언, 함수, 배열, 다른 객체 등 모든 자료형이 가능속성(property) : 키(key) + 값(value)의 쌍을 의미데이터를 {}로 감싸 객체를 정의데이터 타입의 제한이 없음키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능객체의 키와 속성 값이 같을 경우 하나로 입력가능특징특징설명동적(Dynamic)객체는 생성 후에도 속성을 자유롭게 추가, 수정, 삭제할 수 있음참조 타입(Reference Type)객체는 메모리에 ..

JS/Javascript 2025.08.20

[javascript] 유사배열

유사배열유사배열은 배열과 비슷하게 생겼지만 진짜 배열은 아닌 객체즉, 배열처럼 인덱스(0, 1, 2...)와 length 프로퍼티가 있어서 배열처럼 접근할 수 있지만, 배열 메서드(Array.prototype 메서드)는 없는 객체특징인덱스로 요소에 접근 가능 (ex, obj[0], obj[1])length 속성 존재배열 고유 메서드(ex: push(), pop(), forEach())를 사용할 수 없음반복문 접근 가능(for, while)일반 객체이므로 배열 메서드를 바로 사용할 수 없음 Array.from() 또는 전개 연산자 ...로 배열로 변환 가능유사배열을 진짜 배열로 만들어야 배열 메서드를 쓸 수 있음Array.from() 함수나 [...obj] (이터러블인 경우)로 변환 가능반복문으로 접근 가..

JS/Javascript 2025.08.11