본문 바로가기

javascript10

[React] 불변성을 유지하며 객체 변경하기 react 하면 불변성입니다. 코드를 짤 때 '불변성을 지켜야 한다' 라는 말을 많이 들어봤을 거에요. 불변성이 왜 중요할까요? 1. 원본 데이터의 보존이전 자바스크립트의 원시 값과 객체에 대해 정리할 때, 객체를 할당한 변수는 주소를 저장한다고 노트했습니다. (참고 : https://pearjam.tistory.com/7?category=535826) 즉, 주소를 저장하기에 해당 객체의 수정이 일어나면 그 객체를 참조하던 변수들은 고스란히 변경된 값을 반영하고, 알 수 없는 에러가 발생할 수 있습니다.예시const mathClassStudents = ['Kim', 'Lee'] //수학 수업을 듣는 학생 명단const englishClassStudents = mathClassStudents //영어 수업.. 2022. 9. 28.
[JavaScript] This : binding 중심 this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기 참조 변수다. this를 통해 자신이 속한 객체, 또는 자신이 생성할 인스턴스의 property나 method를 참조할 수 있다. JS의 this는 함수가 호출되는 방식에 따라 this의 바인딩이 동적으로 결정된다. 호출 방식 this 바인딩 예제 해설 일반 함수 호출 global object가 바인딩 전역 객체 window를 가리킨다 메서드 호출 method를 호출한 객체 method를 호출한 객체 obj 생성자 함수 호출 생성자 함수가 생성할 인스턴스 생성자 함수가 생성한 인스턴스 prototype의 apply/call/bind method에 의한 간접 호출 첫 번째 인수로 전달한 객체 인수에 의해 결정 예제 const foo .. 2022. 2. 24.
[JavaScript] Wrapper Object 모던 자바스크립트 Deep Dive 21장을 읽으며 정리한다. 문자열이나 숫자, 불리언 등의 원시값이 있는데도 불구하고, String, Number 등의 표준 빌트인 생성자 함수가 존재하는 이유는? 궁금했던 질문이기에 웅장하게 인용해봤다. 또, 평소 아무렇지 않게 사용했던 문자열 관련 property와 method... 생각해보면 객체처럼 동작하고 있지 않은가? 원시값은 객체가 아닌데? const str = 'Fruit'; console.log(str.length); // property처럼 생겼다!? console.log(str.toUpperCase()); //FRUIT, method처럼 생겼다?! 되돌아보니까 정말 object처럼 쓰고 있었다! 왜 이게 되는 걸까? → 원시 값을 객체처럼 사용하면, .. 2022. 2. 23.
[JavaScript] Prototype Chain/직접 상속 모던 자바스크립트 Deep dive 19장. 나중에 읽어볼 기회가 있다면 꼭 그림을 같이 보며 확인하자. 프로토타입 체인 자바스크립트는 객체의 property/method에 접근하려고 할 때 해당 객체에 접근하려는 property가 있는지 체크한다. 만약 없다면, [[ prototype ]] 내부 슬롯의 참조를 따라 자신의 부모 역할을 하는 prototype의 property를 순차적으로 검색한다. 이를 prototype chain이라고 한다 → JS가 객체지향 프로그래밍의 상속을 구현하는 매커니즘 end of prototype chain : 프로토타입 체인의 최상위에 위치하는 객체는 언제나 Object.prototype다. 따라서 모든 객체는 Object.prototype를 상속받는다. Object.p.. 2022. 2. 17.