본문 바로가기

JavaScript50

[JavaScript] Shallow Copy vs Deep Copy *해당 포스팅은 챗지피티에 검색결과 내용입니다. In JavaScript, shallow copy and deep copy are techniques used to duplicate objects or arrays.1. Shallow Copy: A shallow copy creates a new object or array, but doesn't create copies of nested objects or arrays. It means the new object simply references the original object's properties. Modifying a nested object in the shallow copy will affect the original object, as th.. 2024. 5. 7.
[자바스크립트] async와 defer HTML에서 JavaScript를 연결하는 방법 세가지 용어정리 parsing: 분석하다 fetching: 가져오다 executing: 실행하다 1. 키워드 없이 연결 자바스크립트 파일을 가져오고(fetching) 실행(executing)할때 HTML 분석(parsing)이 일시적으로 멈춘다 head에 자바스크립트 파일을 연결했을때 1) HTML 파일 분석 (parsing) 2) head에 위치한 script 코드를 만남 3) JavaScript 파일 가져옴 (fetching) & HTML 파일분석 일시 중지 4) JavaScript 파일 실행 (executing) & HTML 파일분석 일시 중지 5) 나머지 HTML 파일 분석 (parsing) 6) 페이지 준비완료 문제점: 3번 4번에서 일어나는 Ja.. 2022. 12. 12.
[자바스크립트] 호이스팅(Hoisting)이란? 자바스크립트는 동기적이다 호이스팅이 된 후 부터 코드가 작성한 순서에 맞춰 순차적으로 실행된다 호이스팅(Hoisting)이란? 자바스크립트 코드에 선언된 함수 및 변수 코드가 실제로 이동하지는 않지만 최상단으로 끌어올린 것처럼 동작하는 것을 호이스팅이라고 한다. 스코프 내부 어디서든 변수 선언(var, let, const)은 최상위에 선언된 것 처럼 행동하는 것을 말하며 호이스팅은 스코프 단위로 일어난다. 호이스팅의 대상 var 변수 선언, 함수 선언만 호이스팅이 되며 할당은 호이스팅이 발생하지 않는다 let/const 변수의 선언도 호이스팅이 일어나지만 TDZ(Temporary Dead Zone)에 영향을 받기 때문에 호이스팅이 발생하지 않는것처럼 보인다 let/const 변수 선언과 함수 표현에서는 .. 2022. 11. 22.
[자바스크립트] async & await async & await 비동기 처리방식인 콜백함수와 프로미스의 단점을 보완하기 위해 최근에 나온 자바스크립트의 비동기 처리 문법을 말한다 콜백함수가 여러번 사용되면 콜백 지옥이 발생한다 → 프로미스의 등장 프로미스가 여러번 체이닝(중첩)이 되면 콜백 지옥과 같은 문제점이 발생한다 → async & await을 사용해서 마치 동기적으로 코드가 진행되는 것처럼 사용 함수 앞에 async라는 키워드를 붙여주면 함수 블럭 안에 있는 코드가 자동으로 프로미스를 사용하는 것처럼 변환이 되어진다 async라는 키워드가 붙은 함수내에서만 await을 사용할 수 있다 기본문법 async function 함수명() { await 비동기처리메서드명(); } 비동기로 처리하고 싶은 함수 앞에 async라는 예약어를 붙인다 .. 2022. 11. 20.
[자바스크립트] 프로미스 (프로미스 체이닝, 프로미스 에러 핸들링) 프로미스(Promise)란? 비동기처리에서 흔하게 사용되는 콜백함수는 여러번 중첩될 경우 콜백지옥의 문제점이 생긴다. 프로미스는 콜백을 대신해 비동기 처리에 사용하는 객체다. 예제 새로운 프로미스가 생성될때 (new Promise) 프로미스 안에 있는 콜백함수가 바로 실행된다. const promise = new Promise((resolve, reject) => { // 비동기적으로 실행하고 싶은 코드를 작성 // doing some heavy work (network, read files) console.log('doing something...') }) 프로미스의 2가지 결과값 (성공과 실패) 성공: 정해진 시간에 수행했을 경우 → 성공의 메시지와 함께 처리된 결과값을 전달 실패: 예상치 못한 문제.. 2022. 11. 18.
[자바스크립트] 콜백함수와 콜백지옥 콜백함수(callback function) 콜백함수란 함수의 파라미터로 함수를 넘겨주고 이를 내부에서 호출하는 것 함수가 다른 함수의 입력값(argument)로 전달되서 다른 함수에 의해서 나중에 호출된다 function greeting() { console.log('hello'); } function func(cb) { // 함수 func가 다른 함수 greeting을 파라미터로 받는다 cb(); // 해당 함수 func 내부에서 호출한다 } func(greeting); 콜백의 두가지 종류 1. 동기적 콜백 동기적인 콜백함수인 () => console.log("sync callback") 는 순차적으로 실행된다 function printImmediately(print){ print(); } printI.. 2022. 11. 18.
[자바스크립트] 동기적 코드와 비동기적 코드 동기적 코드와 비동기적 코드 동기적(Synchronous) 코드 어떤 작업을 요청했을 때 그 작업이 종료될 때까지 기다린 후 다음 작업을 수행하는 방식 (순차적 코드 진행) 요청을 보낸 후 응답 (결과물)을 받아야지만 다음 코드가 동작된다 모든 일은 순차적으로 실행되며 어떤 작업이 수행중이라면 다음 작업은 대기하게 된다 장점: 코드가 순차적으로 실행되므로 설계가 간단하고 직관적이다 단점: 요청에 대한 결과가 나올때까지 다음코드는 대기해야한다 // 동기적인 코드 (순차적으로 실행되는 코드) console.log(1); // 1번째 console.log(2); // 2번째 console.log(3); // 3번째 비동기적(Asynchronous) 코드 언제 코드가 실행될지 예측할수 없는것 (비순차적 코드 진.. 2022. 11. 18.
[자바스크립트] 이벤트 관리 방법 (버블링, 캡쳐링, 이벤트 위임) 이벤트란? 웹 브라우저나 사용자가 행하는 어떤 동작 사용자와 웹페이지가 상호 작용을 하며 브라우저가 감지하는 것 i.e.) 웹 문서에서 키보드의 키를 누르는 것, 브라우저가 웹 페이지를 불러오는 것 * 이벤트 리스너 / 이벤트 핸들러: 어떤 이벤트 발생 시 처리하는 함수 이벤트의 종류 마우스 이벤트: 마우스에서 버튼이나 휠 버튼을 조작할 때 발생하는 이벤트 키보드 이벤트: 키보드에서 특정 키를 조작할 때 발생하는 이벤트 문서 로딩 이벤트: 서버에서 웹문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여줄 때 발생하는 이벤트 폼 이벤트: 폼 요소에 내용을 입력하면서 발생할 수 있는 이벤트 이벤트 등록 방법 3가지 1. 인라인 방식 (Inline) 이벤트를 HTML 요소의 속성으로 .. 2022. 11. 18.
[자바스크립트] 자바스크립트에서 this란? this란? 자바스크립트에서 키워드 this는 해당 오브젝트를 가리킨다 전역공간 → window 일반 함수 호출시 → window 화살표 함수 호출시 → 상위 스코프 함수가 strict mode일때 → undefined 메소드 호출시 → 메소드를 부른 오브젝트 call, apply, bind → call, apply, bind는 함수의 메소드로서 this를 첫번째 아규먼트와 바꿔치기한다 (함수의 호출방식과 관계없이 this를 지정할 수 있다) 콜백 호출시 → 경우에 따라 다르다 일반적인 함수 호출일때: this는 전역객체 함수 메소드 call, apply, bind를 사용할 경우: this는 바꿔치기 됨 생성자 함수 호출시 → 해당 인스턴스 this의 특징 코드가 작성될때는 this가 어떤값인지 모른다 .. 2022. 11. 18.
[자바스크립트] 객체 구조분해할당시 key 이름 다시 지정해주기 user 객체 안에 있는 데이터 emailAddress를 email로 paymentStatus를 status로 구조분해할당을 하면서 동시에 key 이름을 변경하였다. const user = { name: 'maple', emailAddress: 'maple@gmail.com', paymentStatus: false } const { emailAddress: email, paymentStatus: status } = user; console.log(email, status) 2022. 8. 10.
[자바스크립트] 이벤트 총정리 (이벤트 종류, 이벤트 핸들러와 리스너, 버블링과 캡처링을 이용한 이벤트 위임) 이벤트란? 사용자나 브라우저가 자바스크립트를 사용해서 HTML 페이지(정확히 말하면 DOM)를 조작하는 것 이벤트는 사용자의 액션에 의해 발생한다 (마우스 클릭, 키보드 누르기, 페이지 불러오기 등) 이벤트가 발생하면 함수에 연결되며 해당 함수는 이벤트가 발생되면 실행된다 이벤트는 웹문서 영역 안에서 이루어지는 동작만을 의미한다 이벤트 종류 1. 페이지 로딩 이벤트 속성 설명 load 페이지의 로딩이 끝났을때 이벤트 발생 unload 현재 페이지에서 다른 페이지로 이동할때 이벤트 발생 resize 페이지 크기가 변경되었을때 이벤트 발생 scroll 페이지 화면이 스크롤 되었을때 이벤트 발생 abort 페이지 로딩이 중간에 중단되었을때 이벤트 발생 2. 마우스 이벤트 속성 설명 click 요소에 마우스를 .. 2022. 8. 9.
[자바스크립트] 동기와 비동기란? 비동기적 코드 callback, promise, async와 await 사용법 동기 방식과 비동기 방식 코드를 실행할때 순차적으로 또는 비순차적으로 실행하냐에 따라 동기적 비동기적으로 나뉜다. 1. 동기적 처리(Synchronous) 위에서 아래로 코드가 순서대로 실행이 되는 것을 동기적 처리라고 한다. 즉 지금 진행하는 작업이 끝이나면 다른 작업으로 넘어가고 그 작업이 끝이 나면 다른 작업으로 넘어가는 방식이 동기적 처리 방식이라고 한다. 2. 비동기적 처리(Asynchronous) 비동기적 처리 작업은 순서대로 진행하는 것이 아니라 한번에 여러개가 진행되는 것과 마찬가지다. 비동기적 처리는 주로 api요청, 파일읽기, 암호화, 복호화 등에서 자주 사용된다. 비동기적 처리를 사용하는데 주로 사용되는 방식으로는 1. callback 함수 2. promise 객체 3. async/a.. 2022. 8. 8.
[자바스크립트] Lodash를 사용해서 배열 안에 같은 value를 가진 객체 데이터 삭제해주기 (데이터 고유화 작업) Lodash 설치 npm install lodash Lodash 패키지에서 uniqBy import하기 import _uniqBy from 'lodash/uniqBy' 사용법 https://lodash.com/docs/4.17.15#uniqBy Lodash Documentation _(value) source Creates a lodash object which wraps value to enable implicit method chain sequences. Methods that operate on and return arrays, collections, and functions can be chained together. Methods that retrieve a single value or may .. 2022. 8. 7.
[자바스크립트/한줄정리] 화살표 함수 생략 방법 화살표 함수 생략 전 export default createRouter({ scrollBehavior: () => { return { top: 0, } }, }) 화살표 함수 생략 후 return { }이 생략되고 리턴되는 객체데이터를 소괄호( )로 감싸주었다 export default createRouter({ scrollBehavior: () => ({ top: 0 }) }) 2022. 7. 8.
[자바스크립트] addEventListener의 두번째 인자로 왜 함수 실행이 아닌 함수 자체를 가질까? addEventListener의 두번째 인자로 왜 함수 실행이 아닌 함수 자체를 가질까? addEventListener는 두번째 인자로 어떤 이벤트가 발생했을때 실행할 함수를 가진다. (이벤트가 동작한 후에 실행할 함수를 인자로 가짐) ❌ 틀린 코드 1. addEventListener의 두번째 인자에 함수 호출을 가지게 될 경우: 이벤트가 발생했을때 함수가 실행되어 리턴값을 addEventListener의 두번째 인자값으로 가지게 된다. window.addEventListener('click', offEditMode()); ✅ 올바른 코드 2. addEventListener의 두번째 인자에 콜백 함수 안에 함수 호출 or 함수 자체를 가지게 될 경우: 콜백함수안에 원하는 함수를 호출하거나 함수자체를 인자.. 2022. 6. 23.
[JavaScript] 팩토리 함수란? 참조형 데이터(객체, 배열, 함수)를 리턴하는 함수 참고 Vue.js에서 data함수도 객체를 반환하므로 팩토리함수다 2022. 6. 20.
[자바스크립트/한줄정리] 이벤트 버블링과 이벤트 캡처링 이벤트 버블링 이벤트가 상위 요소로 전파(자식 → 부모) 자식 요소를 선택했을때 부모 요소에 있는 이벤트가 모두 실행되는 현상 이벤트 캡처링 이벤트가 하위 요소로 전파 (부모 → 자식) 이벤트를 특정 상위요소에서 하위요소로 전파시켜 주는 현상 2022. 6. 15.
[자바스크립트] 프로토타입(prototype) 정리 프로토타입이란? 기존의 객체를 상속받아 새로운 객체를 생성하는 방식 객체의 원형 즉 상속받은 부모객체를 말한다 프로토타입의 이해 1) 자바스크립트는 프로토타입을 기반으로 하는 프로그래밍 언어이다 (Java는 클래스 기반 객체지향 프로그래밍 언어) 2) 자바스크립트에서는 객체를 프로토타입이라는 방식(기존 객체에서 프로퍼티, 메서드를 상속받는 방식)으로 생성한다 3) 프로토타입을 이해한다면 자바스크립트의 동작 원리를 이해할 수 있다 4) 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다 5) 연결된 부모 객체에서 프로퍼티, 메서드를 상속받을 수 있다 6) 부모 객체를 프로토타입 객체 줄여서 프로토타입이라고 한다 예제 amy라는 객체 2개의 프로퍼티: firstName, lastNa.. 2022. 5. 28.
[자바스크립트] Date.now() 메서드로 유니크한 id값 만들어주기 Date 객체에 있는 now() 메서드는 현재시간을 밀리세컨즈 형태로 리턴해준다. 리턴된 밀리세컨즈를 문자열로 변환해 유니크한 id값을 만들어 줄 수 있다. 예시 function createList(name) { return { id: Date.now().toString(), name: name, tasks: [] }; } 2022. 5. 27.
[자바스크립트] 타이머 함수 정리 (setTimeout, setInterval, clearTimeout, clearInterval) 1. setTimeout(함수, 시간) 일정 시간 후 함수 실행 첫번째 인자: 실행할 함수 두번째 인자: 해당 시간 후 첫번째 인자로 받은 함수를 실행 (밀리세컨즈로 표기) 예제 3초후에 console창에 maple이라는 문자열을 표시한다 setTimeout(() => { console.log(‘maple’) }, 3000) 2. setInterval(함수, 시간) 시간 간격마다 함수 실행 첫번째 인자: 실행할 함수 두번째 인자: 해당 시간 간격마다 첫번째 인자로 받은 함수를 실행 (밀리세컨즈로 표기) 예제 3초마다 console창에 maple이라는 문자열을 표시한다 setInterval(() => { console.log(‘maple’) }, 3000) 3. clearTimeout(timeoutID) .. 2022. 5. 27.

티스토리툴바