본문 바로가기
반응형

Front-end/Javascript7

[Javascript] 이벤트 처리 방법 onClick vs EventListener 차이점 Button을 클릭 후, 실행할 함수를 정의하기 위해선 onClick 혹은 eventListener로 함수를 정의할 수 있다. 그러면 다음 두가지의 차이점을 무엇일까? onClick의 경우는 하나의 콜백만 지정할 수 있으나, EventListener의 경우에는 여러 개의 콜백을 지정할 수 있다. onClick onClick 이벤트 핸들러를 두번 사용하게 되면 가장 나중에 선언한 이벤트 핸들러가 작동하게 된다. var btn = document.getElementById('btn'); btn.onclick = function() { alert('onclick-1'); } btn.onclick = function() { alert('onclick-2'); } 즉, 다음 코드를 실행할 경우, alert 창에 .. 2022. 4. 3.
[Javascript] 배열에서 특정 값 찾기 배열 속 값 탐색하기 indexOf let arr1 = ['apple', 'banana', 'peach', 'tomato']; console.log(arr1.indexOf('banana')); // 결과값: 2 console.log(arr1.indexOf('lemon')); // 결과값: -1 indexOf 메서드는 배열 안에서 특정 문자열에 해당하는 위치를 찾을 수 있다. 일치하면 값이 배열 속 문자열이 존재하는 위치를 나타내며, 일치하지 않으면 -1이 결과값으로 나타난다. find // 배열일 경우 const array = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; // callback(element, index, array) array.find(v => v > 5); // 6 fin.. 2022. 3. 31.
[Javascript] Callback, Promise, Async await 차이점과 사용법 Callback, Promise, Async await를 살펴보기에 앞서... 자바스크립트 엔진은 코드를 동기적으로 실행하기 때문에, 코드 중간에 엄청난 로직의 함수를 실행한다면 병목 현상이 생길 것이다. 그래서 사용하는 것이 비동기 함수다. Callback 매개변수를 변수가 아닌 함수로 받는 함수 function callbackFun(inputFun) { console.log('매개변수 받는 함수'); inputFun(); } function inputFun(){ console.log('매개변수 함수'); } Promise 비동기 작업을 처리하는 함수 const promise1 = new Promise((resolve, reject) => { resolve(); }); promise1 .then(() .. 2022. 3. 19.
[Javascript] 자바스크립트 class 기초 Class 생성 'use strict' // 1. Class declarations class Person() { // constructor constructor(name, age) { this.name = name; this.age = age; } // method speak() { console.log(`${this.name}: hello!`); } } const ellie = new Persion('ellie', 27); console.log(ellie.name); Getter and Setter class User { constructor(firstName, lastName, age) { this.firstName = firstName; this.lastName = lastName; this.ag.. 2021. 8. 3.
[Javascript] 자바스크립트 Function 기초 지식 (함수 선언, 표현, Callback, Arrow) [Function Declaration] Default parameters (ES6에서 추가됨) // 예시: parameter를 제대로 입력하지 않았을 경우 function showMessage(message, from = 'unknown') { console.log(`${message} by ${from}`); } showMessage('Hi!'); parameter 값을 제대로 모두 입력하지 않아도 함수의 parameter에 값을 할당해준다면, 에러가 나지 않고 해당 parameter 값에 default value가 들어가게 된다. Rest Parameters function printAll(...args) { // 배열 형태 쓰는 방법 1) for (let i = 0; i < args.length;.. 2021. 8. 3.
[Javascript] 자바스크립트 데이터 타입 및 주의해야할 사항 데이터 타입 * primitive: 더 이상 작아질 수 없는 한 가지 단위 (single item) * object: single item을 묶어서 한 박스로 관리할 수 있게 해준다. 오브젝트는 메모리에 탑재될 때, reference 형태로 저장된다. const ellie1 = { name: 'ellie' }; const ellie2 = { name: 'ellie' }; const ellie3 = ellie1; console.log(ellie1 == ellie2); // 다른 레퍼런스에 저장되어 있기 때문에 false console.log(ellie1 === ellie2);// 똑같은 타입이던 아니던 레퍼런스 값이 다르기 때문에 false console.log(ellie1 === ellie3); // t.. 2021. 8. 3.

티스토리툴바