본문 바로가기

전체 글

 (39)
4.6 옵셔널 체이닝 '?.' ⚠️ 최근에 추가됨 📢 옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체에도 에러 없이 안전하게 접근할 수 있다. 옵셔널 체이닝이 필요한 이유 등장 배경 ◾️ 사용자가 여러 명 있을 때, 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정한다. ◾️ 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined ◾️ 브라우저에서 동작하는 코드를 개발 할 때 ◾️ 페이지에 있는 특정 요소에 담긴 정보에 접근하려 하는데, 요..
4.5 'new' 연산자와 생성자 함수 📢 "new" 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수(constructor function) 재사용할 수 있는 객체 생성 코드를 구현한다. 📢 생성자 함수 ◾️ 함수 이름의 첫 글자는 대문자로 시작한다. ◾️ 반드시 'new' 연산자를 붙여 실행한다. ◾️ new User() 함수의 실행 알고리즘 1. 빈 객체를 만들어 this에 할당한다. 2. 함수 본문을 실행한다. this에 새로운 프로퍼티를 추가해 this를 수정한다. 3. this를 반환한다. function User (name) { // 1. this = {}; // 2. 새로운 프로퍼티를 this에 추가 this.name = name; this.isAdmin = false; // 3. retu..
4.4 메서드와 'this' 📢 객체는 사용자(user), 주문(order) 등과 같이 실제 존재하는 개체(entity)를 표현하고자 할 때 생성된다. 자바스크립트에선 객체의 프로퍼티에 함수를 할당해 객체에게 행동할 수 있는 능력을 부여해준다. 메서드(method) 만들기 📢 객체 프로퍼티에 할당된 함수 ◾️ 함수 표현식으로 함수를 만들고, 객체 프로퍼티 user.sayHi에 함수를 할당해 준다. ◾️ 이미 정의된 함수를 이용해서 만들 수도 있다. let user = { name: 'suzu', age: 30 }; user.sayHi = function () { alert('Hi!'); } user.sayHi(); // Hi! 객체 지향 프로그래밍(object-oriented programming, OOP) 객체를 사용하여 개체를 ..

티스토리툴바