JavaScript

함수 호출한 것을 보면, 그 자리에 return한 값을 대체해보자.

함수 선언 방법 중에는 다음과 같이 화살표 함수 방식이 있다.중괄호를 생략하면 return이 포함되어 있다.주의해야 할 점은, 객체를 return할 때는 꼭 소괄호로 감싸줘야 한다. js 엔진은 중괄호를 return이 아닌 함수의 몸체로 보기 때문이다.// 아래 세 개는 같은 표현const add = (a,b) => { return a + b };const add = (a,b) => a+b;const add = (a,b) => (a+b);// 객체를 리턴할 땐 꼭 소괄호로 감싸줘야 함const add = (a,b) => ({a + b}) 함수를 호출할 때, 매개변수에 함수를 넣는다면 주의해야 할 점이 있다. 함수이름 뒤에 () 를 붙으면 함수 호출이 된다는 것이다.const add = (a,b) =>..

JavaScript 2023.01.31

함수 사용하기 - 계산기 (고차 함수 사용, 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.querySe..

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