on your mark

4.8 객체를 원시형으로 변환하기 obj1 + obj2 , obj1 - obj2 , alert(obj) 등과 같은 경우에 자동 형 변환이 일어나고 객체는 원시값으로 변환된다. ToPrimitive 객체 형 변환은 세 종류로 구분되는데 'hint'(목표로 하는 자료형)라 불리는 값이 구분 기준이 된다. "string" alert 함수 같이 문자열을 기대하는 연산을 수행할 때는(객체-문자형 변환) hint가 string이 된다. alert(obj); // 객체를 출력 anotherObj[obj] = 123; //객체를 프로퍼티 키로 사용 "number" 수학 연산을 적용하려 할 때(객체-숫자형 변환), hint는 number가 된다. let num = Number(obj); // 명시적 형 변환 // (이항..

4.7 심볼형 심볼 '심볼(symbol)'은 유일한 식별자를 만들고 싶을 때 사용한다. Symbol()을 사용하면 심볼값을 만들 수 있다. // id는 새로운 심볼이 된다. // 심볼 id에는 "id"라는 설명이 붙는다. let id = Symbol("id"); 설명이 동일한 심볼을 여러 개 만들어도 각 심볼값은 다르다. 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만 수행한다. let id1 = Symbol("id"); let id2 = Symbol("id"); alert(id1 === id2) // false 심볼은 문자형으로 자동 형 변환되지 않는다. 자바스크립트에서 문자형으로의 암시적 형 변환이 비교적 자유로운 반면 심볼형 값은 다른 자료형으로 암시적 ..

4.6 옵셔널 체이닝 '?.' 최근에 추가됨 옵셔널 체이닝이 필요한 이유 사용자가 여러 명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정해보자. 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.자바스크립트를 사용해 페이지에 존재하지 않는 요소에 접근해 요소의 정보를 가져오려 하면 문제가 발생한다.옵셔널 체이닝이 추가되기 전엔 && 연산자를 사용하여 프로퍼티/객체가 있는지 확인하였지만, 이러한 방법은 코드가 아주 길어진다는 단점이 있다. // querySelector(...) 호출 결과가 null인 경우 에러 발생 let html = document.querySelector('.my-element').innerHTML; let user = {}..

4.5 new 연산자와 생성자 함수 생성자 함수 함수 이름의 첫 글자는 대문자로 시작한다. 반드시 new연산자를 붙여 실행한다. function User(name) { // this = {}; (빈 객체가 암시적으로 만들어짐) this.name = name; this.isAdmin = false; // return this; (this가 암시적으로 반환됨) } let user = new User("보라"); alert(user.name); // 보라 alert(user.isAdmin); // false new User(...)를 써서 함수를 실행하면 아래와 같이 작동한다. 빈 객체를 만들어 this에 할당한다. 함수 본문을 실행하고, this에 새로운 프로퍼티를 추가해 this를 수정한다. this를 반..

4.4 메서드와 this 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여한다. 메서드 만들기 let user = { name: "John", age: 30, } user.sayHi = function(){ alert("안녕하세요!"); } user.sayHi(); // 안녕하세요! 객체 리터럴 안에 메서드를 선언할 때 사용할 수 있는 단축 문법 // 아래 두 객체는 동일하게 동작한다. user = { sayHi: function(){ alert("Hello"); } } user = { sayHi() { alert("Hello"); } } 메서드와 this 메서드는 객체 저장된 정보에 접근할 수 있어야 제 역할을 할 수 있다. 메서드 내부에서 this 키워드를 사용하면..

4.2 참조에 의한 객체 복사 주제 탐색 객체와 원시 타입의 근본적인 차이 중 하나는 객체는 '참조에 의해(by reference)' 저장되고 복사된다는 것이다. (원시값은 '값 그대로' 저징, 할당되고 복사됨) 객체의 경우 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조값'이 저장된다. let user = { name : 'John' }; let admin = user; admin.name = 'Pete'; alert(user.name); // 'Pete' 참조에 의한 비교 let a = {}; let b = a; // 참조에 의한 복사 alert(..

주제 탐색 자바스크립트의 여덟 가지 자료형 중 일곱 개는 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 원시형이라고 부르지만, 객체형은 원시형과 달리 다양한 데이터를 담을 수 있다. 리터럴과 프로퍼티 let user = new Object(); // '객체 생성자' 문법 let user = {}; // '객체 리터럴' 문법 let user = { // 객체 name: "John", age: 30, // 마지막 프로퍼티 끝은 쉼표로 끝날 수 있다.(trailing, hanging 쉼표) } user 객체에는 프로퍼티가 두 개 있다.(name프로퍼티, age프로퍼티) 상수 객체는 수정될 수 있다. const는 user = ...를 전체적으로 설정하려고 할 때만 오류가 발생한다..

모던 자바스크립트 문법 톺아보기 (단, 완벽히 아는 내용은 정리하지 않고 문서 읽는 것으로 끝냄) 소개 1. 자바스크립트란 ? ... 스크립트 파일을 별도로 작성하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능 상 이점이 있다. 여러 페이지에 동일한 스크립트 파일을 사용하는 경우 페이지가 바뀔 때ㄷ마다 스크립트를 새로 다운받지 않고 캐시로부터 스크립트를 가져와 사용한다. 이를 통해 트래픽이 절약되고 웹 페이지의 실제 속도가 빨라진다. 자바스크립트 기본 3. 엄격모드 "use strict" 를 사용하여 엄격모드 활성화 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 가능성이 있다. 변경 사항 대부분은 ES5의 기본 ..