본문 바로가기

Frontend/JS

[JS] 클로저를 이용한 정보 은닉 구현(클로저, 렉시컬 스코프 개념)
Frontend/JS 2023. 1. 6. [JS] 클로저를 이용한 정보 은닉 구현(클로저, 렉시컬 스코프 개념) 일급 객체를 공부하다 보니 렉시컬 스코프, 클로저에 대한 궁금증이 생겨 이에 대해 공부한 기록이다. Lexical Scope 렉시컬 스코프는 말 그대로 어휘의 범위이다. 변수가 사용 가능한 범위를 알기 위해 어디에서 선언되었는지 고려하는 것을 의미한다. JS는 선언자에 따라 다른 렉시컬 스코프를 가진다. var 전통적인 JS에는 함수 스코프와 전역 스코프 두 가지만 존재했다. var 선언자는 선언된 위치에 따라 다른 스코프를 가진다. 함수 내부 : 함수 스코프 함수 외부 : 전역 스코프 함수 외부에서 전역 스코프를 가지기 때문에 아래와 같은 문제가 발생할 수 있다. if (Math.random() > 0.5) { var x = 1; } else { var x = 2; } console.log(x); x는..
[JS] Javascript 일급 객체(First Class Object, First Class Function)
Frontend/JS 2023. 1. 5. [JS] Javascript 일급 객체(First Class Object, First Class Function) 함수를 변수에 할당하는 등의 작업이 함수가 일급 객체이기 때문이라는 것을 알고 일급 객체에 대한 공부한 기록이다. 일급 객체 JS에서 일급 객체는 아래의 3가지의 조건을 만족해야 한다. 변수에 할당할 수 있다. 함수의 인자로 전달할 수 있다. 함수의 결과로서 반환될 수 있다. 굳이 예제를 보지 않아도 이해할 수 있는 조건이다. 일급 객체의 조건을 보면 함수 또한 일급 객체라는 것을 알 수 있다. 일급 객체의 특성을 가지면서 함수가 구현할 수 있는 기능은 아래와 같다. 고차함수를 만들 수 있다. 콜백함수를 사용할 수 있다. 일급 객체의 조건을 하나씩 함수에 적용시켜 보자. 변수 할당 const foo = function(){ console.log("foobar"); }; foo(); //foobar 위의 ..
[JS] 로컬스토리 사용법(Set, Get, Remove, JSON)
Frontend/JS 2022. 7. 20. [JS] 로컬스토리 사용법(Set, Get, Remove, JSON) 로컬스토리지가 왜 필요할까? 변수나 리스트와 같은 일시적인 저장소와 달리 로컬스토리지는 영구적으로 데이터를 저장할 수 있다. import "./styles.css"; const nameForm = document.getElementById("nameForm"); const nameText = document.getElementById("nameText"); const greeting = document.getElementById("greeting"); const HIDDEN_KEY = "hidden"; const handleSubmit = (event) => { event.preventDefault(); const userName = nameText.value; greeting.innerText = us..
[JS] 자바스크립트에 CSS 적용하기/classList/toggle
Frontend/JS 2022. 7. 8. [JS] 자바스크립트에 CSS 적용하기/classList/toggle 가져온 Element를 이용해 해당 Element의 스타일을 바꾸는 방법을 포스팅하려고 한다. Hello const title=document.querySelector('.title'); 먼저 querySelector( )을 이용해 HTML 파일에서 div Element를 가져온다. Element 객체를 이용해 값을 바꾸는 방법 element 객체의 내부를 보면, 객체 내부에 style 값이 있는 것을 확인할 수 있다. 이를 이용하면 간단하게 바꿀 수 있다. const title=document.querySelector('.title'); title.style.color='blue'; style값을 이용해 element 내부 text 값을 간단하게 파란색으로 바꿨다. 하지만 자바스크립트는 동적인 부분을 ..

티스토리툴바