Language/JavaScript13 클로저 | Closures 클로저 | Closures [index] 1. 클로저란? 2. 실행컨텍스트 관정에서 본 클로저 3. 클로저의 활용 사례 4. 클로저와 관련된 문제점 5. 결론 1. 클로저(closures)란? 1-1. 클로저에 대한 정의 클로저는 자신이 생성될 때의 렉시컬 환경(Lexical environment)을 기억하는 함수 함수와 그 함수가 선언되었을 때의 렉시컬 환경(어휘적 환경)의 조합이다. 선언되었을 때란, 내부 함수가 선언되었을 때를 지칭한다. 주변 상태(어휘적 환경)에 대한 참조나 함께 묶인(포함된) 함수의 조합을 의미한다. MDN 에서의 클로저의 정의는 다음과 같다. A closure is the combination of a function enclosed with references to its s.. 2023. 10. 17. JS/ 로그인 버튼 활성화 / addEventListener "keyup"이 아닌 "input" 사용해야 하는 이유 유효성 검사를 통해 조건 충족 시 로그인 버튼이 활성화 되는 기능 구현중, input에 유저의 액션이 있을 때 유효성 검사를 하도록 하는데 addEventListener를 사용했다. 기존에는 addEventListener("keyup")을 사용했었는데, keyup이 아닌 input을 사용하는게 더 적합하다는 것을 알게 되었다. keyup이 아닌 input을 사용해야 하는 이유 우선 지금 구현하고자 하는 기능에 대한 세부적인 조건에 대해 먼저 명시하자면, (무조건적으로 keyup이 틀리고 input이 맞는 것은 아니다.) HTML JS function loginForm (x) { return document.getElementsByClassName(x)[0] } loginForm("loginId").add.. 2023. 4. 13. JavaScript /querySelectorAll와 addEventListener 함께 사용하기 querySelectorAll와 addEventListener 함께 사용하기 querySelectorAll은 배열로 요소를 출력하기 때문에 addEventListener와 함께 쓰면 오류가 발생합니다. (querySelector는 오류가 발생하지 않고 querySelectorAll만 발생합니다.) 이때는 반복문을 이용해서 각 배열안의 요소를 지정해주면 됩니다. 아래는 반복문을 이용한 예시입니다. (예시 코드는 네비게이션 드롭메뉴 효과를 만들기 위해 작성한 코드를 가져왔습니다.) const Menu = document.querySelectorAll(".mian"); const subMenu = document.querySelectorAll(".sub"); for (let i = 0; i < Menu.len.. 2022. 7. 23. JavaScript / button 스크롤 높이 따라 사라지고 나타나도록 하기 자바스크립트로 스크롤 높이에 반응하는 버튼 만들기 완성 모습 HTML 코드 설명 우선 aside 하위로 버튼들을 묶어주었다. 로 버튼을 만든 이유 : 반원 모양으로 버튼을 크게 만들기 위해서 div태그를 사용했다. 태그로 버튼을 눌렀을 때 이동하고자 하는 위치 또는 링크를 지정한다. 태그는 구글 icon소스 링크이다. class name "material-symbols-outlined"은 icon 기본 style 셋팅값이다. CSS 코드설명 _visible이 붙은 class이름으로 스타일을 만든다. (js에서 추가될 class로 이름은 명시적인 것이면 어떤 이름도 괜찮다.) {backgorund-color} 까지는 원하는 스타일(버튼디자인) {position : fixed} : 버튼이 브라우저 화면 상에.. 2022. 6. 26. JavaScript / 스코프(Scope)란? 스코프란?스코프의 종류전역변수와 지역변수를 구분할 수 있다.블록 레벨 스코프와 함수 레벨 스코프를 구분할 수 있다.전역변수와 지역변수가 중복 선언된 경우 실행되는 우선순위를 이해했다.스코프 체인(scope chain)이란?스코프(Scope)란?스코프는 변수가 영향을 미치는 범위, 혹은 변수의 유효범위에 대한 규칙이다.식별자가 자신이 어디에서 선언됐는지에 의해 자신이 유효한 범위를 갖는다.스코프는 이러한 참조 대상 식별자를 찾아내는 규칙이다.더보기참조 대상 식별자(identifier, 변수, 함수의 이름과 같이 어떤 대상을 다른 대상과 구분하여 식별할 수 있는 유일한 이름)모든 변수는 스코프를 갖는다.스코프의 종류전역스코프(Global Scope)코드 어디에서든지 참조가 가능하다.전역변수는 어디서든 참조할.. 2022. 6. 22. JavaScript / undefined 와 null undefined 와 null의 차이undefined 와 null 각자의 쓰임에 대해undefined의 사용을 지양한다는 것을 서치를 통해 알게 되었다.null 또한 여러 오류를 유발하여 되도록 사용을 지양한다는 것도 알게 되었다. 이미 너무 널리 사용되어 이제와서 null를 사용하지 못하게 하면 여러가지 문제들이 발생해서 공식적으로는 사용이 제한되지 않았다.실무에서 null을 사용해야하는 경우는?undefined 와 nullundefined이란?한줄 설명 : 변수를 선언하고 값을 할당하지 않은 경우. 상세설명undefined는 변수를 선언하고 어떠한 값도 할당하지 않아서 자료형이 정해지지않은 상태. 값이 없는 empty 상태.유지보수와 디버깅에 어려움이 있어서 최신 브라우저에서는 ECMAScr.. 2022. 6. 22. Javascript 반복문 while문 반복문 while 문while 문과 do / while 문의 차이를 이해while 문을 이용해 홀수 값만 더하거나, 짝수 값만 따로 계산 할 수 있다.무한루프가 무엇인지 알게되었다. 반복문(iteration statements)반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문입니다.프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나입니다.while문이란?특정 조건을 만족할 때까지 실행문을 반복해서 실행.조건식이 true인 동안 계속해서 주어진 실행문을 반복.while 문은 우선 표현식이 참(true)인지를 판단하여 참이면 내부의 실행문을 실행 표현식이 참인지 판단 → 내부의 실행문을 전부 실행 → 다시 표현식으로 .. 2022. 5. 19. Javascript 반복문 for문 조건문 for 문 이해하기 아직 for /in 과 for/ of는 완벽히 이해를 못했다.반복문(iteration statements)반복문이란 프로그램 내에서 똑같은 명령을 일정 횟수만큼 반복하여 수행하도록 제어하는 실행문입니다.프로그램이 처리하는 대부분의 코드는 반복적인 형태가 많으므로, 가장 많이 사용되는 실행문 중 하나입니다.for문이란?for 문은 초기식, 표현식, 증감식을 모두 포함하고 있다.while 문을 보다 더 간결하게 표현할 수 있다.주로 반복 횟수가 정해진 경우에 사용된다.게시판 목록, 공지사항 목록 출력할 때메뉴를 만들고 메뉴 항목을 출력할 때갤러리를 만들고 이미지를 출력할 때 1. 단일 for 문for(초기식; 조건식; 증감식){ 조건식의 결과가 참인 동안 반복할 실행문;}단일 f.. 2022. 5. 19. Javascript 조건문 if 조건문 if 문 이해하기if 문과 else if 문이 쓰이는 방식if문을 활용해 특정 조건에 해당하는 결과값을 출력할 수 있다. 들어가기전에제어문(control flow statements)프로그램의 순차적인 흐름을 제어해야 할 때 사용하는 실행문조건문반복문조건문(conditional statements)조건문이란 프로그램 내에서 주어진 표현식의 결과에 따라 별도의 명령을 수행하도록 제어하는 실행문.if문은 조건문 중에서 가장 기본이 되는 실행문if 문if / else 문if / else if / else 문switch 문조건문 if란?1. if 문조건에 따라서 코드를 실행하거나 실행하지 않을 때 사용한다.if(조건식){ 조건식 결과가 참일때 실행할 문장;} 2. if / else 문else 문은 .. 2022. 5. 19. 이전 1 2 다음
