본문 바로가기

반응형

분류 전체보기

(366)
[javascript] this(2) - this 바인딩의 강제 설정 보호되어 있는 글입니다.
[javascript] 배열과 객체의 구조분해할당 구조분해할당 구조분해 할당은 배열이나 객체의 각 구성 요소 및 프로퍼티를 주어진 변수에 나눠서 할당하는 방법이다. 즉, 주어진 자료구조를 분해해서 새로운 변수에 할당하는 방식이다. 여기서 오해하면 안 되는 것은 구조분해할당은 기존의 변수나 객체의 값을 복사하여 새로운 변수에 할당하는 것이지 기존 변수나 객체를 삭제하는 것이 아니다. 그래서 구조분해할당을 한 이후에도 기존 데이터는 그대로 사용이 가능하다. 구조분해할당은 배열과 객체 모두에서 가능하지만, 조금 차이가 있다. 우선 배열의 경우에는 요소가 새로운 변수에 할당되는 순서가 정해져 있는 반면에, 새롭게 할당하려고 하는 변수의 이름은 마음대로 지어도 되지만, 객체의 경우에는 할당하고자 하는 변수의 이름이 객체 내의 프로퍼티 키의 이름과 동일해야 한다...
[javascript] getAttribute 와 setAttribute 그리고 classList.add... element . getAttribute (요소가 가진 속성명) 이 메서드는 접근한 요소가 가진 속성이 저장하고 있는 값을 가져온다. 글로 쓰면 이해가 어렵기 때문에 코드로 정리해보면 다음과 같다. //js const ball = document.querySelector('.ball') ball.getAttribute('class') //-> div 태그가 가진 속성인 class가 가진 값인 'ball'을 가져온다. ㄴ요소(element) //출력결과) ball 다시 정리해서 말하면, getAttribute는 지정한 요소가 가진 속성이 가진 값을 가져오는 메서드 이다. element . setAttribute (요소가 가진 속성명, 그 속성에 추가할 값) 이 메서드는 요소가 가진 속성에 기존 값을 버리고..
[react]리액트 페이지네이션 만들 때 참고용 보호되어 있는 글입니다.
[javascript] this 는 호출하는 방식에 따라 가리키는 대상이 달라진다. this... this.. this.. 자바스크립트에서 this는 함수를 호출하는 방식에 따라서 가리키는 대상 혹은 값이 달라진다. 대표적으로 일반함수(function), 생성자 함수, 메서드 3 가지 방식에 따라 나뉜다. 오늘은 이 3가지 방식을 구분해서 정리해보고, 다음 시간에는 this 가 가리키는 대상을 강제적으로 어떻게 바꿀 수 있는가에 대해서도 정리할 것이다. 일반 함수에서의 this 여기서 말하는 일반함수는 흔히 자주 쓰이는 function(){ } 을 말한다. 일반함수에서 this 는 언제나 전역 객체를 가리키는데, 전역 객체는 자바스크립트에서 최상위 객체를 의미한다. (참고) 전역 객체 자바스크립트의 대부분은 객체로 구성되어 있다. 그 객체를 모두 포괄하는 최상위 객체를 전역 객체라고 한..
[react] 리액트 환경에서 <input type =range> 사용 시 Uncaught TypeError: Cannot read properties of null (reading 'value') 가 뜬다면 아래와 같이 range의 속성값을 useState 에 저장하여 , 버튼을 조작하려는 상황에서 const [rangeVal,setRangeVal] = useState('') return ( { console.log(e.currentTarget.value); setRangeVal((rangeVal) => {return rangeVal = e.currentTarget.value}); }}> ) 에러와 함께, 백지와 같은 페이지를 만나게 된다면 sortbyDate.tsx:22 Uncaught TypeError: Cannot read properties of null (reading 'value') 다음과 같이 click 이벤트를 실행할 함수를 외부에 정의하면 에러가 해결된다. onClick 의 콜백함수 내에서 ..
[javascript] 함수의 매개변수 디폴트(기본) 값은 바꿀 수 있다. 함수는 일반적으로 다음과 같은 형태를 가진다. function myFun(매개변수1, 매개변수2){ //코드 } 즉, 함수의 식별자인 myFun의 ( ) 내 인자로는 매개변수를 가질 수 있고, 할당된 매개변수는 함수 스코프 내부에서 선언 및 할당된 변수의 역할을 수행한다. 또한 함수의 매개변수에 아무런 값을 전달하지 않으면, 기본적으로 undefined 가 할당되기 때문에 어찌 보면 undefined가 함수 매개변수의 기본값이라고 할 수 있다. ㅁ 매개변수에 아무런 값을 전달하지 않은 경우 function myFun(a,b){ console.log(a,b) } //함수 호출 myFun() //출력결과) 이것을 통해서 a,b 에는 undefined가 할당된 것을 확인할 수 있다. undefined unde..
[javascript] (함수)스코프와 스코프 체인? 스코프(scope)가 뭐시여?? 자바스크립트는 기본적으로 변수를 어느 부분에 정의 하느냐에 따라서 변수가 접근이 가능한 지점을 결정한다. 전역에 변수를 선언하면, 그 변수는 어느 곳에서든 참조할 수 있지만, 만일 함수 내부나 for문과 같은 반복문, if문과 같은 조건문의 { } 내부에 변수를 선언하게 되면, 그 이외의 지역에서는 해당 변수를 참조하거나 접근할 수 없게 된다. 이렇듯, 자바스크립트에는 변수가 접근하거나 혹은 변수 자체에 접근할 수 있는 유효한 범위가 존재하며, 이를 유효 범위 혹은 스코프라고 한다. 이를 더 쉽게 말하면, '한계(리미트)' 라고 보면 될 것 같다. 전역 스코프와 지역 스코프 다음과 같이 접근하면 과연 i 는 출력이 될까? (참고로 함수를 둘러싼 { } 까지를 함수 스코프라..

반응형