그린티_

JavaScript에서 this는 함수가 호출되는 방식에 따라 달라진다고 볼 수 있음"누가" 호출했느냐에 따라 달라지며, 객체/전역/콜백/화살표 함수/클래스 등에서 전부 다르게 바인딩될 수 있음 1️⃣ this 바인딩의 기본 개념this는 "현재 실행 중인 함수가 속한 객체"를 참조하는 키워드실행 방식에 따라 this 값이 달라짐!전역에서 (strict mode X)window (globalThis in Node.js)객체의 메서드해당 객체일반 함수 호출window (strict mode에서는 undefined)bind(), call(), apply() 사용지정한 객체로 변경화살표 함수 (=>)상위 스코프의 this를 유지2️⃣ this 바인딩 예제(1) 전역 실행console.log(this); // ..

선택자 box box2 1 2 3 4 5 6 7 이런식으로 const boxEl에 선택자 요소를 넣어준다는 뜻요소 선택자querySelector('.box')CSS에서 배웠던 선택자를 사용하여 HTML을 선택하는 방법문서에서 만나는 제일 첫 번째 요소를 반환함getElementById(“ID”)해당 ID를 가지는 요소를 불러오는 메서드querySelectorAll(“요소선택자“)선택자와 일치하는 모든 요소를 찾아 배열로 리턴해주는 메서드이벤트onclick각각의 HTML 요소에 속성 값으로 JS 함수를 연결 클릭 addEventListener(이벤트, 명령)클릭 🔹 1. 마우스(Mouse) 이벤트click요소를 클릭할 때 발생dblclick..

배열에서 사용const arr1 = [1, 2, 3];const arr2 = [...arr1, 4, 5];console.log(arr2); // [1, 2, 3, 4, 5]arr1을 그대로 복사하면서 [4, 5]를 추가한 새로운 배열을 만들어 줌1. 함수에서 가변 인자로 사용함수에 여러 개의 인자를 전달할 때 ...을 사용하면 편해.function sum(...numbers) { return numbers.reduce((acc, num) => acc + num, 0);}console.log(sum(1, 2, 3, 4, 5)); // 15sum(1, 2, 3, 4, 5)에서 전달된 모든 숫자가 numbers 배열로 변환됨2. 배열 복사 (spread)배열을 새로운 변수에 복사할 때도 사용돼.const..

진짜 이거 처음에 쓸 때는 너무 어떻게 슬지 매번 찾아보고 썼는데.. 확실히 손에 익히면 금방 편안해짐!map()은 배열의 각 요소를 변환하여 새로운 배열을 반환하는 함수for문 대신 사용 가능하지만, 기존 배열을 변경하지 않고 새로운 배열을 생성함!const numbers = [1, 2, 3, 4, 5];const squared = numbers.map(num => num * num);console.log(squared); // [1, 4, 9, 16, 25] 1. for문과 map() 비교for문을 사용한 경우:const arr = [1, 2, 3, 4, 5];const newArr = [];for (let i = 0; i map()을 사용하면 이렇게 더 간결해진 답니당!const newArr = a..

1. let, const – 블록 스코프 변수 선언let과 const는 ES6에서 도입된 변수 선언 키워드var와 달리 블록 스코프(중괄호 {} 기준)를 따르며, 재선언이 불가함let은 값 재할당이 가능하고, const는 상수로 재할당이 불가능!이 내용은 전에 javascript 1 블로그에도 썼었음!let count = 1;count = 2; // 가능const name = "보성";// name = "유진"; // ❌ 오류: const는 재할당 불가 -> 이런식으로 한번 더 하는거 안됨!2. 화살표 함수 – 간결한 함수 표현function 키워드 없이 간단하게 함수를 정의할 수 있음this의 바인딩 방식이 기존 함수와 다르며, 상위 스코프의 this를 그대로 사용함const add = (a, b) =..

동기(Synchronous) vs 비동기(Asynchronous)동기와 비동기는 작업이 실행되는 방식의 차이- 쉽게 말하면 "순서대로 실행되는가, 동시에 실행되는가"의 차이! 동기(Synchronous)- 한 작업이 끝나야 다음 작업이 실행됨- 순차적으로 실행되기 때문에 코드의 실행 흐름을 예상하기 쉬움- 하지만 작업 시간이 오래 걸리면 전체 프로그램이 멈춤(= 블로킹 발생) 예제: 동기 코드console.log("A 작업 시작");console.log("B 작업 실행");console.log("C 작업 실행");console.log("D 작업 완료");실행 순서:A 작업 시작B 작업 실행C 작업 실행D 작업 완료- 위에서 아래로 차례대로 실행됨동기의 문제점만약 네트워크 요청이나 파일 읽기 같은 시간이..

4.1 배열 (Array)let fruits = ["Apple", "Banana", "Cherry"];console.log(fruits[0]); // Appleconsole.log(fruits.length); // 3// 배열 추가 & 삭제fruits.push("Orange"); // 끝에 추가fruits.pop(); // 끝에서 삭제fruits.unshift("Grapes"); // 앞에 추가fruits.shift(); // 앞에서 삭제4.1-1 split 활용const string = 'apple';const strArr = string.split('');const strArr2 = [...string];console.log(strArr); //[ 'a', 'p', 'p', 'l', 'e' ]cons..

3.1 함수 선언익명 함수function() {}이름이 없다는 것! 변수에 할당해서 사용let 함수 = function(){ alert('hi');}이런식으로 사용일반 함수function add(a, b) { return a + b;}console.log(add(2, 3)); // 5식별 우선 순위결과는 ‘함수_A’ 변수에 선언한게 먼저 식별됨. 하지만 이렇게 선언하는 것은 좋은 코드가 아님매개 변수javascript는 함수의 매개변수의 갯수를 신경안씀f(); f(3,4,5); 도 실행은 됨f()는 undefined값이 들어감 f(3,4,5) 같은 경우엔 4,5 는 짤리고 3만 인식 됨3.2 화살표 함수 (ES6)const add = (a, b) => a + b;console.log(add(2, 3..

짤 ㅋㅋㅋㅋㅋㅋㅋㅋㅋ.. 레전드그니까 js는 문자열 더해버리면 더하기가 되긴한는데 4가 아니라 22가 되버림 ㅋㅋㅋ 2.1 if-else 문let num = 10;if (num > 0) { console.log("양수");} else if (num 2.2 switch 문let day = 2;switch (day) { case 1: console.log("월요일"); break; case 2: console.log("화요일"); break; default: console.log("기타 요일");}2.3 반복문for문for (let i = 0; i 추가 예시 (for in과 for of)for in요소의 인덱스 값을 가져옴또..

# JavaScript 혼자 공부하면서 끄적끄적## 정의 - 자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어 - 웹의 동작을 구현## 특징 - 자바스크립트는 객체 기반의 스크립트 언어 - 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어 - 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현## 자바 VS 자바스크립트 1. 목적과 사용 분야 - 자바: 자바는 범용 프로그래밍 언어로, 주로 엔터프라이즈 소프트웨어 개발이나 안드로이드 애플리케이션 개발에 사용됨. 서버 애플리케이션, 모바일 애플리케이션, 게임 등 다양한 분야에서 활용됨. - 자바스크립트: 자바스크립트는 웹 페이지에서 동적인 기능을 구현하기 위해 사용되는 스..