치춘짱베리굿나이스

콜 스택 (호출 스택) 개념 프로그램이 함수 호출을 추적할 때 사용한다 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하는지, 다음에는 어떤 함수를 동작하여야 하는지 등을 제어한다 스택의 LIFO (후입선출) 특성을 생각하면 호출 스택도 비슷한 원리로 동작함을 알 수 있다 메모리 구조에서 스택이 의미하는 것이 바로 이 콜 스택이다 힙이랑 다른 점 스택은 액세스가 빠르고, 힙은 상대적으로 느리다 힙은 사용자가 직접 변수 할당 및 해제를 관리해줘야 하지만, 스택은 관리할 필요가 없다 (CPU가 알아서 관리해줌) 힙은 메모리 단편화가 일어날 수 있지만, 스택은 그렇지 않다 스택 내의 변수는 해당 스코프 내에서만 접근할 수 있지만, 힙 내의 변수는 (주소값만 알고 있다면) 전역적으로 접근 ..

일반 함수 vs 화살표 함수 (람다식) 참고로 필자는 자바스크립트 입문을 let, const, 화살표함수로 했기에 그것만 주구장창 썼는데 이걸 왜 쓰는지는 명확히 이해하지 못했다 (그냥 일반함수랑 똑같이 작동한다고 생각했음) 언젠가 두 개의 차이를 정리해봐야겠다 막연한 생각은 했었는데 그게 지금이 될 줄은 일반 함수 function foo() { console.log("foo"); } 평범하게 작성한 함수이다 const bar = function foo() { console.log("foo"); } 변수에 할당하고 싶다면 이렇게 작성한다 화살표 함수 const foo = () => { console.log("foo"); } 화살표를 이용해서 조금 더 간결하게 작성되는 함수이다 ES6에서 추가되었으며, 람..

Symbol 뭐 하는 녀석인지? 태초에 자바스크립트는 원시 자료형 5개와 객체 자료형 1개 총 6개의 자료형으로 이루어져 있었다 Number, String, Boolean, null, undefined 그리고 객체 Object가 그것이었는데, ES6 (2015년) 에 원시자료형팀 환상의 식스맨으로 Symbol이 합류했다 심볼은 객체의 고유 식별자로 활용할 수 있는 원시자료형으로, 쉽게 말해 객체 내부 프로퍼티의 키를 설정할 때 사용할 수 있다 심볼을 사용하면 프로퍼티 키가 겹치지 않고 고유한 값으로 설정되므로, 키가 중복으로 설정됨으로써 발생하는 충돌을 막을 수 있다 프론트엔드에서 클래스명을 겹치지 않게 설정하기 위해 CSS module을 사용하거나, CSS-in-JS 라이브러리들 (Styled Comp..

자바스크립트에서의 싱글톤 패턴과 static 싱글톤의 의미 Singleton 이름의 ‘Single’ 에서 뭔가 한 개..? 하나의…? 라는 뜻이 연상된다 싱글톤은 특정 클래스에 인스턴스를 단 하나만 생성 (메모리를 단 한 번만 할당) 하여 사용하는 패턴을 의미한다 (= 메모리를 단 한 번만 할당한다) 특징 인스턴스가 딱 하나만 생성된다 (대개 private, static 등의 키워드를 이용하여 구현한다) ‘단 한 개’ 만 생성되는 인스턴스는 전역으로 참조될 수 있으며, 다른 객체들이 이 공유된 인스턴스에 접근할 수 있어 데이터 공유가 편리하다 메모리를 한 번만 할당하면 되기 때문에 효율이 좋다 인스턴스가 ‘단 하나' 임을 보장하고 싶을 때 주로 사용한다 단점 일반 클래스보다 더 복잡하며, 비동기적인 상황..

Set 객체 특징 ES6에서 새로 도입한 자료구조이다 일반적인 배열과 비슷하게 원시 값, 객체 참조 모두 담을 수 있으며, 순회가 가능하다 다만 배열과 다른 점은, Set은 같은 값이 단 한 번만 나타날 수 있다 (중복 없음) 중복이 없는 유일한 값들의 집합이라고 생각하자 배열의 중복을 제거하고 싶을 때 잠깐 사용하거나, 처음부터 중복 없는 배열로 사용하고 싶을 때 쓰면 좋다 NaN과 undefined도 담을 수 있는데, Set에서 NaN은 여러 개 들어올 수 없다 (원래 NaN === NaN은 false이다) Set 객체에서 +0과 -0은 같은 값 취급된다 생성하기 const set = new Set(); // 빈 Set 객체 생성 console.log(set); // Set(0) {} const se..

함수형 프로그래밍 굳이 ‘자바스크립트에서의' 라는 문구를 넣은 것은… 예제 작성할 때 자바스크립트로 작성했기 때문이다 특별한 의미는 없다… 정의 객체지향과는 또 다른 프로그래밍 패러다임 ‘자료 처리를 수학적 함수의 계산으로 취급하고, 상태와 가변 데이터를 멀리하는 프로그래밍 패러다임’ …이라고 하는데 이 말만 봐서는 뭔 얘긴지 아리송하다 객체지향은 여러 종류의 객체들을 유기적으로 엮어 프로그램을 완성시키는 기법 함수형 프로그래밍은 기능을 작은 함수 단위로 쪼개고, 작은 함수의 연산 반환값을 이용하여 큰 함수를 만들고, 이 큰 함수들로 더 큰 함수에 필요한 연산을 계산하고… 쌓아올리는 방식으로 프로그램을 완성시키는 기법 쉽게 말해 프로그램을 이루는 작은 연산 하나하나를 만들 때에도 함수의 계산을 이용하는 ..

프로토타입 기반 언어 프로토타입 기반 언어? 자바스크립트에 클래스… 문법이 있긴 하지만 이건 ES6에 와서야 생긴 문법이고, 근본적으로 자바스크립트에는 클래스 개념이 없다고 보아야 맞다 대신 자바스크립트에는 프로토타입 개념이 있어 이를 이용하여 클래스를 흉내낼 수 있다 프로토타입 기반 언어는 객체의 원형인 프로토타입을 선언하고, 이 프로토타입 객체를 이용하여 새로운 객체를 만들어낸다 = 클래스랑 비슷한 방식으로 동작하는 것이다! 자바스크립트에서 함수는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 자바스크립트의 대부분 요소는 객체인가요? 전혀 관계없는 거 (함수 관련) 검색하다가 함수는 객체라는 글을 보고 꽂혀서 배열도? 클래스도? 하면서 찾아보니까 다 객..

객체지향 올 것이 왔다 자바스크립트 프로그래밍을 하면서 그 편의성 때문에 클래스를 종종 이용하는데, 물론 잘 알고 쓰는 것은 아니다 심지어 자바스크립트의 클래스는 정석적인 클래스도.. 아니었다고 한다 (하하) 간단하게나마 정리하고 적어도 왜 쓰는지는 알고 쓰는 것이 좋겠다 객체지향? 기존에는 프로그램을 명령어들의 집합이라고 생각했다면, 객체 지향 프로그래밍은 모든 데이터를 객체 (object) 취급한다 프로그래밍에서 필요한 모든 데이터들을 추상화시켜 상태와 행위를 가진 객체로 만들고, 객체들을 이리저리 조합하여 객체간 상호작용을 통해 프로그램을 구성한다 말 그대로 객체를 지향하는 프로그래밍인데, 지향이라고 하니까 좀 헷갈릴 수 있다 객체를 주축으로 사용하는 프로그래밍 방법론이라고 생각하자 객체지향의 특징..