[JavaScript] - 호이스팅(Hoisting)
·
개발/JavaScript
호이스팅(Hoisting)은 개발을 해본 사람은 꼭 한번 들어봤을 개념인데,알고 있는 내용이지만 개념을 재 정립할겸, 그리고 다양한 상황에서 호이스팅이 어떻게 되는지 정리하고자 한다. 호이스팅(Hoisting)MDN 문서에 호이스팅은 이렇게 정의하고 있다인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상설명만 보면 잘 이해가 되지 않을 것인데 일단 JavaScript의 구동 원리부터 알아볼 필요가 있다.JavaScript는 실행이 되기 전에 실행 가능한 코드를 형상화하고 구분하는 과정(컴파일)을 거치는데이때 모든 선언문 (var, let, const, function, class)을 스코프에 등록한다.그래서 코드..
[JavaScript] - Event Bubbling & Capturing
·
개발/JavaScript
웹 개발에 대해 기초부터 다시 차근차근히 쌓아간다는 생각으로 (면접 준비할겸)알아야하는 것들을 찾아보고 기록하려고 한다. 1. Event Bubbling- 한 요소에 이벤트(ex. 클릭, 입력 등)가 발생할 때, 해당 요소부터 부모 요소까지 이벤트가 전파되는 현상 말로는 이해하기 어려울 수 있지만 한번 예시를 보면서 이야기해보자See the Pen Untitled by 오지훈 (@qgmsycay-the-decoder) on CodePen.여기에서 depth3 을 누르면 depth3 -> depth2 -> depth1 에 할당된 함수(handler)가 작동되는 것을 볼 수 있는데 이를 거품이 올라오는 것과 비슷하여 Bubbling이라고 이름을 붙였다고 한다. 이를 왜 알아야되나 싶었는데, 실제 예시를 생..
[JavaScript] - for, while 반복문
·
개발/JavaScript
js 에는 파이썬과는 다르게 다양한 반복문이 존재한다.for, for in, for of, forEach(array), while, do while이렇게 많은 for문들을 어떻게 언제 쓰이면 좋은지에 대해서 서술해보려고 한다. 1. forfor ([초기문], [조건문], [증감문]) { 문장}// 사용예시for (let i = 0; i  추가적으로 알면 좋은 것1. 초기문, 조건문, 증감문 모두 생략 가능하다.2. 조건문이 거짓이 될 때까지 반복한다.3. [] 을 사용할 수 있지만 조건문에서 사용한다면 무한 루프가 돌 수 있다. && 를 활용해 표현하는 것이 좋다.(배열은 항상 truthy 하기 때문에 라는데 이건 나중에 정리) 2. for in열거 가능한 객체에서 사용가능한 반복문이다.배열에서도 ..
[JavaScript] - sort 함수
·
개발/JavaScript
Sort() 함수배열을 오름차순으로 아니면 원하는 함수를 넣어서 요구에 맞게 정렬을 할 수 있는 함수이다.알고리즘을 풀면서 조금 여럿 알아낸 것이 있어서 기록하려고 한다! sort() 함수는 기본적으로 문자열을 정렬하는 함수let strs = ["a", "y", "t"];strs.sort(); // [ 'a', 't', 'y' ] 문자열을 정렬하는 함수 이기 때문에 다양한 상황이 발생하는데, 제일 많이 발생하는 건 역시 숫자로 된 배열을 정렬할 때 이다.let numbers = [5, 20, -10];numbers.sort() // [ -10, 20, 5 ]// !! 정렬이 안됨 왜 이런 현상이 발생할까? 알아보니 sort() 함수는 아까부터 강조 했듯이 문자열을 정렬하는 함수이다.그렇기 때문에 숫자 배..
[JavaScript] - 전개 구문
·
개발/JavaScript
알고리즘을 계속 풀다보니까 이제 배열에서 조작하는 것을 하게 되었는데 그중에 전개 연산자가 좀 잘 쓰이고 다양한 곳에 쓰이는 것 같아서 정리해보려고 한다. 그리고 다중 입력 받는 법에 대해서도 적어보려고 한다. 파이썬이랑은 개념이 좀 다른 부분이 많은 것 같다. 전개 구문전개 구문 : 객체 혹은 배열을 펼칠 수 있게 한다. (ES6 부터 적용)배열 또는 객체 앞에 점 세 개 (...) 를 붙임으로써 사용 가능하다.const obj = {name : 'jihun', age : 12}// 펼칠 대상이 객체인 경우{...obj} // { name: 'jihun', age: 12 }// 펼칠 대상이 배열인 경우const arr = [1,2,3][...arr] // [ 1, 2, 3 ]// 혹은{...arr} /..
[JavaScript] - 연산자 ==, ===
·
개발/JavaScript
알고리즘을 계속 풀다보니까==과 === 연산자가 있는데 둘의 차이점에 대해서 잊어버려서 조사를 해봤는데생각보다 더 알아야하는 내용이 많은 것 같아서이렇게 글로 저장하려고 한다. '==' (Equal Operator), '===' (Strict Equal Operator)둘의 가장 큰 차이점== 는 둘이 같은 지를 확인하는데 Data Type 에 상관없이 값이 같은 지를 확인한다.=== 는 Data Type 까지 즉, 값과 타입 까지 모두 같은지를 확인한다. console.log(1 == 1); // trueconsole.log(1 == "1"); // trueconsole.log(1 === "1"); // falseconsole.log(1 === 1); // true  이제 여기서 알아야 하는 내용 그러..
[JavaScript] - 입력 받기 (fs, readline)
·
개발/JavaScript
파이썬이 아닌 다른 언어로도 코딩테스트를 볼 필요성을 느껴, front-end 니까 java 보다는 JavaScript로 코테를 준비하기로 했다. 개발할 때도 너무 chatGPT에 의존도가 높아서 그것 또한 줄이기 위함이다. 일석이조! 기본적인 것은 사실 안다고 가정하고, 제가 알아야하는 것, 기록할만한 것들을 복습하면서 올릴 예정이다.[입력 받기]방법이 2가지 정도 있는 것 같은 데 fs 나 readline 으로 입력받는 방법이다.둘다 알면 좋을 것 같아서 정리 해보려고 한다.1  : fs 입력받기fs를 통해 입력를 받는 식이다.const fs = require("fs");input = fs.readFileSync(0).toString();input = Number(input) 알아야 할 것은 read..