개발자 퉁이리

반복문 자바스크립트에서 여러 데이터 값을 관리할 때 배열이나 객체를 많이 사용한다. 이러한 데이터를 관리할 때, 유용하게 쓰이는 반복문인 map, filter, reduce에 대해 정리해보자! map, filter, reduce에 대해 알아보기 전에 기본적인 for문을 가볍게 짚고 넘어가 봅시다! for문 const practice = [ { name: "개발자", value: 150, active: false }, { name: "퉁이리", value: 200, active: true }, { name: "프론트엔드", value: 110, active: true }, { name: "티스토리", value: 300, active: true }, { name: "깃허브", value: 250, acti..

예외 처리 예외 처리란 프로그램 실행 시 정상적으로 작동되지 않을 때, 해당 오류를 대응하는 방법을 의미합니다. ✨예외란? 일반적인 통례나 정해진 규칙에서 벗어남을 의미해요. 자바스크립트에서도 정해진 규칙이 있다. 따라서 우리는 자바스크립트에서 정해준 문법을 따라서 코드를 구성해야 합니다. 그런데 가끔 정의되지 않은 코드를 참조한다거나, 정의되지 않은 함수를 참조할 때 애러가 발생하고 우리는 이를 해결해야 합니다. 이때 예외 처리를 한다면 해당 오류를 대응할 수 있습니다. 지금부터 알아봐요! 예외 처리 방법 throw try catch Promise async/await 1️⃣ throw 예외를 강제로 발생시켜야 하는 상황에서 throw를 사용해요. 애러 내용을 커스텀할 수 있다는 특징을 가지고 있습니다..

타이머 함수 타이머 함수는 일정 시간이 지난 후 특정 코드를 실행해주는 함수를 말한다. 타이머 함수 종류 setTimeout setInterval setTimeout setTimeout은 코드를 설정한 시간이 지난 후 실행시켜준다. 문법 setTimeout( 코드, 지연 시간, 함수에 전달할 인수 ); setTimeout을 사용하여 5초 뒤에 console log에 특정 문장을 찍어보자. 예제 코드 1 setTimeout(function () { console.log('개발자 퉁이리'); }, 5000); 예제 코드 2 setTimeout(() => {console.log('개발자 퉁이리')}, 5000); 여기서 지연시간은 밀리세컨드 단위로 설정, 만약 5초로 설정하고 싶다면 지연시간은 5000. 5초..

화살표 함수 화살표 함수는 function 키워드 대신 화살표 =>를 사용해 함수를 간략히 정의한다. const arrow = (x,y) => { ... }; 😃 기존 함수 정의 const arrow = function() { ... }; 😄 화살표 함수 정의 const arrow = () => { ... }; 위 비교만으로도 왜 화살표 함수가 ES6에 추가되어 많은 개발자에게 사용되는지 알 수 있다. function이 =>로 변경되었다. 바꿔 말하면 타이핑 8이 타이핑 2로 변경되었다. 함수는 가장 많이 사용하는 기능인데, 이를 1/4로 줄인 것만으로도 개발자들에게 환호받을만하다. ❗ 이뿐만이 아니다. 조건에 한해 return 생략까지 가능해졌다. 조건 : return이 한 줄인 경우 let sum =..

javascript:void(0) javascript:void(0)은 undefined를 반환해주는 함수다. undefined를 반환해주는 함수, javascript:void(0)를 왜 사용할까? 대부분 javascript:void(0)를 검색해서 들어온 분들이라면 앵커 태그 안에서 왜 사용되는지가 궁금할 거다. 개발자 퉁이리 다음과 같은 하이퍼링크를 WEB에서 클릭하면 어떻게 될까? 결론부터 말하면 아무일도 일어나지 않는다. 🤔 아무일도 일어나지 않는 javascript:void(0)를 왜 사용할까? 1️⃣ 개발자 퉁이리 2️⃣ 개발자 퉁이리 위 1️⃣과 2️⃣ 코드의 차이점이 무엇일까? 당연히 생긴 것부터 다르다. 그거 빼고. 1️⃣번은 하이퍼링크 클릭 이벤트 발생 시 해당 페이지의 최상단으로 스크롤..

브라우저의 렌더링 과정 렌더링은 HTML, CSS, 자바스크립트로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 파싱: 프로그래밍 언어의 문법에 맞게 작성된 텍스트 문서를 읽어 들여 실행하기 위해 텍스트 문서의 문자열을 토큰으로 분해하고, 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스트리를 생성하는 일련의 과정 브라우저가 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답 받음 HTML, CSS를 파싱하여 DOM, CSSOM을 생성하고 이들을 결합하여 렌더트리 생성 JS를 파싱하여 AST를 생성하고 바이트 코드로 변환하여 실행. 이때 JS는 DOM API를 통해 DOM이나 CSSOM을 변경 가능. 변경된 DOM과 C..

Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X const set = new Set(); console.log(set); // Set(0) {} Set 객체는 Set 생성자 함수로 생성하고, 이터러블을 인수로 전달받아 Set 객체를 생성한다. 이때 이터러블의 중복된 값을 Set 객체에 요소에 저장되지 않는다. Set 객체의 요수 개수 -> Set.prototype.size 프로퍼티를 사용 Set 객체의 요수 추가 -> Set.prototype.add 메서드를 사용 Set 객체의 요수 존재 여..

디스트럭처링 할당 디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여, 다른 말로는 구조를 파괴하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 배열 디스트럭처링 할당 // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 위 코드는 ES5에서 구조화된 배열을 디스트럭처링하여 1개 이상의 변수에 할당하는 방법이다. // ES6 const arr = [1, 2, 3]; const [one, two, th..

스프레드 문법 ES6에서 도입된 스프레드 문법(전개 문법) ...은 하나로 뭉쳐 있는 여러 값들의 집합을 펼쳐서(전개) 개별적인 값들의 목록으로 만든다. 스프레드 문법을 사용할 수 있는 대상은 for ... of 문으로 순회할 수 있는 이터러블에 한정한다. //개별 요소로 분리한다. console.log(...[1,2,3]); // 1 2 3 //문자열은 이터러블이다. console.log(... 'Hello'); // H e l l o //Map Set은 이터러블이다. console.log(... new Map([['a','1'], ['b','2']])); // ['a', '1'] ['b', '2'] console.log(... new Set([1,2,3])); // 1 2 3 스프레드 문법의 결과물은..

이터레이션 프로토콜 ES6에서는 순회 가능한 데이터 컬렉션을 이터러블로 통일하였다. 이터러블 프로토콜 이터레이터 프로토콜 이터러블 이터러블 프로토콜을 준수한 객체를 이터러블이라 한다. 즉, 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다. const array = [1, 2, 3]; // 배열은 Symbol.iterator 메서드를 상속받는다. console.log(Symbol.iterator in array); // true // 이터러블인 배열은 for ... of 문으로 순회 가능하다. for(const item of array) { console.log(item); } // 스프레드 문법 사용할 수 있다. con..