변수 선언, 대입 연산자var사용 금지 let한번 선언한 변수를 여러 번 변경 가능 const한번 선언한 변수의 값을 변경할 수 없음 =키워드 좌측에는 대입할 변수를, 키워드 우측에는 대입할 값을 작성선언되지 않은 변수 이름을 사용하려고 하면 참조에러 발생 비교 연산자===양쪽에 위치한 값이 같은 경우 true, 다른 경우 false !==양쪽에 위치한 값이 다른 경우 true로 평가, 같은 경우 false (! -> 부정하는 not의 의미로 사용) >, >는 좌측에 위치한 값이 더 클 때에만 true로 평가, 양쪽의 값이 같거나 우측에 위치한 값이 더 큰 경우 false >=, >=는 좌측에 위치한 값이 더 크거나 우측에 위치한 값과 같을 때에만 true, 우측에 위치한 값이 더 큰 경우 false =..

클로저 내부 함수와 내부 함수 함수 안에 또 다른 함수(내부 함수)가 정의된 경우에 발생 내부 함수가 외부 함수에 대한 참조를 가지는 경우, 클로저라고 함 변수 유지 클로저를 통해 내부 함수는 외부 함수의 변수를 참조 클로저가 함수를 정의할 때의 스코프에 있는 변수를 참조한다는 의미 렉시컬 스코프 클로저는 렉시컬 스코프(정적 스코프)를 따름 클로저가 함수를 정의할 때의 스코프에 있는 변수를 참조한다는 의미 클로저의 활용 데이터 은닉 클로저를 사용하면 변수를 외부에서 접근하지 못하게 하고, 변수에 접근하려면 클로저 내부 함수를 통해 접근해야 됨 데이터 은닉 및 정보은닉을 구현할 수 있음 콜백 함수 클로저를 사용하여 콜백함수를 구현하거나 비동기 작업을 처리할 수 있음 클로저를 이용해 외부 범위의 상태를 유지..

클래스 (Class) 객체를 생성하기 위한 설계도 또는 템플릿 객체의 속성(프로퍼티)과 동작(메서드)을 정의 Ex. "자동차" 클래스는 자동차 객체를 만들기 위한 설계도 객체를 만들기 위한 일종의 룰이며, 여러 개의 객체를 생성할 수 있음 추상적이며 구체적인 데이터가 포함되지 않음 객체를 생성하기 위한 규칙, 룰, 구조를 정의하며, 클래스의 인스턴스(객체)는 이러한 규칙에 따라 만들어짐 생성자 (Constructor) 생성자 메서드의 이름은 클래스의 이름과 동일 생성자는 클래스 내에서 Constructor라고 명명 객체가 생성될 때 호출되며, 해당 객체의 초기 상태를 설정하는 역할 Ex. 객체의 속성 초기화, 필요한 리소스 할당, 초기화 작업 등을 수행할 수 있음 생성자를 호출하면 클래스의 인스턴스(객체..

DOM이란 무엇인가? 문서 객체 모델(Document Object Model)의 약자로 웹 페이지를 나타내는 계층구조 HTML 문서의 요소(태그), 속성, 텍스트, 스타일 등을 트리 형태로 구조화하여 JavaScript로 조작할 수 있도록 제공 DOM 트리 구조 DOM은 트리 구조(HTML 문서를 계층 구조로 표현)로 표현됨 각 요소는 노드(Node)로 표현되며, 트리의 가장 위쪽에 위치한 노드를 루트 노드라고 함 루트 노드 (Root Node) DOM 트리 구조의 시작점은 document 객체 (웹 페이지 전체) document 객체 아래에는 html 요소가 위치(html -> head -> body...) 요소 노드 (Element Nodes) HTML 문서의 각 요소(태그)는 요소 태그로 표현 (,..

콜백 함수 (callback function) 콜백함수는 함수의 매개변수로 전달되는 함수 다른 함수에 의해 호출되거나 실행 비동기 작업에서 사용되며, 비동기 작업이 완료되면 호출되어 결과를 처리하거나 어떤 동작을 수행 콜백 함수의 역할 비동기 작업의 완료 처리: 비동기 작업(Ex. 파일 로딩, 네트워크 요청)이 완료된 후에 실행 결과를 처리하거나 화면 업데이트 등의 동작을 수행할 수 있음 이벤트 처리: 웹 애플리케이션에서 사용자의 이벤트(클릭, 입력 등)에 응답하기 위해 콜백함수를 등록 제어권 양도: 콜백 함수를 사용하면 제어권(control flow)을 다른 함수에 양도할 수 있음 비동기 작업을 수행한 후 다른 코드를 실행할 수 있음 콜백 함수의 사용 콜백 함수는 함수의 인수로 전달 // 1. 비동기 ..

this의 정의 실행 컨텍스트에 따라 동적으로 결정되는 키워드 현재 함수 또는 메서드가 속한 객체에 동적으로 접근 가능 암시적 바인딩 (Implicit Binding) 객체의 메소드메서드 내에서 this는 그 메서드를 호출한 객체를 가리킴 const person = { name: 'Alice', sayHello: function() { console.log(`Hello, ${this.name}!`); } }; person.sayHello(); // "Hello, Alice!" 명시적 바인딩 (Explicit Binding) call, apply, bind를 사용하여 this 값을 직접 지정 call과 apply는 함수를 즉시 호출하며, bind는 새로운 함수를 반환 function greet(messag..

실행 컨텍스트(Execution Context) 코드가 실행되는 환경을 나타내며, 변수 및 함수에 대한 접근 권한과 실제 실행 순서를 관리하는 역할 실행 컨텍스트는 스택(Stack) 데이터 구조로 관리되며, 현재 실행 중인 컨텍스트가 가장 위에 위치함 이 컨텍스트 스택은 "호출 스택(Call Stack)"이라고도 불림 Variable Object (변수 객체): 현재 실행 컨텍스트 내에서 선언된 변수, 함수 매개변수, 함수 선언 등의 정보가 저장 Scope Chain (스코프 체인): 현재 컨텍스트의 변수 객체와 상위 컨텍스트의 변수 객체를 연결한 체인 이를 통해 변수 검색이 가능해짐 This Value (this 값): 현재 실행 중인 함수에서 this 키워드가 참조하는 객체 Code (코드): 실행할..

기본 데이터 타입 (Primitive Data Types) 값 자체를 직접 저장하는 데이터 타입으로 불변(immutable)하며 스택 메모리에 저장 숫자 (Number): 정수 및 부동 소수점 숫자 문자열 (String): 텍스트 데이터 불리언 (Boolean): true 또는 false와 같은 논리적인 값 undefined: 변수가 정의되지 않았더나 값을 할당하지 않았을 때 나타나는 값 null: 아무 값도 없음을 나타내며, 변수가 비어 있음을 나타내는 데 사용 심볼(Symbol): 유일한 값으로 주로 객체 프로퍼티 키로 사용 BigInt: 큰 정수 값을 나타냄 더보기 // 숫자 let age = 30; let price = 19.99; // 문자열 let name = "John"; let messag..

Map & Set 자바스크립트에서 객체와 배열을 이용하면 다양하고 복잡한 프로그래밍을 할 수 있으나 현실세계의 여러 문제들을 프로그래밍적으로 반영하기엔 많이 부족하므로 등장한 자료구조 Map Key-Value 쌍: 키-값(key-value) 쌍을 저장하는 자료구조로 이러한 쌍을 이용하여 데이터를 저장하고 검색 중복 키 허용: 키에 중복을 허용하며, 각 키는 유일해야 하지만 값은 중복저장 될 수 있음 순서 보장: 키-값 쌍이 추가된 순서를 보존해서 데이터를 반복하는 동안 원하는 순서로 접근 가능 주요 메서드: set(key, value), get(key), has(key), delete(key) 등으로 데이터 추가, 조회, 검색 및 삭제 가능 const myMap = new Map(); myMap.set(..

일급객체(First-class Object) 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체 변수에 할당(Variable Assignment) 함수를 변수에 할당할 수 있으며, 이를 통해 함수를 다루는 변수에 다양한 함수를 할당할 수 있음 const greet = function(name) { return `안녕, ${name}!`; }; 매개변수로 전달(Parameter Passing) 함수를 다른 함수의 매개변수로 전달할 수 있으며, 콜백 함수와 이벤트 처리 등 다양한 상황에서 사용 function saySomething(func, name) { console.log(func(name)); } saySomething(greet, 'Alice'); // 출력: "안녕, Alice!" 함..

ES6 문법 소개 ECMAScript 6 (ES6)는 JavaScript의 버전 중 하나로, 2015년에 발표 ES6는 이전 버전인 ES5에서 새로운 문법과 기능을 도입하여 JavaScript 개발자들이 보다 쉽고 효율적으로 코드를 작성할 수 있도록 개선 중복 선언과 재할당 재선언 (중복선언) 재할당 ES6 이전 문법 var 가능 가능 변수 let 불가능 가능 상수 const 불가능 불가능 변수 스코프 유효범위 스코프: 유효한 참조 범위 함수 내부에서 선언된 변수는 함수 내부에서만 참조 가능 var로 선언한 변수의 스코프와 let, const로 선언한 변수의 스코프가 다름 함수 레벨 스코프(Function-level scope) 함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수..

객체 생성 기본적인 객체 생성 let person = { name: "홍길동", age: 30, gender: "남자" }; 객체를 만들 때는 중괄호({})를 사용하며, 속성과 값을 콜론(:)으로 구분하여 작성 각 속성과 값은 쉼표(,)로 구분 생성자 함수를 사용한 객체 생성 생성자 함수는 일반적인 함수와 비슷하지만 객체를 초기화하고 속성을 설정하기 위해 사용 동일한 형식의 객체를 여러 개 생성할 수 있으며, 이러한 객체들은 생성자 함수에 정의된 속성과 메서드를 공유 생성자 함수를 사용하면 객체를 일괄적으로 생성할 수 있음 function Person(name, age, gender) { this.name = name; this.age = age; this.gender = gender; } let per..