Sonny Cucumber

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)..

함수는 프로그램을 구성하는 주요 '구성요소 (building block)'입니다. 함수 선언 함수 선언 (function declaration) 방식을 이용하면 함수를 만들 수 있다. function showMessage() { alert( '안녕하세요!' ); } showMessage(); 펑션 키워드, 함수이름, 괄호 안 매개변수(parameter) 써주면 선언할 수 있고 이어서 함수를 구성하는 코드의 모임인 '함수 본문(body)'를 중괄호로 감싸 붙여준다 함수이름 옆 괄호를 붙여 호출하기. 지역 변수 함수 내에서 선언한 변수인 지역 변수 (local variable)는 함수 안에서만 접근할 수 있습니다. 예시: function showMessage() { let message = "안녕하세요!";..

여러개의 if문은 switch문으로 바꿀 수 있는데 이러한 비교법은 특정 변수를 다양한 상황에서 비교할 수 있게하여 비교 상황을 잘 설명한다는 장점 있음 문법 switch문은 하나 이상의 case가 존재. 대개는 default 도 있지만 필수는 아니다 switch(x) { case 'value1': // if (x === 'value1') ... [break] case 'value2': // if (x === 'value2') ... [break] default: ... [break] } 윗쪽 케이스부터 x와 케이스의 값을 비교하면서 내려오고 해당하는게 있다면 본문을 실행시켜주고 break를 만나면 실행이 종료 일치하는 케이스가 없다면 default문 아래의 코드가 실행 (디폴트가 있다면) 여러 개의 '..

여러 피연산자 중에 그 값이 '확정되어있는' 변수를 찾을 수 있다 a ?? b 의 결과는 다음과 같음 a가 null도 아니고 undefined도 아니면 a 이외엔 b 이를 ??없이 나타낸다고 하면 x = (a !== null && a !== undefined) ? a : b; 이를 활용해서 세 변수 중 실제 값이 있는 변수의 값을 출력하는데 세 변수 모두 값이 없다면 '익명의 사용자'가 출력되도록 해보죠 이럴 때 ?? 를 사용하면 값이 정해진 변수를 간편하게 찾아낼 수 있다 let firstName = null; let lastName = null; let nickName = "바이올렛"; // null이나 undefined가 아닌 첫 번째 피연산자 alert(firstName ?? lastName ??..

|| (or) 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다요 or 연산자는 이항 연산자 이므로 예시처럼 조합이 가능 alert( true || true ); // true alert( false || true ); // true alert( true || false ); // true alert( false || false ); // false 피연산자가 둘다 false인 경우 제외 전부 true가 반환된다 거기다 피연산자가 불린 타입이 아니면 변환시켜주는데 예시로 1은 true로 0은 false로 바뀝니다. if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다. alert( 'truthy!' ); } 첫번째 truthy를 찾..