-

[javascript] 유사배열

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

[javascript] arguments

arguments정의 : 함수 내부에서 사용할 수 있는, 호출 시 전달된 모든 인자(argument)를 담고 있는 유사 배열 객체함수 내부에 자동으로 생성됨함수가 호출될 때 전달된 모든 인자들을 순서대로 담고 있음유사 배열 객체(array-like object)즉, 인덱스(0, 1, 2, ...)로 접근 가능하고 .length 프로퍼티도 있지만, 배열 메서드(ex. .map(), .forEach())는 없음주요 특징특징설명인덱스 접근 가능arguments[0], arguments[1] 등으로 인자에 접근 가능.length 프로퍼티함수에 전달된 인자 개수를 알 수 있음배열 메서드 없음arguments는 배열이 아니어서 .map(), .filter() 같은 메서드 사용 불가함수 선언과 상관없이 존재모든 일반..

[javascipt] 일반함수와 화살표 함수에서의 this

화살표 함수와 일반함수의 this 비교일반 함수는 호출 방식에 따라 this가 달라짐.화살표 함수는 정의된 위치의 this를 그대로 가짐.따라서 화살표 함수는 보통 this를 고정해서 사용하고 싶을 때 사용일반 함수에서의 this일반 함수 안에서 this는 함수를 호출한 주체(객체)를 가리킴그래서 호출 방식에 따라 this가 달라짐예를 들어, 객체의 메서드로 호출하면 그 객체를 가리키고, 그냥 함수로 호출하면 전역 객체(또는 엄격 모드면 undefined)를 가리킴const obj = { name: "철수", sayName: function() { console.log(this.name); }};obj.sayName(); // 철수 (obj가 this)const fn = obj.sayNam..

콜백 함수 (Callback Function)다른 함수의 인자로 전달되어, 특정 작업이 끝난 후 호출되는 함수비동기 처리나 이벤트 처리에 많이 사용됨.자바스크립트는 기본적으로 비동기 방식이 많아서, 어떤 작업이 끝난 뒤에 무언가를 하고 싶을 때 그 작업이 끝났을 때 실행할 함수를 미리 넘겨주는 것호출되는 시점이 비동기 작업 완료 이후임문제점: 콜백 지옥 (Callback Hell)콜백을 여러 번 중첩해서 사용하면 코드가 복잡해지고 가독성이 떨어짐 → 이 문제를 해결하려고 프로미스(Promise)나 async/await가 등장// [문법 - 함수를이자로 전달하는 형태]function 함수이름(콜백함수) { // 작업 후 콜백 호출 콜백함수();}기본적인 콜백 함수 구조/* 함수A : 콜백 함수를 받을 ..

전개 연산자(Spread Operator) ... 문법을 사용해 배열, 객체, 문자열 등 반복 가능한(iterable) 값의 요소를 개별적으로 펼쳐서 전달하는 ES6 문법사용위치 : 함수 호출, 배열, 객체 리터럴 등에서 사용* iterable : 배열, 문자열, 객체 등 반복 가능한 값 또는 펼칠 수 있는 값을의미const arr = [1, 2, 3];console.log(...arr); // 1 2 3주요 사용 패턴배열 복사 (얕은 복사)원본 배열 변경 없이 복사 (얕은 복사)// [문법]const 새배열 = [...기존배열];const original = [1, 2, 3];const copy = [...original];console.log(copy); // [1, 2, 3]console.log..

rest 파라미터 (...args)정의 :함수의 매개변수 목록에서 ‘나머지’ 인자들을 하나의 배열로 모아주는 문법ES6(ECMAScript 2015) 부터 도이타입 : 배열...rest ← rest 파라미터rest는 배열(type) 형태로 전달됨// [문법]function funcName(고정매개변수, ...rest) { // 함수 본문}function showInfo(name, age, ...skills) { console.log(name); // 'Jisoo' console.log(age); // 25 console.log(skills); // ['HTML', 'CSS', 'JS']}showInfo('Jisoo', 25, 'HTML', 'CSS', 'JS'); 주의사항rest 파라미터..

스코프 (Scope)변수에 접근할 수 있는 범위를 의미종류설명전역 스코프함수 바깥에서 선언된 변수. 전체 코드에서 접근 가능함수 스코프함수 안에서 선언된 변수. 함수 내부에서만 접근 가능블록 스코프 (let, const){} 블록 내부에서 선언된 변수는 블록 안에서만 유효let a = 10; // 전역 스코프function test() { let b = 20; // 함수 스코프 if (true) { let c = 30; // 블록 스코프 console.log(a, b, c); // ✅ 가능 } console.log(c); // ❌ ReferenceError: c is not defined}test();console.log(b); // ❌ ReferenceError: b is not de..

재귀 호출 (Recursion)정의 : 함수 안에서 자기 자신을 다시 호출하는 것을 의미사용 상황 : 문제가 자기 자신을 포함한 형태일 때→ 예: 트리 구조 탐색, 디렉토리 구조, 수학적 계산(피보나치, 팩토리얼 등)재귀 함수의 호출 핵심종료 조건 (Base case) : 종료 조건이 없다면, 함수는 무한히 자기 자신을 호출하다가 ❗️"Maximum call stack size exceeded" 오류가 발생 (스택 오버플로우)자기 자신 호출 (Recursive call) : 문제를 더 작은 문제로 줄여 다시 호출재귀 함수 구조의 기본function 함수명(매개변수) { if (종료 조건) { return 결과; } return 함수명(다음 값); // 자기 자신을 다시 호출}재귀..

기명 함수 (Named Function) 이름이 있는 함수function() 뒤에 이름이 있는 함수 ⇒ function 함수명()함수 선언식은 기본적으로 기명함수 디버깅할 때 스택 트레이스에 함수 이름이 찍히고, 함수 내부에서 재귀 호출도 가능해서 오류 찾기와 복잡한 로직 작성에 유리특징특징설명디버깅하기 쉬움에러 스택 트레이스에 함수 이름이 명확히 표시됨재귀 호출 가능함수 내부에서 자기 이름으로 자신을 호출할 수 있음명확한 의도 표현 가능함수가 무엇을 하는지 이름만 보고 알 수 있음 function greet() { console.log("Hello!");}익명 함수 (Anonymous Function) 이름이 없는 함수, function() 뒤에 이름이 없는 함수 ⇒ function()보통 함수 ..

엄격 모드정의 : "use strict" 지시어를 사용하여 코드 실행을 더 엄격하게 만드는 자바스크립트 기능실수를 더 빠르게 잡아냄구문 오류를 강하게 체크암묵적인 동작 금지 → 개발자가 의도하지 않은 버그 예방엄격모드 사용 방법"use strict"는 반드시 파일 또는 함수의 맨 앞에 와야 함!전체 스크립트에 적용"use strict";x = 10; // ❌ ReferenceError: x is not defined함수 단위로 적용function myFunc() { "use strict"; y = 5; // ❌ ReferenceError: y is not defined} 엄격 모드에서 달라지는 주요 동작 비교상황느슨한 모드(기본)엄격 모드선언 없이 변수 사용x = 3 가능❌ ReferenceError..