불변성(Immutability) : 생성된 데이터가 메모리에서 변경되지 않는다. 가변성(Mutability) : 생성된 데이터가 메모리에서 변경될 수 있다. 원시형(number, string, boolean, undefined, null, symbol)은 불변성을, 참조형(배열, 객체, 함수)은 가변성을 가지고 있다. 이와 같은 결과가 나오게 된 과정을 살펴보자. 8줄 - 객체 데이터가 M1에 저장되고, 그 중 숫자는 M2에 저장된다. 9줄 - b는 a가 참조하고 있는 주소 M1과 같은 주소를 참조한다. 11줄 - M3에 새로운 값이 할당되고 M1이 바라보고 있던 값도 M3로 변경된다. 13줄, 14줄 - a와 b 모두 같은 주소를 참조하고 있기 때문에 같은 값이 출력된다. 16줄 - M4에 새로운 값이..

Symbol // Symbol // 변경이 불가한 데이터 // 변수를 사용해야만 데이터를 조회하게 하여 데이터 보호의 용도로 사용 const sKey = Symbol("Hello"); const user = { key: "일반 정보", [sKey]: "민감한 정보", // 객체에서는 대괄호로 묶어 사용 }; console.log(user.key); // "일반 정보" console.log(user[sKey]); // "민감한 정보" console.log(user[Symbol("Hello")]); // undefined // 심볼은 생성될 때마다 고유의 값을 가지고 있기 때문에 // 같은 내용으로 생성하더라도 별개의 값을 가진다. BigInt // BigInt // 길이 제한이 없는 정수 // 숫자 데이터..

Console count()의 인수를 주지 않으면 default가 이름이 된다. Cookie 도메인 단위로 저장되며 사이트당 최대 20개 및 4KB로 제한된다.(표준안 기준) 영구 저장이 불가능하다. // Cookie // domain: 유효 도메인 설정 // path: 유효 경로 설정 // expires: 만료 날짜(UTC Date) 설정 // max-age: 만료 타이머(s) 설정 document.cookie = "a=3; domain=localhost; path=/abc"; document.cookie = "b=2"; console.log(document.cookie); Storage 도메인 단위로 저장되며 5MB로 제한된다. 세션 혹은 영구 저장이 가능하다. // Storage // session..

⏳ 2023. 5. 22. - 2023. 5. 28. 이벤트 객체 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있다. 버블링과 캡처링 캡처링 단계 : 이벤트가 하위 요소로 전달 타깃 단계 : 이벤트가 실제 타깃 요소로 전달 버블링 단계 : 이벤트가 상위 요소로 전파 이벤트 옵션 const parent = document.querySelector(".parent"); const child = document.querySelector(".child"); // 핸들러를 한 번만 실행 child.addEventListener( "click", () => { console.log("I'm gone"); }, { once: true, } ); // 기본 동작과 핸들러 실행을 분리 parent.addEventL..

⏳ 2023. 5. 22. - 2023. 5. 28. DOM Document Object Model HTML 문서를 객체로 표현하여, JS에서 HTML을 제어할 수 있게 한다. Node vs Element // 노드(Node) : HTML 요소, 텍스트, 주석 등 모든 것을 의미 // 요소(Element) : HTML 요소를 의미 const parentEl = document.querySelector(".parent"); // 자식 노드 확인 console.log(parentEl.childNodes); // 자식 요소 확인 console.log(parentEl.children); 검색과 탐색 const parent = document.querySelector(".parent"); const child1 ..

⏳ 2023. 5. 22. - 2023. 5. 28. 동기(Synchronous)와 비동기(Asynchronous) 동기 : 코드가 순차적으로 실행된다. 비동기 : 코드가 순차적으로 실행되지 않는다. 데이터를 서버에 요청하고 응답을 받아오기까지는 어느 정도의 시간이 필요하다. 그러나 js는 따로 기다리라는 명령이 없다면, 일단 다음 코드로 넘어간다. 응답을 받고, 다음 코드로 넘어가려면 어떻게 코드를 작성해야 하는지 알아보자. 콜백과 콜백 지옥 const a = (callback) => { setTimeout(() => { console.log(1); callback(); }, 1000); }; const b = (callback) => { setTimeout(() => { console.log(2); ..

⏳ 2023. 5. 22. - 2023. 5. 28. 개요 모듈(Module)이란 특정 데이터들의 집합(파일)이다. html에서 script 연결할 때 type="module" 값을 주고, import(가져오기)와 export(내보내기)를 사용할 수 있다. // 기본 내보내기 -> default 키워드는 하나의 모듈에서 한 번만 사용할 수 있다. export default 123; // 가져오기 // 기본 내보내기로 가져온 데이터는 이름을 마음대로 바꿔 사용할 수 있다. import number from "파일경로"; console.log(number); // 123 // 이름 내보내기 export const name = "iam454"; // 가져오기 // 이름 내보내기로 가져온 데이터는 기본적으로 이..

⏳ 2023. 5. 15. - 2023. 5. 21. 화살표 함수 얘네 그냥 익명 함수 쓰기 귀찮아서 쓰는 건줄 알았는데.. 함수를 어떻게 쓰는지에 따라 this의 범위가 달라진다는 새로운 사실! 😱 을 알게 되었다.. 즉시 실행 함수 이거.. 쓰긴 쓰나요..? 콜백 지옥 지금까지는 보통 강의를 한 번만 봐도 이해했다. 그러나 콜백 파트에서 처음으로 강의를 두 번 봤고.. 엥 이런 식으로 코드 짜면.. 코드가 길어지면.. 나중에 이해하기 힘들 것 같은데..? 생각이 들었다. 그렇게 콜백 관련하여 구글링을 참지 못했고 역시나 콜백 지옥 😈 이라는 문제 상황이 이미 있었다. 그것을 해결하기 위한 promise, async, await 등의 개념이 있었는데 7주차 강의에서 이런 내용도 소개해주었으면.. 좋겠다..