Web/JavaScript (15) 썸네일형 리스트형 JavaScript, Prototype 상속과 .__proto__ 개발을 하면 기존 기능을 확장해야하는 경우가 생깁니다. 기존 객체와 유사하지만 다른 기능을 추가한 또 다른 객체를 만들어 사용하는 경우 우리는 prototype 상속을 사용할 수 있습니다. (개발자는 게을러야하기 때문에) 1. [[Prototype]] 상속이란 자바 스크립트의 모든 객체는 명세서에 기재된 [[Prototype]]이라는 숨김 프로퍼티를 가지고 있습니다. 이 프로퍼티는 값을 가질 수 있습니다. 그림과 같이 animal, rabbit 두 객체가 있다고 할 때 rabbit의 숨김 프로퍼티인 [[Prototype]]은 animal을 참조한다고 해봅시다. 그림과 같이 rabbit 객체는 jump()라는 메소드와 age 라는 프로퍼티를 가지고 있고 animal 객체는 walk()라는 메소드를 가진 객.. JavaScript, Set 자료구조 Set 자료구조의 특징과 내장 메소드 및 프로퍼티에 대해 알아보고 Map 자료구조와의 호환성에 대해 알아봅시다. 1. 정의 및 특징 Set 자료구조는 중복을 허락하지 않는 값들의 콜렉션입니다. 일반적으로 배열 혹은 Iterable 객체들을 Set의 생성자의 인자로 받아 사용합니다. 2. Method & Property 메소드 & 프로퍼티 역할 반환 값 new Set(Item) Set 자료구조를 생성합니다. Item의 있는 값들을 복사해 새로운 Set 자료구조를 만듭니다. Set 자료구조 target.add(value) value 값을 새로이 추가합니다 Set 자료구조 *체이닝 가능 target.delete(value) value 값을 삭제합니다. boolean 성공시 true, else false tar.. JavaScript, Map 자료구조 복잡한 자료구조 중 하나인 Map과 이와 유사한 Object(객체)가 어떻게 다른지 알아보고 Map 자료구조의 내장 메소드와 프로퍼티를 사용해봅시다. 1. Key 값 Object와 Map은 둘 다 Key가 있는 콜렉션입니다. 여기서 명확한 차이가 드러납니다. Object 즉 객체는 Key값으로 문자열만 가능한 데 반해 Map은 문자열, 숫자형, 객체 다양한 형태로 가능합니다. 2. Method & Property 메소드 & 프로퍼티 역할 반환 값 new Map() 생성자 Map 자료구조 target.set(key, value) key를 이용해 value를 저장 Map 자료구조 *따라서 체이닝 가능 target.get(key) 해당하는 key의 value값을 반환합니다 해당하는 key value값이 없을 .. JavaScript, 내장 메소드 정리 원시타입별 사용되는 내장 메소드를 정리하기 위해 글을 작성했습니다. Array - JavaScript | MDN 다른 프로그래밍 언어의 배열과 마찬가지로, Array 객체는 여러 항목의 컬렉션을 단일 변수 이름 아래 저장할 수 있고, 일반적인 배열 연산을 수행하기 위한 멤버가 있습니다. developer.mozilla.org 메소드명 역할 리턴 값 숫자형 target.toString(base) 숫자형 자료를 문자열 자료로 변환 base를 사용하면 진법에 따라 변환 (최대 36 = 10진수 + 알파벳) 문자열 Math.floor(num) 숫자형 자료를 소수점 첫째자리에서 버림 숫자형 숫자가 아닌 경우 NaN Math.ceil(num) 숫자형 자료를 소수점 첫째자리에서 올림 숫자형 숫자가 아닌 경우 NaN .. JavaScript, Undefined & null & Nan JavaScript 문법에서 쉽게 헷갈릴 수 있는 개념들을 정리해봅시다. 1. Undefined (1) Undefined란? var, let, const로 우리가 변수를 선언하게 되면 자바스크립트 엔진은 우리가 만든 변수 메모리 공간에 어떠한 데이터가 할당 되기 전까지 undefined 라는 값을 넣어놓습니다. 명시적으로 데이터를 할당하지 않아도 자동으로 undefined값을 넣어놓는다가 핵심입니다. 예제로 살펴봅시다. let songye; console.log(songye); 값이 할당되지 않은 let 변수를 console.lo로 찍어보면 다음과 같이 undefined로 출력되는 것을 확인할 수 있습니다. (2) Undefined의 Type console.log(typeof(undefined)); un.. JavaScript, let, var의 차이 자바스크립트에는 두 가지 변수가 있는데 바로 let과 var입니다.한 번 같이 알아봅시다. 1. var는 초기 자바스크립트 구현 방식이다.let과 const는 ES6 부터 추가되었는데요! var와 let은 차이가 있기 때문에 오래전 작성했던var 변수를 사용하던 스크립트를 let으로 변경할 때 유의할 점들이 있습니다. 2. var는 블록 스코프가 없습니다.이게 무슨소리냐? 지역변수에서 var를 선언해도 전역에서 쓸 수 있다는 이야기입니다.if (true) { var test = true; // 'let' 대신 'var'를 사용했습니다.}alert(test);if문이 끝남과 동시에 test라는 지역 var 변수는 사라진 것 같지만 끈질기게 살아남은걸 확인할 수 있습니다. let으로도 한 번 사용해봅시다!.. Intersection Observer let observer = new IntersectionObserver((entries) => { # 요소 발견시 함수 실행 -> Call back 함수 entries.forEach((entry) => { # 요소가 화면에 진입했는지 확인 if (entry.isIntersecting) { entry.target.style.opacity = 1; } else { entry.target.style.opacity = 0; } }); }) let div = document.querySelectorAll('div') observer.observe(div[0]) let observer = new IntersectionObserver(callback, options); 브라우저 제공 API로 특정 요소들을 관찰 혹은.. 이전 1 2 다음
