죽이죽이

데이터 정렬 방법 ※ Number - string 타입으로 변환 후 비교를 한다. // 숫자가 10 미만일때는 정상적으로 정렬이 된다. const numberList1 = [5, 7, 2, 4]; console.log(numberList1.sort()); // [2, 4, 5, 7] // 숫자가 10이 넘어가면서부터 원하는 방향과 다르게 정렬이 된다. const numberList2 = [5, 10, 1, 7]; console.log(numberList2.sort()); // [1, 10, 5, 7] // sort 함수 내부에서 비교함수를 사용해서 비교할 경우 정상적으로 정렬이 된다. // 비교함수에서 a값은 앞에 값, b값은 뒤에 값을 가리킨다. console.log(numberList2.sort((a..

이벤트 버블링이란? ※ 이벤트 버블링이란? - 이벤트가 발생한 하위 요소에서 시작해 상위 요소로 전파되는 단계이다. - 하위 요소를 감싸는 모든 상위 요소는 해당 이벤트를 감지할 수 있다. ※ 예시 - addEventListener의 3번째 인자로 아무값도 넣어주지 않을 경우 default 값은 버블링이다. Child ※ id="third" 요소 클릭 - third 요소에서 시작해서 이벤트가 상위 요소로 전파된다. (third => second => first => parent 순서) 이벤트 캡처링이란? ※ 이벤트 캡처링이란? - 이벤트가 최상위 요소에서 시작해 하위 요소로 전파되는 단계이다. ※ 예시 - addEventListener의 3번째 인자로 true 값을 넣어줄 경우 이벤트 캡처링이 일어난다...

클로저란? ※ 정의 - 클로저는 함수와 그 함수가 선언되었을때의 렉시컬 환경의 조합으로, 내부 함수를 사용해 외부 함수의 범위에 접근을 할 수 있게 하는 기능을 제공한다. - 이런 기능을 사용해 전역 변수의 남용을 막을 수 있고 특정 변수의 값을 은닉하는 용도로도 사용할 수 있다. ※ 사용 방법 function outerFunction() { // 외부 함수의 지역 변수 let outerVariable = 10; // 내부 함수 (클로저) function innerFunction() { // 외부 함수의 변수에 접근 console.log(outerVariable); } // 내부 함수 반환 return innerFunction; } // outerFunction을 호출하고 반환된 함수를 변수에 할당 le..

일급 함수란? ※ 정의 - 프로그래밍 언어는 해당 언어의 함수들이 다른 변수처럼 다루어질 때 일급 함수를 가진다고 한다. - 예를 들어, 일급 함수를 가진 언어에서 함수는 다른 함수들에 전달인자로 제공되고, 다른 함수에 의해 반환될 수 있으며, 변수에 값으로서 할당될 수 있다. ※ 변수에 함수 할당 const fullName = () => { console.log("Daniel Son"); }; fullName(); // 변수를 사용해 호출 ※ 함수에 인자로 전달 function firstName() { return "Daniel"; } function lastName(firstName, lastName) { console.log(firstName() + lastName); } lastName(first..

스프레드(...) 연산자 ※ 배열 스프레드 연산자 // 배열 합치기 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const combinedArray = [...arr1, ...arr2]; console.log(combinedArray); // [1, 2, 3, 4, 5, 6] // 배열 얕은 복사 const originalArray1 = [1, 2, 3]; const copiedArray = [...originalArray1]; console.log(copiedArray); // [1, 2, 3] // 새로운 요소 추가 const originalArray2 = [1, 2, 3]; const newArray = [...originalArray2, 4]; consol..

this의 용법 ※ this란? - 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수이다. - 실행컨텍스트가 활성화 되었을 때 this의 바인딩이 일어나며, 함수 호출 방식에 의해 동적으로 결정이 된다. ※ 암시적 this 바인딩 정리 - 전역 상태 : 브라우저(window) / NodeJS({}) - 함수 선언식, 함수 표현식 : 브라우저(window) / NodeJS(global) - 화살표 함수 : 브라우저(window) / NodeJS({}) - 엄격 모드 + 전역 상태 : 브라우저(window) / NodeJS({}) - 엄격 모드 + 함수 선언식, 함수 표현식 : 브라우저(undefined) / NodeJS(undefined) - 엄격 모드 + 화살표 함수 : 브라우저(..

스코프란? - 어떠한 변수나 함수가 선언된 공간 또는 환경이다. - 특정 변수나 함수의 스코프는 해당 변수, 함수를 참조할 수 있는 범위를 뜻한다. 스코프 체이닝이란? - 스코프 체이닝은 코드에서 변수나 함수를 찾을 때 현재 스코프에서 시작하여 해당 변수 또는 함수를 찾을 때까지 상위 스코프로 이동하는 과정을 뜻한다. // name은 전역 스코프이기 때문에 어디에서든지 접근이 가능하다. const name = "daniel"; const firstFunction = () => { // human은 함수 스코프로 함수 내부에서 접근이 가능하다. const human = true; if(human) { // var로 선언된 변수는 함수 스코프로 if문 안에 있지만 호이스팅으로 인해 firstFunction ..

자바스크립트 언어의 특징 컴파일러 vs 인터프리터 ※ 컴파일러 - 전체 코드가 한 번에 머신 코드로 실행 - 바이너리 파일로 쓰여짐 - 컴파일 이후에 실행 가능 ※ 인터프리터 - 한 줄씩 소스 코드를 읽으면서 실행 - 컴파일러에 비해 속도가 느림 - 변경 사항을 빠르게 테스트 가능 자바스크립트는 어떤 언어일까? ※ 인터프리터 + 컴파일러(JIT 컴파일) - 자바스크립트는 인터프리터 언어였지만, V8 엔진이 나온 이후로 성능 최적화를 위해 컴파일도 같이 진행을 한다. ※ JIT 컴파일이란? (wikipedia 참고) - 컴퓨터 프로그램을 만드는 방법은 두 가지가 있는데, 인터프리트 방식과 정적 컴파일 방식으로 나눌 수 있다. - 이 중 인터프리트 방식은 실행 중 프로그래밍 언어를 읽어가면서 해당 기능에 대..