자바스크립트 (34) 썸네일형 리스트형 자바스크립트 : 연산자 연산자란, 연산을 하는데 사용하는 기호입니다.그럼, 연산이란? 주어진 식을 계산하고, 결과를 얻어내는 과정입니다.즉 연산자란, 변수에 대한 식을 계산하고, 결과를 얻어내는데 사용하는 기호입니다. 연산자의 종류연산자는 크게 대입연산자, 증감연산자, 산술연산자, 논리연산자, 전개연산자로 구분됩니다. 대입연산자대입연산자란, 특정 변수에 값을 대입시키는 연산자입니다.할당연산자라고도 하며, = 를 사용합니다.let a = 5;const name = 'tadigrada'; 증감연산자변수의 값을 증가시키거나 감소시키는 데 사용합니다.++ , -- 로 표현합니다.let number = 1;console.log(number++); // 출력 후 1 증가 = 1console.log(++number); // 1 증가.. JavaScript 비동기(2) - 콜백 콜백 활용function timer(callback) { setTimeout(()=>{ console.log(1) callback() // 받아온 callback함수를 여기서 실행 },2000)}timer(()=>{ console.log('Hello World')})timer(()=>{ console.log('안녕하세요')})timer(()=>{ console.log('[ERROR] 403 Forbidden')}) - 비동기 작업 도중에 콜백 함수를 사용할 수 있습니다. - callback 매개변수로 다른 함수를 받아와서 비동기함수 내 원하는 부분에서 실행시킬 수 있습니다. - 특정한 비동기 함수 틀에 여러가지 바리에이션을 적용할 수 있습니다.. JavaScript 비동기(1) - 개요 동기와 비동기동기 (Synchronous) console.log(1)alert('확인 전까지 이후 출력이 되지 않습니다')console.log(2)console.log(3)console.time('Loop')for(let i=0;i - 하나의 작업이 끝나기 전에는 다음 작업이 시작되지 않습니다. > 대표적인 동기 작업 : alert() 비동기(Asynchronous) console.log(1)setTimeout(()=>{ console.log('timeout!')},10000) // 10초후 작동console.log(2)console.time('Loop')setTimeout(()=>{ for(let i=0;i - 특정 작업이 끝나기 전에 다른 작업을 진행할 수 있습니다.. JavaScript 클래스 클래스( class )란?const neo = { name:'Neo', age: 22, getBirthYear(){ const year=new Date().getFullYear() return year-this.age }} - 변수와 메서드를 정의하여 모아놓은 하나의 틀입니다. 클래스의 활용class User { constructor(name,age){ this.name = name this.age = age } getBirthYear = function(){ const year = new Date().getFullYear() return year-this.age }}const .. JavaScript 모듈 모듈화란 - 각각의 기능을 하는 함수들의 집합 파일을 모듈이라고 합니다. - 많은 기능을 추가하여 길어진 코드를 각각의 기능을 가진 모듈로 분리하여 합치는것을 모듈화라고 합니다. 가져오기 (import)calculator.js main.jsimport {add,sub} from './calculator.js'console.log(add(1,3))console.log(sub(4,1)) index.html - import {가져오고자 하는 요소} from '경로' 의 형식으로 경로 모듈의 요소를 가져올 수 있습니다. - import * from '경로' 의 형식으로 경로 모듈에 존재하는 모든 값을 가져올 수 있습니다. - html에 연결된 main 스크립트에 type = 'module.. JavaScript - 선택적 체이닝(Optional chaining) 선택적 체이닝( optional chaining : 옵셔널 체이닝 ) 이란?console.log(null.abc) // 에러 발생console.log(undefined.abc) // 에러 발생// 위의 코드를 변경하여 옵셔녈 체이닝 사용console.log(null?.abc) // undefined 출력console.log(undefined?.abc) // undefined 출력const numbers = nullconsole.log(numbers?.[0])const user = { name: 'Neo', age: 22,}console.log(user.name)console.log(user.age)console.log(user?.email) - 대괄호 또는 점 표기법의 대상이 null이.. JavaScript 구조 분해 할당 구조 분해 할당 - 배열데이터와 객체 데이터를 각자의 데이터로 분해하여 할당시키는 방법입니다. - 데이터의 순서를 변경하거나, 일부만 추출할 때 사용합니다. 배열구조 분해할당const numbers = [1,2,3]let a = numbers[0]let b = numbers[1]let c = numbers[2]console.log(a,b,c) // 1,2,3let d,e,f[d,e,f] = numbersconsole.log(d,e,f) // 1,2,3let g,h,i[h,i,g] = numbersconsole.log(g,h,i) // 3,1,2const numbers2 = [,,5]let [x=2,y,z] = numbers2con.. JavaScript 이벤트 - 이벤트 전파 이벤트 버블링 const parentEl = document.querySelector('.parent') const childEl = document.querySelector('.child') const anchorEl = document.querySelector('a') window.addEventListener('click', ()=>{ console.log('Window') }) document.documentElement.addEventListener('click', ()=>{ console.log('HTML') }) document.body.addEventListener('click', ()=>{ console.log('Body') }) parentEl.addEventListener('click.. 이전 1 2 3 4 5 다음 목록 더보기
