전체 글 (64) 썸네일형 리스트형 [모던자바스크립트 Deep Dive] 18. 함수와 일급 객체 1. 일급 객체 무명의 리터럴로 생성. 즉, 런타임에 생성이 가능하다. 변수나 자료구조(객체, 배열 등)에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환 값으로 사용 가능 위 조건을 만족하는 객체를 일급 객체라고 한다. ※ 3,4번으로 인해 함수형 프로그래밍을 가능하게 하는 자바스크립트의 큰 장점! // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 객체에 저장할 수 있다.. [모던자바스크립트 Deep Dive] 17. 생성자 함수에 의한 객체 생성 1. Object 생성자 함수 생성자 함수 : new 연산자와 함께 호출하여 객체(인스턴스)를 생성하는 함수 인스턴스 : 생성자 함수에 의해 생성된 객체 // 빈 객체의 생성 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 이렇게 new 연산자와 함께 Object 생성자 함수를 호출하면 빈 객체를 생성해서 반환된다. 2. 생성자 함수 1. 객체.. [자바스크립트] Null값 체크, 유효성 검사 현재 자바스크립트와 Vue로 웹을 개발 중이다. 우리는 현재 웹 개발을 하면서 로그인 페이지나 회원가입, 기타 정보 입력란을 만드는 페이지들을 최소 한번 쯤은 만들어본 기억이 있을 것이다. 회원가입을 예로 들면 비밀번호, 주민번호 등 누락되지 않아야 하는 값들이 있을 때 보통 유효성 검사를 하는데 여러 방법이 있어서 이것 저것 활용해 본것 중 가장 쉽고 효과적이어서 기록으로 남기고자 이렇게 글을 적게 되었다. 이름 핸드폰 번호 이메일 회원가입에 이러한 폼이 있다고 하자. 간단하게 개인정보를 받는 form이다. 이 때 우리는 보통 유효성 검사를 할 때 null값이 있으면 alert을 띄우는 방식을 사용할 것이다. watch: { name(val) { if(val === null || val === "") .. [모던자바스크립트 Deep Dive] 16. 프로퍼티 어트리뷰트 1. 내부 슬롯과 메서드 내부 슬롯 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 프로퍼티 내부 메서드 : 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 ECMAScript 사양에서 사용하는 의사 메서드 ECMAScript 사양에 등장하는 이중 대괄호([[...]]])로 감싼 이름들! 2. 프로퍼티 어트리뷰트와 프러퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 자동 정의한다. 프로퍼티 상태란? 프로퍼티의 값(value) 값의 갱신 가능 여부(writable) 열거 가능 여부(enumerable) 재정의 가능 여부(configurable) Object.getOwnPropertyD.. 두번째 프로젝트 회고 첫 계획 후 정확히 3개월 동안 달려서 겨우 프로젝트를 끝냈다. 프로젝트를 진행하면서 배운 내용들과 어려웠던 점들을 해결한 내용을 정리해 보려고 한다. 두 번째 프로젝트 첫 번째 프로젝트가 끝나고 약 1달 반 정도를 알고리즘과 개인 공부를 하고 있을 때 타입스크립트 관련해서 공부를 조금 해보고 싶었다. 그러던 찰나에 고등학교 때 친한 친구가 같이 프로젝트를 하자고 제안했었고 가벼운 고민 끝에 타입스크립트를 공부해보고자 프로젝트를 진행하기로 했다. 기획과 마이레코드 처음 친구와 프로젝트를 하기 위해 회의를 하면서 어떠한 웹페이지를 만들까 고민을 했었다. 친한 친구와 했던 회의였기에 재미있는 아이디어가 많이 나왔다. 그 안에서 우리 둘 다 취업을 위해 포트폴리오를 준비하는 학생이었고 각자의 기술 스택을 위해.. [모던자바스크립트 Deep Dive] 15. let, const 키워드와 블록레벨 스코프 1. var 키워드로 선언한 변수의 문제점 변수 중복 허용 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // 1 위 예제처럼 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var키워드가 없는 것 처러 동작하고 초기화문이 없는 변수 선언문은 무시된다. 함수 레벨 스코프 var 키워드로 선언한 변수는 함수의 코드 블록만을 지역 스코프로 인정하는 함수 레벨 스코프이므로 함수 외부.. [모던자바스크립트 Deep Dive] 14. 전역 변수의 문제 1. 변수의 생명주기 변수는 생성되고 소멸되는 생명주기(Life Cycle)가 있다. 전역변수의 생명주기 : 애플리케이션의 생명주기 지역변수의 생명주기 : 함수의 생명주기 function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined 위 예제에서 지역변수 x는 foo 함수가 호출되기 이전까지는 생성되지 않는다. 전역 변수는 변수 호이스팅으로 인해서 전역코드가 실행되기 전에 실행되어 생성된다. 그러나 함수 내부에서 선언된 지역변수는 함수가 호출된 직후에 함수 몸체 내의 코드가 실행되기 전에 실행된다. 알아야 할 점. 호이스팅은 스코프 단위.. [모던자바스크립트 Deep Dive] 13. 스코프 1. 스코프(scope)란? 스코프 : 식별자가 유효한 범위 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. var x = 'global'; function foo() { var x = 'local'; console.log(x); // ① } foo(); console.log(x); // ② 다음 예제에서 코드의 가장 바깥 영역(전역)과 foo 함수 내부에 같은 이름을 갖는 변수 x를 선언했고, ①과 ②에서 x 변수를 참조하는데 자바스크립트 엔진은 여기서 두 변수 중에서 어떤 변수를 참조해야 할 것인지를 결정한다.(식별자 결정) => 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 .. 이전 1 ··· 3 4 5 6 7 8 다음
