Study/JavaScript

[JavaScript_study] freeze (불변성을 추구할 때)

* Object.freeze Object의 불변성을 추구해야할때 사용한다. 동결! Object.freeze 추가 ❌, 삭제 ❌, 쓰기 ❌, 속성 재정의 ❌ (단, 얕은 꽁꽁 얼림!) // shallow copy를 해준다. 꽁꽁얼려도 특정한 객체에서 다른 객체를 참조하고 있다면 그 참조하는 객체까지는 얼려주지않는다. * Object.seal 밀봉! Object.seal 값의 수정 ✅, 추가 ❌, 삭제 ❌, 속성 재정의 ❌ * Object.preventExtensions 확장 금지 preventExtensions 추가 ❌ 값 수정 가능, 값 삭제 가능, 값 추가 안됨 * Object.isFrozen 객체가 동결되었는지 안되었는지 확인이 가능하다. * Object.isSealed 밀봉되었는지 안되었는지 확인 ..

[JavaScript_study] 프로퍼티(property)

* 프로퍼티(property) 프로퍼티는 프로퍼티 키(이름)와 프로퍼티 값으로 구성된다. 프로퍼티는 프로퍼티 키로 유일하게 식별할 수 있다. 즉, 프로퍼티 키는 프로퍼티를 식별하기 위한 식별자(identifier)다. 프로퍼티 키의 명명 규칙과 프로퍼티 값으로 사용할 수 있는 값은 아래와 같다. 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 symbol 값 프로퍼티 값 : 모든 값 const dog = { name: '와우', emoji: '강아지' }; console.log(Object.keys(dog)); console.log(Object.values(dog)); // [key, value] 쌍의 배열을 반환 console.log(Object.entries(dog)); // 특정 오브젝트에 ..

[JavaScript_study] 프로토타입(Prototype)

* 프로토타입(Prototype)이란? 원형이라는 뜻 완성된 형태가 아닌 빠르게 스캐치한것, 실제 제품을 만들기전 대략적인 형태를 만들어낸것 또는 집합체안에 비슷한 특징들을 뽑아서 대략적인것을 나타내도록 만든것 배포전 단계에서 빠르게 만들어낸 어플리케이션을 프로토타입 어플리케이션이라고 말한다. 자바스크립트에서 프로토타입은 다양한 객체들간에 비슷한 특징을 클래스로 만든것처럼 즉, 생성자함수를 통해서 템플릿으로 만든것처럼 객체지향프로그래밍을 위해서 바로 이 프로토타입을 사용한다. 다양한 오브젝트들이 있다면 이들의 비슷한 점들을 하나의 프로토타입으로 만들어서 이 프로토타입을 이용해서 객체지향을 구현한다. * 자바스크립트란 프로토타입을 베이스로 한 객체지향 프로그래밍 언어이다. 객체지향 프로그래밍을 위해서 대부..

[JavaScript_study] 엄격 모드 (strict mode)

* 'use strict'; 엄격 모드 strict mode 리액트와 같은 프레임워트 사용시 기본적으로 엄격 모드임 엄격모드는 일반 이름을 제거하는 것을 금지합니다. 엄격 모드에서 delete name 은 구문 에러입니다. 변수 선언시 키워드 생략 불가(var, const, let) 함수 내부에서 this를 사용하면 undefined가 나온다. 파일 전체 혹은 특정 함수 및 블럭안에서만 엄격모드 사용 가능 * 엄격모드 예시 코드 'use strict'; function add(x) { var a = 2; var b = a + x; console.log(this); } add(1); const array = [1, 2, 3]; for (const num of array) { console.log(num); }

[JavaScript_study] var을 쓰지 말자

* var을 쓰면 안되는 이유 변수 선언 하는 키워드 없이 선언 & 할당이 가능함 선언인지, 재할당인지 구분하기 어려움 중복 선언이 가능함 블록 레벨 스코프가 안됨 함수 레벨 스코프만 지원됨 따라서 var는 쓰면 안됨, 일반 코딩 방식과 어긋나서 개발하면서도 멘붕이 온다. 코드의 가독성과 유지보수성에 좋지 않음 // 1. 변수 선언하는 키워드 없이 선언 & 할당이 가능함 // 선언인지, 재할당인지 구분하기 어려워요 something = '💩'; console.log(something); // 2. 중복 선언이 가능함 var poo = '💩'; var poo = '💩'; console.log(poo); // 3. 블록 레벨 스코프 안됨 ❌ var apple = '사과'; { var apple = '🍎'; ..

[JavaScript_study] 호이스팅 (Hoisting)

* 호이스팅(Hoisting) 자바스크립트 엔진(번역기, Interpreter)이 코드를 실행하기 전, 변수, 함수, 클래스의 선언문을 끌어 올리는 것을 말함 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮김 함수의 호이스팅은 함수의 선언문 전에 호출이 가능하게 해줌 함수의 선언문은 선언 이전에도 호출이 가능함 변수(let, const)와 클래스는 선언만 호이스팅이 되고, 초기화는 안된다. 초기화 전, 변수에 접근하면 컴파일(빌드) 에러가 발생한다. * 호이스팅(Hoisting) 예시 코드 print(); function print() { console.log('Hello'); } // 변수(let, const)와 클래스는 선언만 호이스팅이 되고, // 초기화는 안됨 // 초기화 전, 변..