기록저장소

4.6 옵셔널 체이닝 '?.' 추가된지 얼마되지않은 문법, 구식 브라우저는 폴리필이 필요함 - 옵셔널 체이닝이 필요한 이유 //1. 여러명의 사용자 중 주소 정보를 가지지않은 사용자가 있을 때 error 발생 let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined //2. 페이지에 존재하지않는 요소에 접근해 요소의 정보를 가져오려할 때 // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; //?.가 추가되기 전 해결 방법 ..

4.4 new 연산자와 생성자 함수 복수의 사용자, 메뉴 내 다양한 아이템 객체 표현 등 유사한 객체를 여러개 만들어야 하는 경우 'new' 연산자 - 생성자 함수(constructor function) 1. 함수 이름의 첫 글자는 대문자로 시작 2. 반드시 'new' 연산자를 붙여 실행 function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false new User()를 사용했을 때 알고리즘 1. 빈 객체를 만들어 this에 할당 2. 함수 본문 실행, this에 새로운 프로퍼티 추가, this 수정 3. th..

4.4 메서드와 this 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성 let user = { name: "John", age: 30 }; - 메서드 만들기 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! //객체 프로퍼티에 할당된 함수 = 메서드(method) //메서드 : user.sayHi(); // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; + 객체 지향 프로그래밍(object-oriented programming, OOP) _ 객체를 사용하여 개체를 표현하는 방식 ..

4.3 가비지 컬렉션 눈에 보이지 않는 곳에서 메모리 관리를 수행하는 JS가 쓸모없어진 메모리를 처리하는 방법 - 가비지 컬렉션 기준 JS는 도달가능성(reachability- 어떻게든 접근하거나 사용할 수 있는 값) 개념을 사용헤 메모리 관리를 수행 1. 태생부터 도달 가능하여 명백한 이유없이 삭제되지 않는 값 ex) 루트(root) - 현재 함수의 지역 변수와 매개변수 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수, 전역 변수 등 2. 루트가 참조하는 값, 체이닝으로 루트에서 참조할 수 있는 값은 도달 가능한 값이 됨 ex) 전역 변수에 객체가 저장되어 있을 때, 해당 객체의 프로퍼티가 또 다른 객체를 참조할 경우 프로퍼티가 참조하는 객체는 도달 가능한 값이 됨, 객체가 참조하는 다른 모..

4.2 참조에 의한 객체 복사 객체와 원시 타입의 근본적인 차이 _ 원시값(문자열, 숫자, 불린값)은 값 그대로 저장, 할당, 복사되는 반면 참조에 의해(by reference)저장, 복사됨 //원시형 let message = "Hello!"; let phrase = message; console.log(message); //Hello console.log(phrase); //Hello //객체형 let user = { name: "John" }; let admin = user; // 참조값을 복사함 admin.name = 'Pete'; //참조 값이 변경됨 alert(user.name); // 'Pete'가 출력됨. 참조 값이 변경되었으므로 'admin' 또한 변경됨 : 변수엔 객체가 그대로 저장되는 ..

4.1 객체 자바스크립트는 일곱가지의 원시형과 한가지의 객체형이 존재 중괄호{ }로 구성된 객체는 "키(key-문자형) : 값(value-자료형)"으로 구성된 프로퍼티로 구성 //빈 객체를 만드는 두가지 방법 let user = new Object(); //'객체 생성자'문법 let user = {}; //'객체 리터럴' 문법 - 리터럴과 프로퍼티 let user = { //객체 name : "John", //키(이름, 식별자): name, 값: John age : 30 //키(이름, 식별자): age, 값: 30 }; 점 표기법(dot notation)을 이용한 프로퍼티 값 읽기 //프로퍼티 값 얻기 alert( user.name ); //John alert( user.age ); //30 프로퍼티 값..

3.1 Chrome으로 디버깅하기 3.2 코딩 스타일 3.3 주석 3.4 닌자 코드 3.5 테스트 자동화와 Mocha 3.6 폴리필

2.11 논리 연산자 2.12 null병합 연산자 '??' 2.13 while과 for 반복문 2.14 switch 문 2.15 함수 2.16 함수 표현식 2.17 화살표 함수 기본 2.18 기본 문법 요약

2.1 Hello, world! 2.2 코드 구조 2.3 엄격 모드 2.4 변수와 상수 2.5 자료형 2.6 alert, prompt, confirm을 이용한 상호작용 2.7 형 변환 2.8 기본 연산자와 수학 2.9 비교 연산자 2.10 if와 '?'를 사용한 조건 처리

1.1 자바스크립트란? 정의 '웹페이지에 생동감을 불어넣기 위해' 만들어진 프로그래밍 언어 JS로 작성한 프로그램을 스크립트(script)라고 부름, 스크립트는 웹페이지의 HTML내에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됨 특별한 준비나 컴파일 없이 보통의 문자형태로 작성, 실행 가능 자바(Java)와는 매우 다른 언어 i 왜 자바스크립트인가? 처음 LiveScript로 불리다가 인기많은 Java의 이름을 이용해 홍보하기 위해 명칭이 바뀜, 자바와는 독자적인 언어, 꾸준한 발전으로 ECMAScript라는 고유한 명세를 갖춘 독립적인 언어가 됨 JS는 브라우저뿐 아니라 서버에서도 실행 가능, 이 외에도 JS엔진(JS engine)이라 불리는 특별한 프로그램이 들어있는 모든 디바이스..