본문 바로가기

Frontend/JavaScript11

[JavaScript] DOM 이벤트 이벤트DOM 요소의 기본 동작 중단preventDefault 메서드 이용 go preventDefault 메서드 사용 시 이벤트 전파 방지stopPropagation 메서드 Button 1 Button 2 Button 3 현재 이벤트가 캡처링/버블링 단계에서 더 이상 전파되지 않도록 방지이벤트 핸들러 어트리뷰트 방식 Click me 일반 함수로서 호출되는 함수 내부의 this 는 전역 객체 window를 가리킴 0 0 이벤트 핸들러 프로퍼티 방식과 addEventListener 메서드 방식의 this 는 이벤트를 바인딩한 DOM 요소를 가리킴(이벤트 핸들러 프로퍼티 방식과 동일) .. 2023. 2. 16.
[JavaScript] Set Set중복되지 않는 유일한 값들의 집합요소에 순서가 없다.인덱스로 요소에 접근할 수 없다.Set 객체 생성const set1 = new Set();console.log(set); // Set(0) {}const set2 = new Set([1, 2, 3, 3]);console.log(set); // Set(3) {1, 2, 3}const set3 = new Set('hello');console.log(set); // Set(4) {"h", "e", "l", "o"}//중복 제거const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i);const uniq = array => [ ... new Set(array)];// 두 코드 실행 .. 2023. 2. 16.
[JavaScript] 이터러블 이터러블스프레드 문법하나로 뭉쳐 있는 여러 값들의 집합을 전개하여 개별적인 값들의 목록으로 만드는 것// ... [1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다.(-> 1, 2, 3)console.log(...[1, 2, 3]); // 1 2 3consolg.log(...'Hello'); // H e l l o배열 디스트럭처링 할당(구조 분해 할당)구조화된 배열과 같은 이터러블 또는 객체를 destructuring 하여 1개 이상의 변수에 개별적으로 할당하는것const arr = [1, 2, 3];//1, 2, 3을 각각 one, two, three에 개별적으로 할당const [one, two, three] = arr;console.log(one, two, three); // 1 2 3이터레.. 2023. 2. 16.
[JavaScript] 함수와 일급 객체 일급 객체일급 객체의 조건익명 리터럴을 런타임에 생성 가능변수나 자료구조에 저장 가능//변수const foo = function() { console.log("foo");}const bar = function() { console.log("bar");}foo(); //foobar(); //bar//객체const obj = { foo, bar };console.log(obj); //{ foo: [Function: foo], bar: [Function: bar] }//배열const arr = [foo, bar];console.log(arr[0]); //[Function: foo]3. 함수의 매개변수에 전달 가능function sayHello() { return "Hello, ";}function gree.. 2022. 11. 8.
[JavaScript] 객체 리터럴 객체란?원시 타입 vs 객체 타입원시 타입구성숫자 타입(number)문자열 타입(string)불리언 타입(boolean) → 참, 거짓undefined 타입(undefined) → var 키워드 선언 변수에 암묵적으로 할당되는 값null 타입(null) → 값이 없다는 것을 명시할 때 사용심벌 타입(symbol) → ES6에서 추가변경 불가능한 값객체 타입구성객체(object) → 프로퍼티, 메서드로 구성배열(array)함수(function)변경 가능한 값객체 리터럴에 의한 객체 생성객체 리터럴var person = { name: 'Lee', //프로퍼티 sayHello: function(){ //메서드 console.log(`Hello! My name is ${this.name}); }};consol.. 2022. 11. 8.