TIL/Javascript 6

클로저와 가비지컬렉션 쉽게 이해하기

React 공식 문서를 다시 보기 시작했다.와중에 마주친 익숙하지만 낯선 개념, 클로저  요즘 구글링이나 AI가 워낙 잘 되어있어서 정보성 글을 내가 굳이 정리할 필요가 있을까 싶었는데,내 언어로 내가 이해하면서 정리해보자는 게 뽀인트...  자바스크립트에서 함수 안에 있는 변수는 보통 함수가 끝나면 없어진다. 요걸 가비지 컬렉션이라고 하는데, 사용하지 않는 메모리를 자동으로 정리해주는 로봇청소기라고 생각하면 된다. 클로저 설명하다가 웬 가비지 컬렉션?클로저를 사용하면 함수가 끝난 후에도 그 안의 변수에 접근할 수 있다.로봇청소기(가비지 컬렉터)가 일을 못하게 하는 것! function outer() { let count = 0; // 이 변수는 원래 함수가 끝나면 삭제됨 return func..

TIL/Javascript 2024.11.22

var와 let의 차이 (부제: var를 일괄 let으로 바꾸면 안 되는 이유...)

var를 let으로 일괄 변경했다가 큰 문제가 생겨^^... '아 정말 생각 없이 리팩토링했구나' 반성하며 쓰는 글. 일괄 변경하면 무슨 문제가 있나고요? 저도 알고 싶지 않았습니다... 어떤 문제가 발생하는 지 알기 위해서는 두 가지 방법의 차이점부터 이해해야 한다. 스코프(scope): var는 함수 스코프를 가지고 있어 함수 내에서 선언된 변수는 함수 내에서만 유효하다. let은 블록 스코프를 가지고 있어 블록 내에서 선언된 변수는 해당 블록 내에서만 유효하다. function example() { if (true) { var x = 10; // 함수 스코프 let y = 20; // 블록 스코프 } console.log(x); // 10 console.log(y); // ReferenceError..

TIL/Javascript 2024.02.26

[jQuery] $(document).ready()와 window.onload()의 차이

제이쿼리는 요새 잘 안 쓰는 추세지만 면접 때 퍼블리싱을 하며 제이쿼리를 사용해봤다고 하니 이 질문을 하셨다. 하지만 한 번도 생각지 못한 부분이라 답변하지 못해서 이번 기회에 정리해보고자 한다. $(document).ready 외부 리소스, 이미지와는 상관없이 브라우저가 DOM (document object model) 트리를 생성한 직후 실행 window.load() 보다 더 빠르게 실행되고 중복 사용하여 실행해도 선언한 순서대로 실행됨 빠른 실행 속도가 필요할 때 사용 ready() 메서드는 와 함께 사용하면 안 됨 jQuery 문법 window.onload html의 로딩이 끝난 후 시작 화면에 필요한 모든 요소(css, js, image, iframe, etc ... )들이 웹 브라우저 메모리에..

TIL/Javascript 2023.01.18

[pre-study] Repl.it 오답노트 - object(객체)

🚀 Repl.it 오답 쉬우면서도 어려운 객체...😵 04. 변수를 사용한 객체 속성 접근 📍 Assignment objectVariables 함수를 작성해주세요. 16을 값으로 하는 playerNumber 변수를 선언해주세요. 대괄호를 사용해 testObj의 playerNumber 프로퍼티에 접근하여 player 변수의 값으로 해당 번호의 선수가 올 수 있게 해주세요. 💡 Solution function objectVariables() { // 아래의 코드는 수정하지 마세요. let testObj = { 12: "Namath", 16: "Montana", 19: "Unitas" }; // 아래의 코드를 수정해주세요. let playerNumber = 16; let player = testObj[play..

TIL/Javascript 2022.06.13

[pre-study] Repl.it 오답노트 - for문(반복문)

🚀 Repl.it 오답 for문 자체는 크게 어렵지 않은데 다른 함수나 배열과 함께 쓰게 되면 어려워지는 것 같다. 07. for - getAllLetters 📍 Assignment for문을 사용하여 getAllLetters 함수를 작성하세요. 단어(str 인자)가 주어졌을 때 함수의 리턴값은 주어진 단어를 구성하는 모든 문자를 담고 있는 배열입니다. 만약 빈 문자열이 주어졌다면, 빈 배열을 반환해야 합니다. let output = getAllLetters('Radagast'); console.log(output); // --> ['R', 'a', 'd', 'a', 'g', 'a', 's', 't'] 💡 Solution // Assignment - 다음 함수 안에 코드를 작성하시면 됩니다. functi..

TIL/Javascript 2022.06.12

[pre-study] Repl.it 오답노트 - Array(배열)

🚀 Repl.it 오답 조건문까진 굉장히 스무스하게 풀었으나 배열부터 난이도 상승...😰 07. Array - slice 2 📍 Assignment array 감옥에 갇힌 2를 구해주세요. 단, slice 메서드를 사용해야 하며, slice 메서드 괄호 안에는 음수만 들어갈 수 있습니다. let prisoners = [[0, 1],[1,2],[0,0]]; saveNumberTwo(prisoners) // 2 💡 Solution let prisoners = [[0, 1],[1,2],[0,0]]; function saveNumberTwo(prisoners) { // slice 메서드의 괄호 안에 음수만 넣어주세요 let temp = prisoners.slice(-2) // 변수 answer에 특정한 값을 대..

TIL/Javascript 2022.06.11