우리가 많이 다루는 이벤트에 대해 확실하게 정리한 글입니다. 1. 이벤트란 ? 자바스크립트 안의 이벤트는 클릭, 스크롤 내리기 등 사용자와 웹페이지가 상호작용을 하며 브라우저가 감지하는 것. * 이벤트 리스너, 이벤트 핸들러를 통해 처리 함. ex) click, contextmenu, keydown, keyup, submit 등... 2. 등록 방법 - 인라인(inline) : 이벤트를 HTML요소로 직접 지정하는 방식. -> 유지 보수에 좋지 못함. Plz Click! - 프로퍼티(Property) : 선택자를 이용함. -> 인라인 방식의 단점은 보완하지만, 한 번에 하나의 이벤트만 가능함. click - addEventListener() : 1개 이상의 이벤트가 가능하고, IE9이상 동작함. clic..

목표 타입스크립트에서 사용되고 있는 기본 타입에 대해 정리하고, 이해하는 것 불리언 (Boolean) 가장 기본적인 데이터 타입으로 참/거짓 값을 나타낸다. 활용 예시) let isComeIn: boolean = false; // 기숙사 입소 여부 확인 변수 숫자 (Number) 모든 숫자 값에 쓸 수 있는 타입으로 10진수, 16진수, 2진수, 8진수 다 가능함 활용예시) let personCount: number = 0; // 사람 숫자 세는 변수 let crc: number = 0xffff; // crc 기본 값 초기화(16진수) let binary: number = 0b1010; // 2진수 let octal: number = 0o725; // 8진수 문자열 (String) 텍스트 데이터를 다룰 ..

자바스크립트에서 배열은 굉장히 많이 사용되는 자료구조이다. 자바스크립트 배열은 다양한 메서드를 제공하고 이는 굉장히 유용하게 쓰인다. (특히 코딩테스트 풀때...) 배열 메서드가 결과물을 반환하는 패턴 원본 배열을 직접 변경하는 메서드 원본 배열 : 배열 메서드를 호출한 배열, 즉 배열 메서드의 구현체 내부에서 this가 가리키는 객체 원본 배열을 직접 변경하지 않고 새로운 배열을 생성해 반환하는 메서드 const arr = [1]; // push 메서드는 원본 배열(arr)을 직접 변경한다. arr.push(2); console.log(arr); // [1, 2] // concat 메서드는 원본 배열(arr)을 직접 변경하지 않고 새로운 배열을 생성하여 반환한다. const result = arr.co..

배열(Array) 여러 개의 값을 순차적으로 나열한 자료구조 특징 사용 빈도가 높은 기본적인 자료구조 유용한 메서드 다수 제공 용어 정리 with 예시 const arr = ['apple', 'banana', 'orange']; 요소 : 배열이 가지고 있는 값 모든 값은 배열의 요소가 될 수 있다. ex. 'apple', 'banana', 'orange' 인덱스 : 배열에서 자신의 위치를 나타내는 0이상의 정수 배열 요소에 접근할 때 사용 ex. arr[0] = 'apple' 생성 방법 배열 리터럴 Array 생성자 함수 Array.of, Array.from 메서드로 생성 배열 vs 객체 구분 객체 배열 구조 프로퍼티 키, 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 *값의 순서 X O *l..

일급 객체 우리는 다음과 같은 조건을 만족하는 객체를 일급객체라고 한다. 무명의 리터럴로 생성할 수 있다. 즉, 런타입에 생성이 가능하다. 변수나 자료구조(객체, 배열) 등에 저장할 수 있다. 함수의 매개변수에 전달 할 수 있다. 함수의 반환값으로 사용할 수 있다. // 1. 함수는 무명의 리터럴로 샐성할 수 있다. // 2. 함수는 변수에 저장 할 수 있다. // 런타입(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const inc = function (num) { return ++num; }; const dec = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다. const auxs = { inc, dec }; //..

Object 생성자 함수 new 연산자와 함께 object 생성자 함수를 호출하면 빈 객체를 생성해 반환함. 빈 객체는 생성 이후 프로퍼티 또는 메서드를 추가해 완성할 수 있다. // 빈 객체의 생성 const person = new Object(); // 프로퍼티 추가 person.name = "Sim Mi Jin"; person.sayHello = function () { console.log(`Hi my name is ${this.name}`); }; console.log(person); // {name: "Sim Mi Jin", sayHello: ƒ ()} person.sayHello(); // Hi my name is Sim Mi Jin 그런데 .. 생성자 함수가 뭐죠 .. ? new 연산자와 ..

내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript사양에서 사용하는 의사 프로퍼티와 의사 메서드. 형태 : [[...]] (이중 대괄호로 감싸져있음) 개발자가 직접 접근할 수 없음. 간접적으로 접근이 가능함 // 16-1 const o = {}; // 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근 불가능 o.[[Prototype]] // SyntaxError: Unexpected token '[' // 단, 일부 내부 슬롯과 내부 메서드에 한해 간접적으로 접근할 수 있는 수단을 제공하긴 함. o.__proto__; // Object.prototype 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼..

var 키워드로 선언한 변수의 문제점 var 키워드로 선언된 변수의 특징 - 변수 중복 선언 허용 // 15-1 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 변수 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var티눠드가 없는 것 처럼 동작함 var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); console.log(y); 에러 발생하지 않음 의도치 않게 먼저 선언된 변수 값이 변경되는 부작용이 발생 var 키워드로 선언된 변수의 특징 - 함수 레벨 스코프 함수 블록만을 지역 스코프로 인정 // 15-2 var x = 1; if (true) { // x는 전역 변수...

전역 변수의 무분별한 사용은 여러 문제점이 있기때문에 위험하다. 변수의 생명주기 지역 변수의 생명주기 변수의 생명주기 : 변수가 생성되고 소멸되는 주기 // 14-1 // 지역 변수의 생명주기 // 없다면 ..? // 한 번 선언된 변수는 프로그램이 종료되지 않는 한 영원히 메모리 공간을 점유하게 된다. // 전역 변수의 생명주기 === 애플리케이션의 생명주기 function foo() { var x = "local"; console.log(x); return x; } foo(); // local console.log(x); // Uncaught ReferenceError: x is not defined 일반적 : 함수가 종료되면 함수가 생성한 스코프도 소멸 // 14-2 // 지역 변수의 생명주기 //..

스코프란 ? 스코프 : 유효 범위 // 13-1 function add(x, y) { // 매개 변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코는 함수 몸체 내부. console.log(x, y); return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y); // Uncaught ReferenceError: x is not defined // 13-2 // 스코프 : 모든 식별자(변수, 함수, 클래스 이름 등) 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참소할 수 있는 유효 범위 // -> 식별자가 유효한 범위 var v1 = 1; if (true) { var v2 = 2; if (true) ..