제 컴에서는 되는데요?(It works on my computer)

들어가며 ES6부터 객체의 값을 안정적으로 가져오는 옵셔널이 도입됐다. 개념도 쉽고 적용하기도 쉽기 때문에 활용도가 높다. 더 이야기할 게 없으니 바로 알아보자 🙂 전통적인 객체 프로퍼티 확인 개발하면서 발생할 수 있는 상황을 통해 전통적인 방식의 프로퍼티 확인 방식을 보려고 한다. 이번 목표는 책ID로 책 정보를 찾아 작가의 이름을 출력하는 코드를 만드는 것이다. 먼저 책의 정보가 어떻게 구성되었는지 보자. // book은 이런 형태로 데이터 구조를 갖는다. const sampleBook = { bookId: 1, title: '객체지향의 사실과 오해', isbn: '9788998139766', author: { name: '조영호', }, } 특별한 것 없이 최소한의 정보를 담았다. 마저 기능개발을 ..

들어가며 아마 ES6의 내용 중 이해하기 가장 어려운 내용이 프로미스가 아닐까 생각한다. 다른 변경사항은 기능에 충실한 반면, 프로미스는 특정한 상황을 해결하기 위해 등장했기 때문이라 생각한다. 예를 들면 배열과 객체의 새로운 활용방법은 그냥 기능이다. 그렇게 외워서 쓰면 누구나 금방 사용한다. 근데 프로미스는 사용해야 하는 상황이 있어야 한다. 비동기 처리가 업무에 포함된 상황이다. 그래서 이해하기도 어렵고, 응용해서 실무에 적용시키기는 더욱 어렵다. 그래서 처음 프로미스를 접하는 개발자에게 한방에 이해시키는 것을 목표로 내용을 최대한 간추리고 비유해서 설명하고자 한다. 우선 전체 내용을 정리하면 다음과 같다. 상황별 코드 예제는 아래 있다. 숲을 보고 나무를 보고자 함이니 흐름만 눈에 넣어두면 된다...

들어가며 자바스크립트는 함수로 대표된다고 해도 과언이 아니다. 이제는 객체지향적인 방식으로 작업하는 개발자도 많지만 과거부터 함수를 정의하고 사용해왔기에 아직까지 함수 지향적인 코드를 접하는 분들도 많을 것이다. 이번에는 함수의 모던함을 정리하려고 한다. 주로 자주 반복되는 키워드를 생략하고, 축약하여 표현하는 방식으로 변경되었다. 크게 세 가지의 주제로 새로운 함수 사용방법을 정리했다. 그 전에 함수와 자주 혼동되는 메서드를 같이 비교하여 명확히 개념을 정리하고 시작하고자 한다. 함수와 메서드의 차이 함수와 메서드의 구분을 어려워하는 분들이 많아 간단명료하게 한 줄의 문장과 두 줄의 코드로 설명을 끝내겠다. " 바로 호출 가능하면 함수, 다른 객체를 통해서 호출해야 하면 메서드 " alert('Hell..

들어가며 자바스크립트에서 맵(Map)은 ES6가 되어서야 등장했다. 다른 언어에 비하면 상당히 늦은 편이다. 왜일까? 바로 객체(Object)라는 대안이 있었기 때문이다. 따라서 맵을 어떻게 사용하는지 알아가는 것도 좋지만, 그전부터 맵을 대신하던 객체를 어떻게 기깔나게 사용할 수 있는지 파악하는 것이 더 중요하다는 생각이 들었다. 그래서 이번에는 객체에 대해 자세히 알아보려고 한다. 순서는 맵과 객체의 차이를 간단히 살피고, 기존의 객체 사용 방식을 어떻게 개선된 방법으로 사용할 수 있는지 비교하며 설명하면서 진행된다. 객체와 맵의 차이 두드러지는 차이는 키의 타입이다. 객체는 오로지 문자열만 키로 사용할 수 있고, 맵은 모든 데이터 타입을 사용할 수 있다. const sampleFunc = () =>..

들어가며 배열(Array)은 맵과 함께 데이터를 관리하기 위한 가장 효율적인 자료구조다. 이번에는 배열로 무엇을 할 수 있는지 보면서 for 구문의 지옥에서 벗어날 수 있는 것을 목표로 한다. 고전적인 배열 사용방법 배열을 사용하면서 자주 만나는 상황을 통해 그동안 어떻게 해결했는지 살펴보자. 우선 예제로 사용할 데이터를 정의하고 출발한다. const memberList = [ {id: 0, name: '김철수', deptCd: '01', isManager: true}, {id: 1, name: '이영희', deptCd: '02', isManager: false}, {id: 2, name: '고냠이', deptCd: '02', isManager: false}, {id: 3, name: '강이지', dep..

들어가며 ES6에서는 변수를 사용하기 위해 새로운 문법인 let과 const를 지원하면서 동시에, var의 사용을 지양하라고 권한다. 그렇다면 var는 어떤 문제가 있기에 새로운 대체 문법이 생겼는지, 어떤 차이가 있는지 살펴보자. 우선은 var의 문제점 세 가지를 살펴보자. var의 세 가지 문제점 1. 선언을 중복해서 할 수 있다 var code = 10; var code = 20; console.log(`code: ${code}`); // 'code: 20' 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작하며, 가장 마지막 값을 저장하고 있는다. 2. scope의 범위가 전역 / 함수로 제한된다 var code = 10; if (true) { var code = 0; var codeName =..