디박log

실행 컨텍스트는 Js를 한다면 꼭 알아야 하는 중요한 핵심 개념 중 하나다. 이 글을 기회로 한번 정리해보고자 한다. 실행 컨텍스트에서 알아야 할 기본 개념인 Stack & Queue를 먼저 알아보자. 스택 stack : 출입구가 하나뿐인 깊은 우물 같은 데이터 구조 / a, b, c, d 순서로 데이터가 들어가면 나올 때는 d, c, b, a로 나온다. 큐 queue : 양쪽 모두 열려있는 파이프 같은 데이터 구조 / a, b, c, d 순서로 데이터가 들어가면 나올때는 a, b, c, d로 나온다. 실행 컨텍스트란? 실행할 코드에 제공하는 환경 정보를 모아 놓은 객체 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보들을 모아 컨텍스트를 구성하고, 콜 스택에 쌓아 올린 후, 가장 위에 쌓여있는 ..

ES6 모듈은 자바스크립트 코드를 담고 있는 하나의 파일입니다. 즉, 하나의 파일 = 하나의 모듈이라고 볼 수 있다. //hello.js export function hello(name) { console.log(`hello ${name}`); } export 키워드를 이용하여 모듈 내의 특정 코드를 외부에서 사용할 수 있다. //app.js import { hello } from './hello.js'; hello('dpark'); // hello dpark 출력 import 키워드를 이용해서 export 한 코드들을 가지고 올 수 있다. 다른 모듈에서 내보낸 코드를 하나의 모듈에서 import 하게 되면 도 모듈은 서로 의존하게 되는 '의존 관계'를 맺어 '의존성 그래프'가 형성이 된다. '의존성 그..

1. arr.join([separator]) : 배열을 문자열로 - 배열의 모든 요소를 연결해 string으로 리턴 - separator를 통해 문자열을 구분한다.(separator가 빈 문자열이면 요소들 사이에 아무 문자 없이 연결된다.) let a = ['바람', '비', '불']; let myVar1 = a.join(); // '바람,비,불' let myVar2 = a.join(', '); // '바람, 비, 불' let myVar3 = a.join(' + '); // '바람 + 비 + 불' let myVar4 = a.join(''); // '바람비불' 2. str.split([separator[, limit]]) : 문자열을 배열로 - separator (선택사항) : 원본 문자열을 끊어야 하는 ..

Promise, async & await는 왜 생겨나게 되었을까? 아마 코딩을 공부한다면 무조건 한 번은 보았을 위의 그림 같이 하나의 비동기 비동기 계산이 다른 비동기 계산의 결과에 의해 처리되어야 하는 경우가 많다. 이러한 경우가 계속 중첩이 되다 보면 위의 그림과 같은 콜백 지옥을 만나게 되는 이를 보다 명료한 코드로 작성하고 예외처리를 손쉽게 하기 위해 만들어졌다. Promise 정의 Promise 객체는 비동기 작업이 맞이할 미래의 완료 또는 실패와 그 결과 값을 나타낸다. 프로미스를 사용하면 비동기 메서드에서 마치 동기 메서드처럼 값을 반환할 수 있다. 다만 최종 결과를 반환하는 것이 아니고, 미래의 어떤 시점에 결과를 제공한다. (MDN) 완료되면 하나의 값을 결과로 반환하는데 실패하여 정상..

배열 고차 함수 고차 함수란? 외부의 상태 변경이나 가변성 데이터가 아닌 불변성을 지향하는 함수형 프로그래밍에 기반을 둔 것을 의미한다. 함수형 프로그래밍? 순수 함수(pure function) + 보조 함수 의 조합으로 로직 내에 존재하는 조건문, 반복문을 제거하여 복잡성을 해결하고, 변수의 사용을 억제하여 상태 변경을 피하려는 프로그래밍 패러다임을 말한다. 즉, 순수 함수를 통해 부수 효과를 최대한 억제하여 오류를 피하고 프로그래밍의 안정성을 높이려는 것 Array.prototype.sort 원본 배열을 직접 변경 정렬된 배열 반환 기본적으로 오름차순으로 정렬(한글 문자 포함) 기본 정렬 순서는 유니코드 코드 포인트의 순서를 따른다. ['3', '10'].sort(); // ['10', '3'] //..

Class 클래스는 함수이며 기존 프로토타입 기반 패턴을 클래스 기반 패턴처럼 사용할 수 있도록 하는 문법적 설탕이라고 볼 수 있다. 생성자 함수와 클래스는 프로토타입 기반의 객체지향을 구현했다는 점에서 매우 유사하다. 하지만 extends와 super 키워드를 활용한 상속관계 구현은 클래스를 생성자 함수 기반의 객체 생성 방식보다 견고하고 명료하게 느껴지게 한다. 클래스와 생성자 함수의 몇가지 차이가 있다. 클래스를 new 연산자 없이 호출하면 에러 발생! 클래스는 상속을 가능케하는 extends와 super키워드를 제공한다. (생성자 함수는 그렇지 못함) 클래스는 호이스팅이 발생하지 않는 것처럼 동작함! (하지만 사실 됨) 클래스 코드 내 암묵적으로 strict mode가 실행됨 클래스의 constr..

알다가도 모르겠는 프로토타입을 알아보자. 우선 많은 사람들이 오해하는게 C++, JAVA와 같은 클래스 기반 객체지향 프로그래밍 언어의 특징인 public, pirvate, protected등이 자바스크립트에 없어서 자바스크립트는 객체지향 언어가 아니라고 오해를 한다. 하지만 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어로 클래스 기반 언어들보다 더 효율적이고 프로그래밍 능력도 강력하다. * 자바스크립트는 객체 기반의 언어이며 거의 모든 것이 객체로 이루어져 있다.(원시 타입을 제외한 나미지 값들은 모두 객체다.) 객체지향 프로그래밍 객체 지향 프로그래밍은 프로그래밍의 패러다임 중 하나로. 컴퓨터 프로그램을 명령어의 목록으로 보는 시각에서 벗어나 "객체"(여러 개의 독립된 단위)들의 집합으로 표..

const listGame = document.getElementById("list-game"); const listChoice = document.querySelectorAll("button"); const result = document.querySelector(".result"); const reTry = document.querySelector(".retry"); //클래스 네임일때는 유사배열이라 .하고 못잡고 foreach도 안돌아간다. 클래스 네임 올은 돌아간다. // ✌️✊🖐 이모지가 순서대로 변하고 있는 화면을 만든다 // 3개의 가위 바위 보 버튼이 있다. // 하나를 클릭하면 그때 화면에 있는 가위바위보가 멈추고 비교하여 이김, 비김, 짐을 표기한다. const choices = { 0..