JS ES6

기본 동작:함수 내부에서 그냥 this를 사용하면, window 객체를 가리킵니다.예시:참고:HTML 페이지의 <script> 태그 내에 작성된 전역 함수나 변수는 모두 자동으로 window라는 큰 보관소(전역 객체)에 담깁니다.예를 들어, 전역 변수 var x

일반 함수 내의 this: 일반 함수에서 this를 사용하면 전역 객체(window)를 가리킵니다. 오브젝트의 메소드 내의 this: 오브젝트 내부의 함수(메소드)에서 this는 해당 메소드를 호출한 오브젝트를 참조합니다. constructor 내의 this:

함수 선언문함수 표현식Arrow Function 기본 문법기존의 function 키워드를 대체하는 새로운 문법이지만, 단순히 짧게 작성하는 것 이상의 특징이 있습니다.함수가 어떤 입력을 받아서 어떤 결과를 반환하는지를

변수의 기본 사용법:선언(Declaration): 변수 이름을 만드는 과정예: var 이름;할당(Assignment): 변수에 값을 넣는 과정예: 이름 = 'Kim';선언과 할당을 동시에 할 수도 있습니다.예: var 이름 = 'Kim';저장 가능한 자료형:문자열, 숫

개념: 자바스크립트는 변수나 함수의 선언(선언문)을 해당 스코프의 최상단으로 끌어올리는 현상이 발생합니다.즉, 코드를 실행하기 전에 선언부가 먼저 해석되므로 코드 상에서 선언문 위치와 실제 동작 순서가 달라집니다.예제: 위 코드는 자바스크립트 내부적으로 아래와 같이

JavaScript ES6에서 도입된 Template Literals은 기존의 따옴표 기반 문자열 선언 방식의 한계를 극복하기 위해 만들어졌습니다. 백틱(\`)을 사용하여 문자열을 정의하며, 다양한 장점을 제공합니다.문제점:기존 문자열은 중간에 엔터키(줄바꿈)를 직접

문법: 세 개의 점(...)을 사용하며, “펼침연산자”라고도 부릅니다. 기능: 배열, 문자열, 객체 등의 괄호(또는 중괄호)를 “펼쳐” 내부의 요소들을 분리해줍니다. 즉, "괄호제거 해주는 연산자"로 이해할 수 있습니다. 배열 전체 출력:동작원리: 배열에 붙

배열 내부의 데이터를 함수의 파라미터로 한 번에 전달기존 방식: 각 인덱스에 접근해 하나씩 전달하거나 apply()를 사용해야 함최신 방식: spread operator(...)를 사용하여 배열 요소들을 펼쳐서 인자로 전달Spread operator 이전에는 apply

함수를 정의할 때, 만약 인자를 전달하지 않으면 기본값을 설정할 수 있습니다.문법:설명:매개변수 a에는 1이 할당되고, b는 인자가 없으므로 기본값 10이 사용됩니다.결과적으로 1 + 10 = 11이 콘솔에 출력됩니다.설명:b의 기본값으로 2 \* 5가 평가되어 10이

정의: Rest 파라미터는 함수의 매개변수 목록에서 ... 기호를 사용하여 전달된 모든 인자를 배열로 모아줍니다. 문법:예제 1: 모든 인자를 배열로 받기설명:호출 시 전달된 모든 인자가 배열 형태로 파라미터들에 담깁니다.사용법: Rest 파라미터는 반드시 마지막

객체지향 문법을 배우기 전에 반드시 이해해야 할 Primitive와 Reference 데이터 타입에 대해 알아봅니다.JavaScript에서는 자료형을 크게 두 가지로 구분합니다.Primitive Data Type정의: 데이터 자체가 변수에 저장됩니다.예: 문자열(Str

이번 강의에서는 constructor(생성자 함수) 를 이용해 객체를 효율적으로 복사하고, 각각 독립적인 객체를 생성하는 방법을 배웁니다.문제 상황: 학생 출석부나 상품 리스트와 같이 비슷한 형태의 객체를 여러 개 생성할 때 를 하드코딩 하는 것은 비효율적이며, 나

JavaScript에서 상속은 constructor를 통해 이루어질 수도 있지만, prototype이라는 또 다른 메커니즘을 사용해 상속 기능을 구현할 수 있습니다. prototype은 일종의 “부모의 유전자” 역할을 하여, 자식 객체들이 공통된 속성과 메서드를 공유할

생성 시점:prototype은 오직 constructor 함수가 만들어질 때 자동으로 생성됩니다.일반 object나 array에는 기본적으로 prototype이 없습니다.상속을 원할 때:일반 객체에 상속 기능을 부여하고 싶다면,constructor 함수를 사용하거나,다

ES6의 class 문법이나 prototype, this 개념이 다소 복잡하게 느껴진다면, ES5에서 제공하는 Object.create()를 활용하여 상속을 쉽게 구현할 수 있습니다.기본 문법설명:소괄호 안에 전달된 부모 객체가 자식 객체의 프로토타입(유전자)으로 설정

ES6의 class 키워드는 기존의 생성자 함수와 prototype 기반 상속 기능을 좀 더 직관적이고 가독성 좋게 구현할 수 있게 해줍니다. ES6 class의 기본 문법과 상속 기능 구현 방법을 알아봅니다.class 키워드를 사용하면 기존의 function 부모()

class, prototype, constructor에 익숙한 분들을 위한 심화 내용입니다. ES6의 extends와 super를 사용하여 기존 클래스를 상속하고 확장하는 방법을 알아봅니다.extends는 기존 클래스를 그대로 복사하여 새로운 클래스를 만들 때 사용합니

자바스크립트에서 getter와 setter는 객체 내부의 데이터를 안전하게 읽고 수정하기 위한 문법입니다. 단순히 함수로 데이터를 꺼내거나 수정하는 방식을 대체하여, 코드의 직관성과 데이터 무결성을 높여줍니다.데이터 무결성 유지직접 데이터에 접근하지 않고 간접적으로 다

Destructuring 문법은 배열이나 객체 안의 중요한 데이터들을 손쉽게 추출하여 변수에 할당할 수 있도록 도와줍니다. 한두 개의 데이터라면 기존 방식도 괜찮지만, 여러 데이터를 뽑아야 한다면 코드가 길어지게 되는데, 이때 유용하게 사용됩니다.전통적인 방식은 배열

자바스크립트 코드가 길어지면 파일을 분리하여 관리하는 것이 좋은 관습입니다. ES6의 import/export 문법을 활용하면 파일 간에 필요한 변수, 함수, 혹은 클래스를 선택적으로 내보내거나(import/export) 가져올 수 있습니다. 단, import로 가져온

웹브라우저가 HTML, CSS, JavaScript 파일을 받아 실행할 때 내부에서 어떻게 Stack과 Queue를 활용하는지 알아봅니다. 이 내용을 이해하면 이벤트리스너, setTimeout 등 비동기 처리와 관련한 동작 원리를 파악하여 효율적인 코드를 작성하는 데

JavaScript의 동기(synchronous)와 비동기(asynchronous) 처리 개념, 그리고 비동기 처리 시 순차 실행을 위해 사용되는 콜백 함수 디자인에 대해 알아봅니다.정의:코드가 한 줄씩 순서대로 실행되는 방식입니다.자바스크립트를 실행하는 웹 브라우저는

Promise는 콜백 함수 패턴의 단점을 보완하기 위한 디자인 패턴입니다. ES6에서 새롭게 도입된 문법이라기보다는, 코드의 흐름을 보다 읽기 쉽고 관리하기 편하게 만들어 주는 디자인 패턴입니다.Promise는 성공(resolve) 혹은 실패(reject) 여부를 판단

ES8에서 도입된 async/await는 기존의 Promise와 then 체인을 훨씬 쉽게 사용할 수 있도록 도와주는 문법입니다. 이를 통해 비동기 코드를 보다 동기 코드처럼 작성할 수 있습니다.역할:함수 선언 앞에 async를 붙이면 해당 함수는 자동으로 Promis

for in과 for of 반복문의 사용법 및 그 차이, 그리고 객체의 enumerable과 iterable 속성에 대해 알아봅니다.반복문은 크게 두 가지 용도로 사용됩니다.코드 단순 반복: 동일한 작업을 여러 번 수행할 때자료형 내부의 데이터 순회: 배열, 객체 등

for in과 for of 반복문의 사용법 및 그 차이, 그리고 객체의 enumerable과 iterable 속성에 대해 알아봅니다.반복문은 크게 두 가지 용도로 사용됩니다.코드 단순 반복: 동일한 작업을 여러 번 수행할 때자료형 내부의 데이터 순회: 배열, 객체 등

ES6부터 Symbol이라는 새로운 Primitive 자료형이 추가되었습니다. 이 자료형은 주로 Object의 비밀스런 key로 활용되어, 기존 문자형 key와는 다른 특수한 성질을 가집니다.생성 방법:Symbol() 함수에 간단한 설명(라벨)을 입력하면 해당 설명을

ES6부터는 새로운 자료구조인 Map과 Set이 추가되었습니다. 이 두 자료형은 기존의 Object와 Array와는 다른 특징과 용도를 가지고 있으며, 각각 "연관 관계 표현"과 "중복 없는 값 저장"에 최적화되어 있습니다.Map은 키(key)와 값(value) 쌍으로

HTML 코드를 작성하다 보면 <div> 태그들이 산재하여 코드가 복잡해질 때가 있습니다. 이럴 때 Web Components 기능을 사용하면 여러 개의 태그들을 하나의 커스텀 태그로 축약하여 사용할 수 있습니다. Web Components는 자바스크립트 문법이

복잡한 HTML 구조를 관리하거나 재사용 가능한 컴포넌트를 만들 때, Shadow DOM과 template 태그를 활용하면 코드의 모듈화와 스타일 캡슐화가 가능합니다.Shadow DOM은 브라우저가 기본으로 렌더링하지 않는 숨겨진 DOM 트리입니다.주로 <inpu

ES2020(또는 2021년)부터 사용 가능한 optional chaining과 nullish coalescing operatoroptional chaining (?.) 은 객체의 프로퍼티에 접근할 때, 해당 객체가 null 또는 undefined인 경우 에러를 발생시