-

화살표 함수와 일반함수의 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 : 콜백 함수를 받을 ..

나머지 매개변수(rest parameter) (...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')..

스코프 (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 함수명(다음 값); // 자기 자신을 다시 호출}재귀..

엄격 모드정의 : "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 속성..