본문 바로가기

전체 글226

[23] 전개 연산자(Spread Operator) 전개 연산자란?전개 연산자는 배열이나 객체의 내용을 풀어서(spread) 다른 배열이나 객체에 복사하거나 값을 결합할 때 사용됩니다.배열의 요소, 객체의 속성을 쉽게 복사하거나 병합할 수 있는 유용한 문법입니다.전개 연산자는 ... 형태로 작성 (1) 배열에서의 전개 연산자1.1 배열 결합기존 배열을 합칠 때, concat() 대신 전개 연산자를 사용하면 더 간결하게 작성할 수 있습니다.const arr1 = [1, 2, 3];const arr2 = [4, 5, 6];const arr3 = [7, 8, 9];// 기존 방식 (concat 사용)const arrWrap = arr1.concat(arr2, arr3);console.log(arrWrap); // [1, 2, 3, 4, 5, 6, 7, 8, 9.. 2024. 11. 27.
[22] 구조 분해 할당 (Destructuring) 구조 분해 할당(Destructuring)구조 분해 할당은 ES6에서 도입된 문법으로, 배열이나 객체의 속성을 간단히 추출하여 개별 변수에 할당할 수 있게 해줍니다. 이를 통해 코드가 간결해지고 읽기 쉬워지며, 클린 코드를 작성할 수 있습니다. 1. 기본 개념배열 구조 분해 할당: 배열의 요소를 개별 변수에 쉽게 할당.객체 구조 분해 할당: 객체의 속성을 개별 변수에 쉽게 할당.  예제 1: 기본 객체 할당예제에서는 unicorn 객체가 있고, 이 객체의 속성(accessory, animal, color)을 각각 변수로 추출합니다.const unicorn = { accessory: 'horn', animal: 'horse', color: 'purple',};const { accessory, anim.. 2024. 11. 27.
[21] Closure 클로저란?클로저(Closure)는 함수 내부에 정의된 함수(inner function)가 외부 함수(outer function)의 변수 및 스코프에 접근할 수 있는 개념을 말합니다. 외부 함수가 실행을 종료하고, 해당 변수가 더 이상 외부에서 접근할 수 없는 상황에서도 내부 함수는 외부 함수의 변수에 접근할 수 있습니다.핵심 개념:외부 함수가 실행을 종료해도 내부 함수는 외부 함수의 스코프를 "기억"합니다.클로저는 자바스크립트에서 스코프와 실행 컨텍스트의 특징을 활용한 개념입니다.  위 사진의 코드 동작 자세히 설명outerFunction('outside') 실행:outerVariable에 'outside'가 할당됩니다.outerFunction은 내부 함수 innerFunction을 반환합니다.반환된 i.. 2024. 11. 26.
[20] Event Loop 1,2,3을 출력하려고 한다.3000은 3초이다.-> 1 출력 후 3초후에 2가 출력됨. 동기와 비동기를 알아보자.       내부 진행되는 모습을 보여주는 사이트에 가보기http://latentflip.com/loupe/?code=JC5vbignYnV0dG9uJywgJ2NsaWNrJywgZnVuY3Rpb24gb25DbGljaygpIHsKICAgIHNldFRpbWVvdXQoZnVuY3Rpb24gdGltZXIoKSB7CiAgICAgICAgY29uc29sZS5sb2coJ1lvdSBjbGlja2VkIHRoZSBidXR0b24hJyk7ICAgIAogICAgfSwgMjAwMCk7Cn0pOwoKY29uc29sZS5sb2coIkhpISIpOwoKc2V0VGltZW91dChmdW5jdGlvbiB0aW1lb3V0KCkg.. 2024. 11. 26.
[19] 조건부 삼항 연산자 2024. 11. 26.
[18] bind, call, apply 이거를 window객체 말고 다른 객체를 참고하고 싶을 때 사용하는 것이 bind, call, apply 메소드이다.  call()메소드와 apply()메소드 차이는 apply()에는 인수 부분을 배열로 넣어줘야함 !  bind() 작동 화면 2024. 11. 26.
[17] 자바스크립트 this 키워드 this 키워드의 기본적인 동작 (Method vs Function)객체의 메서드에서 this:this는 메서드가 호출된 객체를 가리킵니다.예: audio.play()에서 this는 audio 객체를 참조합니다.출력 결과: {title: 'a', play: f}일반 함수에서 this:함수가 독립적으로 호출되면 this는 전역 객체(window 또는 Node.js 환경에서는 global)를 참조합니다.예: playAudio()에서 this는 window를 참조합니다.출력 결과: Window 객체.  생성자 함수에서 this생성자 함수:new 키워드로 호출되는 생성자 함수는 새로운 객체를 생성하며, 그 객체를 this가 참조합니다.예: new Audio('a') 호출 시 this는 {title: 'a'}를 .. 2024. 11. 26.
[16] Event Delegation 버튼 2개만 있을 시 2024. 11. 26.
[15] Event Capturing 실습 영상 2024. 11. 26.
[14] Event Bubbling 위로 이벤트가 전달되는거는 '버블'이라고 한다.  실습 영상 실습 영상1실습영상 2 2024. 11. 26.
[13] Event 종류 위 코드 실행 화면 2024. 11. 25.
[12] Event Listener & Event 객체 2024. 11. 25.

티스토리툴바