JavaScript

함수 사용하기 - 계산기 (고차 함수 사용, if 문 중첩 제거)

중복(반복)이 있으면 제거하자. 하지만 모든 반복을 제거할 수 없을 수 있으므로 최대한 줄이도록 해보자.이번 시간에는 고차함수를 통해 중복을 제거하는 방법을 알아볼 것이다.고차함수란?const func = () => { return () => { console.log("hello"); };};const innerFunc = func(); // func의 return 값innerFunc(); // hello여기서 innerFunc는 아래 코드와 같다.func()의 리턴값이기 때문이다.const innerFunc = () => { console.log("hello");}함수가 호출된 코드(함수 이름 뒤에 ()가 붙은 코드)가 있다면 그 부분을 실제 return 값으로 치환하면 이해하기 쉽다.c..

JavaScript 2023.01.21

DOM 객체 다루기 - 끝말잇기 게임, 쿵쿵따

순서도순서를 넘기는 경우 아래와 같은 순서를 거쳐야한다.코드 1번째 참가자 제시어: 입력  개념 정리대화상자 띄우기- promt : 대화 상자에 사용자가 입력한 메시지가 문자열 형태로 전달되고, 입력하지 않고 취소를 누르면 null이 전달된다.- alert : 단순 알림창. 호출하면 확인을 누르기 전까지 다음 스크립트 실행이 중단된다.- confirm : 사용자에게 확인을 받을 때 사용. 확인을 누르면 true, 취소를 누르면 false를 전달한다. HTML 태그 선택하기document.querySelector("선택자");document.querySelectorAll("선택자");document.querySelector("#아이디");document.queryS..

JavaScript 2023.01.19

순서도 그리기

프로그래밍에 있어 절차는 매우 중요하다. 코드를 에디터에 입력하기 전에 내가 만들 프로그램이 어떤 절차로 돌아갈 지 미리 생각해야 한다.앞으로 공부할 책인 Let's get it 자바스크립트 라는 책에서는 프로그램들을 만들기 전에 먼저 혼자 순서도를 그려보는 과정을 거친다.순서도만 제대로 만든다면 이미 프로그램을 90% 완성한 것이나 다름없다고 말할 정도로 저자는 순서도 그리는 것을 강조하신다.순서도를 만들었으면 순서도대로 프로그램을 구현하면 된다. 순서도에서 사용하는 도형과 기호 프로그램 절차를 만들 때 원칙1. 프로그램 절차의 개수는 정해져 있어야 한다.2. 각 절차는 항상 같은 내용이어야 한다.3. 모든 가능성을 고려해야 한다.4. 절차를 검증하기 위해 다양한 예시를 든다. 처음부터 완벽하게 할 수..

JavaScript 2023.01.19

[모던 자바스크립트 Deep Dive] 18장 - 함수와 일급 객체

18.1 일급 객체다음 조건을 만족하는 객체를 일급 객체라고 함무명의 리터럴로 생성할 수 있다. 즉, 런타임에 생성 가능하다변수나 자료구조(객체, 배열 등)에 저장할 수 있다함수의 매개변수에 전달할 수 있다함수의 반환값으로 사용할 수 있다js 함수는 위 조건을 모두 만족하므로 일급 객체다// 1. 함수는 무명의 리터럴로 생성할 수 있다.// 2. 함수는 변수에 저장할 수 있다.// 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다.const increase = function (num) { return ++num;};const decrease = function (num) { return --num;};// 2. 함수는 객체에 저장할 수 있다.const auxs = {..

JavaScript 2023.01.09

[모던 자바스크립트 Deep Dive] 17장 - 생성자 함수에 의한 객체 생성

도입객체 리터럴 이외에 다양한 객체 생성 방식 중에서 생성자 함수를 사용하여 객체를 생성하는 방식 17.1 Object 생성자 함수new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성하여 반환빈 객체를 생성한 이후 프로퍼티 또는 메서드를 추가하여 객체를 완성할 수 있음// 빈 객체의 생성const person = new Object();// 프로퍼티 추가person.name = 'Lee';person.sayHello = function () { console.log('Hi! My name is ' + this.name);};console.log(person); // {name: "Lee", sayHello: ƒ}person.sayHello(); // Hi! My name is Lee..

JavaScript 2023.01.09

[모던 자바스크립트 Deep Dive] 16장 - 프로퍼티 어트리뷰트

16.1 내부 슬롯과 내부 메서드내부 슬롯과 내부 메서드는 js 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티와 의사 메서드ECMAScript 사양에 등장하는 이중 대괄호([[…]])로 감싼 이름들js 엔진의 내부 로직이므로 내부 슬롯과 내부 메서드에 직접적으로 접근하거나 호출할 수 있는 방법을 제공하지 않음.단, 일부는 제공하긴 함모든 객체는 [[Prototype]]이라는 내부 슬롯을 가짐. 이는 proto를 통해 간접적으로 접근할 수 있음const o = {};// 내부 슬롯은 자바스크립트 엔진의 내부 로직이므로 직접 접근할 수 없다.o.[[Prototype]] // -> Uncaught SyntaxError: Unexpected token '['// 단, ..

JavaScript 2023.01.07

[모던 자바스크립트 Deep Dive] 15장 - let, const 키워드와 블록 레벨 스코프

15.1 var 키워드로 선언한 변수의 문제점변수 중복 선언 허용초기화 문이 있는 변수 선언문은 js 엔진에 의해 var 키워드가 없는 것 처럼 동작 var x = 1;초기화 문이 없는 변수 선언문은 무시 var x;함수 레벨 스코프var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정변수 호이스팅var 키워드로 변수를 선언하면 변수 호이스팅에 의해 변수 선언문 이전에 참조 가능단, 할당문 이전에 변수를 참조하면 undefined 반환// 이 시점에는 변수 호이스팅에 의해 이미 foo 변수가 선언되었다(1. 선언 단계)// 변수 foo는 undefined로 초기화된다. (2. 초기화 단계)console.log(foo); // undefined// 변수에 값을 할당(3. 할당 단계)foo ..

JavaScript 2023.01.07

[모던 자바스크립트 Deep Dive] 14장 - 전역 변수의 문제점

14.1 변수의 생명 주기지역 변수의 생명 주기함수 내부에서 선언된 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다변수 선언은 런타임 이전 단계에 먼저 실행되는데, 전역 변수에 한정된 것이다함수 내부에서 선언한 변수는 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 먼저 실행됨지역변수의 생명 주기는 함수의 생명 주기와 일치변수의 생명 주기는 메모리 공간이 확보된 시점부터 메모리 공간이 해제되어 가용 메모리 풀에 반환되는 시점까지함수 내부에 선언된 지역 변수는 함수가 생성한 스코프에 등록됨 함수가 생성한 스코프는 렉시컬 환경이라 부르는 물리적 실체가 있음 → 변수는 자신이 등록된 스코프가 소멸(메모리 해제)될 때까지 유효할당된 메모리 공간은 더 이상 누구도 참조하..

JavaScript 2023.01.07