-

[javascript] 전개 연산자(Spread Operator)

전개 연산자(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..

함수의 종류함수의 종류는 함수가 어떤 역할을 하거나, 어떤 방식으로 동작하는지에 따라 분류일반 함수가장 기본적인 함수로, 특정 작업을 수행하기 위해 선언하는 함수.function 키워드로 선언함.호출될 때마다 함수 내부 코드가 실행됨매개변수를 받고, 값을 반환할 수 있음this 바인딩은 호출하는 방식에 따라 달라짐 (객체 메서드로 호출하면 객체, 일반 호출 시 전역 객체 또는 undefined).// [문법]function 함수명(매개변수1, 매개변수2) { // 실행할 코드 return 값; // 선택적}// 호출 예시함수명(값1, 값2);function greet() { console.log('안녕!');}greet(); // 함수 호출즉시 실행 함수선언하자마자 바로 실행되는 함수.주로 변수의..

함수의 선언 방식함수를 어떻게 정의하는지, 즉 문법적인 형태에 따라 분류됨1. 함수 선언식 (기본방법)가장 기본적인 함수 선언 방식이름이 있고, function() 형태로 선언호이스팅(Hoisting)이 됨 → 선언 전에 호출 가능✓ 코드에서 가장 먼저 선언되고, 어디서든 사용할 수 있다!// [문법]function 함수이름(매개변수1, 매개변수2, ...) { // 실행할 코드 return 반환값;}sayHello(); // 가능! (호이스팅 때문)function sayHello() { console.log("안녕!");}2. 함수 표현식변수에 익명 함수(이름 없는 함수) 또는 이름 있는 함수를 담는 방식호이스팅 X → 선언 전에 호출하면 에러 발생조건문 안에서 선언할 경우 반드시 함수 표현식으로..

input 속성 제어input 관련 속성input의 속성을 조회/설정 가능// [문법 - 조회]해당input.value // [문법 - 설정]해당input.value = "변경하려는 값" 속성명설명예value현재 입력된 값을 읽거나 설정input.value = "Hello"type인풋 타입 변경 (text, password 등)input.type = "password"checkedcheckbox, radio가 체크되었는지 확인checkbox.checked = truedisabled비활성화 여부input.disabled = truereadOnly읽기 전용 여부input.readOnly = trueplaceholder힌트 텍스트 설정input.placeholder = "이름 입력"maxLength최대 글자 ..

해당form.elementsform 안에 있는 모든 폼 컨트롤 요소(input, select, textarea, button 등)를 HTMLFormControlsCollection 형태로 제공하는 유사배열 객체* HTMLFormControlsCollection : 태그 내부에 있는 모든 폼 컨트롤 요소들 (, , , 등)을 배열처럼 접근 가능한 컬렉션 형태로 제공하는 읽기 전용 객체입니다 인덱스 또는 name 속성으로 접근 가능접근 방법1. 인덱스로 접근인덱스를 사용하여 폼 안의 요소를 가져옴// [문법]해당form.elements[인덱스]const form = document.querySelector('form');console.log(form.elements[0].value);2. name 속성..