Immutable Objects - extensible, seal, freeze

Immutable Objects 불변 객체 - JavaScript에서 primitive data type(원시 타입)은 변경 불가능한 값(immutable value)이며, 객체는 변경 가능한 값(mutable value)입니다. immutable을 쓰는 이유는 궁긍적으로 '성능' 때문입니다. mutable value는 값에 대한 메모리 주소를 참조하기 때문에 값을 변경했을 경우 해당 값을 사용하고 있는 모든 곳에서 side effect(부수 효과)가 발생하여 예기치 못한 버그를 유발할 수 있습니다. immutable로 객체를 선언하고 사용하게 되면 객체의 메모리 주소가 불변하기 때문에 구조를 단순하게 유지할 수 있고 그로 인해 구조적인 공유를 할 수 있어 애플리케이션을 추론하기 쉽게 됩니다. 내부적으로..

2023.12.23

Property Attribute

property attribute JavaScript의 객체는 key, value만 존재하는 것이 아니라 생각보다 굉장히 섬세한 객체이다. 객체나 클래스에서 선언하는 프로퍼티의 애트리뷰트를 확인해볼 수 있다. 객체의 프로퍼티에는 아래 2가지 종류가 있다. 데이터 프로퍼티 - 키와 값으로 형성된 실질적 값을 갖고 있는 프로퍼티 액세서 프로퍼티 - 자체적으로 값을 갖고 있지 않지만 다른 값을 가져오거나 설정할 때 호출되는 함수로 구성된 프로퍼티 ex) getter, setter 1. 프로퍼티 애트리뷰트 출력 Object.getOwnPropertyDescriptor(객체, 프로퍼티key) Object.getOwnPropertyDescriptors(객체) Object - 대문자로 시작하므로 생성자 함수 이거나 ..

2023.12.22

getter & setter

getter와 setter는 객체 지향 프로그래밍에서 사용되는 개념이며, 일종의 메서드라고 보면 된다. 즉, 단어 그대로 getter는 객체의 속성(property) 값을 반환하는 메서드이며, setter는 객체의 속성 값을 설정, 변경하는 메서드라고 보면 된다. 예를 들어 user 라는 객체가 있을 경우, 보통이라면 user.name으로 프로퍼티로 바로 접근해서 이름값을 가져오거나 재설정 할 텐데 const user = { name: 'inpa', age: 50 } console.log(user.name); // inpa user.name = 'tistory'; 위와 같이 바로 접근하지 말고 getName(), setName() 메서드를 통해 경유해서 설정하도록 하는 기법이 바로 getter와 sett..

2023.12.22

ES6 class

ES6 클래스 문법은 좀 더 JAVA 스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법이다. ES5 까지 JavaScript에는 클래스가 없었다. 그래서 프로토타입 체이닝을 통해 클래스 비스무리하게 구현 해왔었는데 ES6 버전에 들어서면서 클래스와 비슷한 구조 문법을 추가하였다. 다만 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동된다. ES5 프로토타입 문법 VS ES6 클래스 문법 이 둘은 같은 결과를 출력하지만, 문법 생김새만 다르고 내부 로직은 완전히 같은 구조다. ES5 프로토타입 문법 // 생성자 함수 function Person({name, age}){ this.name = name; this.age = age; } Person.prototype.introduce..

2023.12.22

try...catch 에러 핸들링

보통의 스크립트에서 에러가 발생하면 스크립트가 즉시 중단되고, 콘솔에 에러가 출력됩니다. 그러나 try...catch문을 사용하면 스크립트가 죽는 걸 방지하고, 에러를 잡아서(catch) 더 합당한 무언가를 할 수 있게 됩니다. try...catch try { // code throw new Error('에러 발생'); } catch (e) { // error handling } finally { // code } try...catch의 알고리즘 1. 먼저, try{...} 안의 코드가 실행됩니다. 2. 에러가 없다면 try 안의 마지막 줄까지 실행되고, catch 블록은 건너뜁니다. 3. 에러가 있다면 try 안 코드의 실행이 중단되고, catch(e) 블록으로 제어 흐름이 넘어갑니다. 변수 e는 무슨..

2023.12.22

Javascript 네이밍(Naming)과 클린 코드(Clean Code)

1. Naming Convention 1-1. 기본사항 변수명은 자체 설명적이어야 함 JavaScript에서는 camelCase, PascalCase를 사용 // bad const value = 'Robin'; const val = 'Robin'; // good const firstName = 'Robin'; 1-2. Components, Class, 생성자 함수 컴포넌트, 클래스, 생성자 함수는 PascalCase를 사용 class UserProfile{ ... } function UserProfile(name, year){ this.name = name; this.year = year; } 1-3. Arrays 변수 이름에 복수, 단수 표현하기 // bad const fruit = ['apple', ..

2023.12.22