인트로리액트 코드를 보는데 디스트럭처링 할당이 빗발치더라고요.빠르게 이해하려면 디스트럭처링 할당에 대해서도 조금 더 살펴볼 필요가 있겠다는 생각이 들었습니다. 바로 시작하겠습니다.디스트럭처링 할당이란?디스트럭처링 할당 즉 구조 분해 할당은 이터러블 또는 객체를 1개 이상의 변수에 개별적으로 할당하는 것을 말합니다.배열 디스트럭처링배열 디스트럭처링 할당의 경우 할당문의 우변이 이터러블이어야 하며 인덱스 순서대로 할당됩니다.const arr =['a', 'b', 2, 1];const [ one, two, ,numberOne] = arr;console.log(one); //aconsole.log(two); //bconsole.log(numberOne); //1심플한 코드로 변수에 배열 요소를 할당할 수 있습니..
인트로이 부분을 이해하려면 실행 컨텍스트를 알아야 합니다.클로저의 문지기가 실행 컨텍스트이기 때문에 저는 그때 실행 컨텍스트 공부를 했습니다.싱글스레드란 한 번에 하나의 태스크만 실행할 수 있는 방식을 말합니다. 자바스크립트 엔진은 단 하나의 실행 컨텍스트 스펙을 가집니다.이는 두 개 이상의 함수를 동시에 실행할 수 없다는 말과 같습니다. 현재 실행 중인 실행 컨텍스트를 제외한 모든 실행 컨텍스트는 대기 중인 테스크들입니다. 즉 , 자바스크립트 엔진은 싱글 스레드 방식으로 동작하는 것이죠. 따라서 오래 걸리는 태스크를 실행할 경우 블로킹(작업 중단)이 발생하게 됩니다. (바로 무한 존버 타이밍) function sleep(func, delay) { const delayUntil = Date.now(..
인트로고차 함수 map, filter, reduce에 대해서 공부했는데 그걸론 좀 부족한 것 같아 나머지 고차 함수들도 좀 알아보려고 합니다. 고차 함수란?함수를 인수로 전달받거나 함수를 반환하는 함수를 말합니다.자바스크립트에는 고차 함수가 많습니다. 특히 배열에 유용한 고차 함수가 정말 많습니다. 그럼 몇 가지를 살펴보죠. 참고로 제가 몰랐던 내용이 있거나 헷갈리는 고차 함수 위주로 정리하였기 때문에 빠진 함수가 있을 수 있습니다.Array.prototype.Sortsort 메서드는 배열의 요소를 정렬합니다. 이때 원본 배열을 직접 변경하며 정렬된 배열을 반환합니다.기본적으로 오름차순으로 요소를 정렬합니다. 한글도 마찬가지입니다.const abc = ['b', 'a', 'c'];abc.sort();c..
인트로오늘은 최근에 바빠서(?) 약 일주일간 열지 못한 딥다이브를 폈습니다.ES6 함수에 대한 내용입니다. 오랜만에 보니까 나쁘지 않네요. (당연함 저번에 DOM, Class 봤음) 바로 시작하겠습니다.ES6 이전의 모든 함수는 일반함수와 생성자 함수로서 호출이 가능했습니다.즉 모든 함수가 callable이며 constructor입니다. 이는 메서드(객체에 바인딩된 함수)도 마찬가지입니다.var obj = { x: 10, f: function () { return this.x;}};//메서드로 호출console.log(obj.f()); //10//일반 함수로 호출var bar = obj.f;console.log(bar()); //undefined//생성자 함수로 호출console.log(new obj.f..
인트로안녕하세요 오늘은 어제 DOM 때문에 못했던 클래스 공부를 해보려고 합니다.또 속을 수 없어서 페이지 수부터 확인했습니다. 짧진 않지만 DOM만큼의 빌런은 아니었습니다.처음부터 프로토타입이랑 비교하면서 얘기하는데 프로토타입 공부는 이미 했기 때문에 넘어가려고 합니다. 프로토타입 내가 해냄인트로프로토타입을 읽을 때는 노션에 살짝 쿵 정리하고 넘어갔는데 마침 부트캠프에서 프로토타입 내용을 다뤄 블로그에 써보려고 합니다. 프로토타입 교체 부분에서 머리를 한번 깬 경험이i-did-it.tistory.com 클래스와 생성자 함수의 차이클래스는 new 연산자 없이 호출하면 에러가 발생합니다. 생성자 함수의 경우 new 없이 호출하면 일반함수처럼 호출됩니다.따라서 이를 막기 위해 new.target으로 제어를 ..
Summary 사건의 시작은 html에서부터... id를 쓰지 않은 것.평소에 id를 잘 쓰지 않기에 이번에도 className만 작성하고 그냥 넘어갔습니다.별 생각없이 css와 js까지 작성하고 버튼을 클릭했는데!버튼을 누르자마자 보이는 건 빨간줄이었고...이유는 이놈이었다..const $container = document.getElementsByClassName("container");Problemjs에서 html 요소에 className으로 접근한 후 액션에 맞추어 class를 추가해주려고 했는데 오류가 났습니다.CSS 변경이 안돼...const $container = document.getElementsByClassName("container"); SolvedgetElementsByClassN..
인트로화살표함수, 생성자함수 그리고 렉시컬 관련 이야기가 나올 때마다 항상 등장하던 this...this에 대해 모르는 상태에서 다른 걸 이해하려고하니 아무것도 못하겠더라구요. 아무것도 못한달까 대충 추론을 해보는데 이게 맞는지 증명이 안돼요.. (더 심각)그래서 오늘 this를 끝내보려고 합니다. this 왜 만듦?메서드는 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자가 필요합니다. 아래 코드의 경우에는 문제가 없습니다.객체 리터럴은 객체가 생성되기 전에 평가되고 변수에 할당되기 때문에getDiameter 메서드는 circle 식별자를 참조할 수 있습니다.const circle = { radius : 5, getDiameter() { return 2 * circle.r..
인트로정규표현식 사용 방법 검색하면서 푸느라 정신없었지만 그래도 어찌저찌 통과문제Level 1 : https://school.programmers.co.kr/learn/courses/30/lessons/72410?language=javascript나의 풀이function solution(new_id) { let id = new_id.toLowerCase(); //1단계 대문자-> 소문자 id = id .replace(/[^a-z0-9\_\.\-]/g, "") .replace(/(\.+)/g, ".") .replace(/^\.|\.$/g, ""); //2단계-3단계-4단계 id = id.length ? id.slice(0, 15).replace(/\.$/g, "") : "a"; //5..