Sonny Cucumber

자바스크립트는 객체 프로퍼티로 오직 문자형과 심볼형만 허용. 숫자형, 불린형 모두 불가능하고 오직 이 둘만 가능하다. 지금까지는 프로퍼티 키가 문자형인 경우만 살펴봤다. 이번엔 프로퍼티 키로 심볼값을 사용해보면서 심볼형 키를 사용할 때의 이점에 대해 살펴보도록 하자. 심볼 심볼(symbol)은 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. Symbol()을 사용하면 만들 수 있다. 심볼을 만들 때 심볼 이름이라 불리는 설명을 붙일 수도 있다. 심볼 이름은 디버깅 시 유용 // id는 새로운 심볼이 됩니다. let id = Symbol(); // 심볼 id에는 "id"라는 설명이 붙습니다. let id = Symbol("id"); 심볼은 유일성이 보장되는 타입이기에, 설명이 ..

옵셔널 체이닝(optional chaining) ?. 을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있습니다. 옵셔널 체이닝이 필요한 이유 이제 막 자바스크립트를 배우기 시작했다면 이게 등장하게 된 배경 상황을 못겪어봤을거다. 몇가지 사례를 재현하면서 왜 이게 등장했는지 알아보자. 사용자가 여러 명 있는데 그 중 몇명은 주소 정보를 가지고 있지 않다고 가정해보자 이럴 때 user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다. let user = {}; // 주소 정보가 없는 사용자 alert(user.address.street); // TypeError: Cannot read property 'street' of undefined 또 다른 사례..

객체 리터럴 {...}을 사용하면 객체를 쉽게 만들 수 있습니다. 그런데 개발을 하다보면 유사한 객체를 여러 개 만들어야 할 때가 생기곤 합니다. 복수의 사용자, 메뉴 내 다양한 아이템을 객체로 표현하려고 하는 경우가 그렇죠. 'new' 연산자와 생성자 함수를 사용하면 유사한 객체 여러 개를 쉽게 만들 수 있다. 생성자 함수 생성자 함수(constructor function)와 일반 함수에 기술적인 차이는 없습니다. 다만 생성자 함수는 아래 두 관례를 따릅니다. 함수 이름의 첫글자는 무조건 대문자 반드시 'new' 연산자를 붙여 실행합니다. 예시: function User(name) { this.name = name; this.isAdmin = false; } let user = new User("보라"..

메서드 만들기 객체 user에게 인사할 수 있는 능력을 부여해보자 let user = { name: "John", age: 30 }; user.sayHi = function() { alert("안녕하세요!"); }; user.sayHi(); // 안녕하세요! 이렇게 객체 프로퍼티에 할당된 함수를 메서드 라고 부른다. 메서드는 아래와 같이 이미 정의된 함수를 이용해서 만들 수도 있다. let user = { // ... }; // 함수 선언 function sayHi() { alert("안녕하세요!"); }; // 선언된 함수를 메서드로 등록 user.sayHi = sayHi; user.sayHi(); // 안녕하세요! 중요! - 객체 지향 프로그래밍 객체를 사용하여 개체를 표현하는 방식을 부르는데 (ob..

JS는 보이지 않는 곳에서 메모리 관리를 수행한다. 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지하는데, 더는 쓸모 없어지게 되느 것들을 어떻게 처리할까? JS엔진이 어떻게 찾아내 삭제하는지 알아보자 가비지 컬렉션 기준 JS는 도달 가능성(reachability)라는 개념을 사용해 메모리 관리를 수행합니다. 이는 쉽게 말해 어떻게든 접근하거나 사용할 수 있는 값을 의미. 도달 가능한 값은 메모리에서 삭제되지 않습니다. 이 값들은 태생부터 도달 가능하기 때문에, 명백한 이유 없이는 삭제되지 않습니다. 예시: - 현재 함수의 지역 변수와 매개변수 - 중첩 함수의 체인에 있는 함수에서 사용되는 변수와 매개변수 - 전역 변수 - 기타 등등 이런 값은 '루트'라고 부릅니다. 루트가 참조하는 값이..

객체와 원시 타입의 근본적인 차이 중 하나는 원시값(primitive type)은 '값 그대로' 저장-할당되고 복사되는 반면에 객체는 '참조에 의해 (by reference)'저장되고 복사된다는 것. 변수엔 객체가 그대로 저장되는 것이 아니라, 객체가 저장되어 있는 '메모리 주소'인 객체에 대한 '참조 값'이 저장된다. 객체는 메모리 내 어딘가에 저장되고, 변수 user엔 객체를 '참조'할 수 있는 값이 저장됩니다. 따라서 객체가 할당된 변수를 복사할 땐 객체의 참조 값이 복사되고 객체는 복사되지 않습니다. let user = { name: "John" }; let admin = user; // 참조값을 복사함 변수는 두개이지만 각 변수엔 동일 객체에 대한 참조 값이 저장된다. let user = { n..

바벨 바벨은 트랜스파일러로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줌 주요 역할은 다음과 같다 트랜스파일러 - 바벨은 코드를 재작성해주는 트랜스파일러 프로그램. 바벨은 개발자의 컴퓨터에서 돌아가는데 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경시켜줌. 변경된 코드는 웹사이트 형태로 사용자에게 전달. 웹팩과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작시켜줌. 이런게 없으면 개발이 끝난 코드를 한데 통합하는데 어려움이 있을 수 있음. 폴리필 - 명세서엔(specification)엔 새로운 문법이나 기존에 없던 내장 함수에 대한 정의가 추가되곤 합니다. 새로운 문법을 사용해 코드를 작성하면 트랜스파일러는 이를 구 표준을 준수하는 코드로 변경..

테스트는 왜 해야 하는가? 함수를 하나 만들었다 치고 대부분 매개변수-결과 관계를 중심으로 어떻게 작성할지 구상할건데 개발 중엔 콘솔 등을 이용해 실행 결과가 기대했던 것과 같은지 비교하면서 원하는 기능이 잘 구현되어있는지 확인할 겁니다. 하지만 이렇게 수동으로 '재실행'하면서 테스트를 하면 놓치기 쉽다. f(1)가 있고 f(2)를 테스트해볼 때, 이렇게 수동으로 하면 에러를 발생할 여지가 있다. 무언가 만들 때 수많은 유스 케이스를 생각하며 코드를 작성하는데 코드를 변경해야 할 때 모든 케이스를 상기하면서 코드를 작성하는건 거의 불가능. 테스팅 자동화는 테스트 코드가 실제 동작에 관여하는 코드와 별개로 작성되었을 때 가능. 테스트 코드를 이용하면 함수를 다양한 조건에서 실행해볼 수 있는데 이때 결과와 ..

화살표 함수 기본 함수 표현식보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법이다. let func = (arg1, arg2, ...argN) => expression 이렇게 코드를 작성하면 인자 들을 받는 함수 func이 만들어지고 함수 func는 화살표 => 우측의 표현식을 평가하고 평가 결과를 반환 이 아래의 축약버젼이라고 할 수 있다. 예전엔 정말 이해 안됐는데 let func = function(arg1, arg2, ...argN) { return expression; }; 인수가 하나밖에 없다면 괄호 생략이 가능하고 없다면 괄호만 남겨놔야한다. let double = n => n * 2; // let double = function(n) { return n * 2 }과 거의 동일합니다...

JS에서는 함수를 특별한 종류의 값으로 취급합니다 다른 언어처럼 특별한 동작을 하는 구조로 취급안됨. 보통은 함수 선언문 방식으로 함수를 만들지만 이 외에 함수 표현식을 사용해서 만들 수도 있다. (Function Expression) let sayHi = function() { alert( "Hello" ); }; 변수에 값을 할당하는 것처럼 함수가 할당 됨. 그래서 괄호가 없이 이렇게 sayHi만 그대로 넣으면 함수가 실행이 안되고 함수 안의 소스코드가 그대로 alert으로 출력이 된다. function sayHi() { alert( "Hello" ); } alert( sayHi ); // 함수 코드가 보임 이 외에 함수의 값을 변수에 할당해줄 수 있는데 function sayHi() { // (1)..