Ji-u's blog

안녕하세요. 좋아요요정입니다. 오늘은 클로져에 대해서 알아보겠습니다. 사실 저는 제가 작성하는 코드에 클로저를 사용하지 않는다고 생각하고 있었습니다. 이름은 알지만 낯설고 사용해보지 않았다고 생각했었는데 글쎄 리액트의 Hooks이.. 클로저의 특성이라고 합니다!(두둔) const [count, setCount] = useState(0); 리액트의 함수형 컴포넌트 훅에서는 usdState()를 통해 state를 선언하고, state와 함께 선언되어지는 setCount라는 함수를 호출해 count의 상태를 관리할 수 있습니다. '클로저를 사용해봤다'라고 생각하니, 클로저가 조금 친숙해지네요. 클로저 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이라고 합니다. "함수가 선언된 어휘적 환경"을 이해하기 위해..

안녕하세요. 좋아요요정입니다. 오늘은 자바스크립트의 strict mode에 대해 알아보겠습니다. Strict mode 자바스크립트는 구현되는 환경에 따라 this가 객체인스턴스, 윈도우, 생성되는 객체, 호출되는 객체 등으로 변경이 되고, var, const let 키워드에 따라 다르게 적용되는 스코프, 그리고 함수 호이스팅, 전역변수의 호이스팅, 심지어 var는 같은 변수명이어도 에러가 나지 않는 모습을 보입니다. 자바스크립트의 이런 특징으로 인해 어디서 오류가 발생했는지 파악까지 오랜 시간이 걸리는 경우도 있습니다. 자바스크립트는 잠재적인 오류가 발생하기 어려운 환경을 제공해주기 위해 자체적으로 strict mode를 제공합니다. strict mode 1. strict mode를 적용하면 기존에 조용..

안녕하세요. 좋아요요정입니다. 자바스크립트는 ES6에서 클래스 기반 언어들과 비슷하게 객체를 생성하는 "클래스"가 추가되었습니다. 프로토타입 객체지향 프로그래밍의 자바스크립트에서는 기존 생성자함수를 이용해 객체를 생성했었는데 클래스가 추가된 이유는 무엇일까요? 그리고 클래스 사용법이 어떠한지 함께 살펴보겠습니다. 클래스 클래스는 객체를 생성하기 위한 탬플릿입니다. 붕어빵을 찍어내는 틀 = 클래스, 붕어빵 = 객체라는 예시가 유명합니다. 자바스크립트는 프로토타입 기반의 객체지향 패러다임을 제공하는 언어입니다. 클래스가 도입되기 이전의 자바스크립트는 프로토타입을 사용하기 때문에 클래스 키워드가 없이도 생성자함수, prototype을 이용해 객체지향에서 사용하는 상속기능을 구현할 수 있습니다. 자바스크립트의 ..

[프로토타입 연장되는 내용입니다.] 1. 13. 프로토타입 기반 객체지향 프로그래밍 이해하기 2. 14. 프로토타입 2탄 - 메소드 오버라이딩, 오버로딩, 섀도잉 "프로토타입 교체를 통해 객체간의 상속관계를 동적으로 변경하는 번거로울 뿐만 아니라 안전하지 않기 때문에 추천하지 않습니다. 따라서 직접 상속을 하거나, es6에 도입된 클래스문을 활용해 훨씬 쉽고 직관적인 상속을 구현하는걸 지향합시다." 프로토타입의 교체 생성자함수와 함께 생성되는 .prototype 프로퍼티는 개발자에 의해 임의의 다른 객체로 변경될 수 있습니다. 이러한 특징을 활용해서 객체간의 상속 관계를 동적으로 변경할 수 있습니다. 예시를 보겠습니다. function Person(name) { this.name = name; } Pe..

안녕하세요. 좋아요요정입니다! 12. 객체지향 프로그래밍 이해하기, 13.프로토타입 기반 객체지향 프로그래밍 이해에 이어서 객체지향 프로그래밍에서 상속을 구현할 때 중요하게 여기는 요소 중 하나인 메소드 오버라이딩과 오버로딩에 대해 알아보겠습니다. 오버라이딩 부모가 되는 생성자함수, 클래스가 갖고있는 메서드를 자식 생성자함수, 클래스, 객체에서 같은 이름으로 재정의하여 사용하는 방식입니다. 이때 자식 생성자함수, 클래스, 객체에 의해 가려진 부모의 메서드를 섀도잉이라고 합니다. 예시를 보겠습니다. function Person(name) { this.name = name; } Person.prototype.cook = function (menu) { console.log(`${this.name}가 ${me..

안녕하세요. 좋아요요정입니다. 자바스크립트는 프로토타입 기반 객체지향 프로그래밍 언어입니다. 다른 객체지향 언어들과는 다르게 클래스나 상속, 캡슐화를 위한 키워드를 제공하지 않고 자바스크립트는 프로토타입을 활용해 자바스크립트만의 객체지향 패러다임을 제공하고 있습니다. 자바스크립트의 클래스는 ES6가 되어서야 도입이 되었고, 다른 언어(Java, C++ 등)과는 조금 다르게 동작합니다. 자바스크립트의 클래스는 기존 상속을 구현하던 프로토타입을 조금 더 쉽게 사용해주는 하나의 함수, 도우미 역할이라고 볼 수 있습니다. 프로토타입 객체 프로토타입을 활용한 상속이란? 10. 생성자 함수에서 생성자 함수를 통해 객체 인스턴스를 생성하고, 생성자 함수의 prototype에 메서드를 등록함으로써 해당 메서드를 객체 ..

안녕하세요. 좋아요요정입니다. 스터디를 진행하며 객체가 {키:값}으로 이루어진 프로퍼티 뿐만 아니라 객체 프로퍼티의 상태를 정의할 수 있는 데이터 프로퍼티, 접근할 때(get, set)의 상태를 정의할 수 있는 접근자 프로퍼티를 가지고, 메소드도 사용할 수 있는 것을 함께 배웠습니다. 그리고 이전 생성자함수편을 통해 함수도 사실 객체라는 사실을 확인했습니다. 오늘은 자바스크립트의 값이 있는 원시값은 객체의 특징을 사용할 수 있는 이유와 객제지향 프로그래밍이 무엇인지에 대해 알아보겠습니다. 자바스크립트의 값이 있는 원시값은 객체의 특징을 사용할 수 있습니다. 처음 자바스크립트를 배울 때 자바스크립트의 데이터타입은 원시값과 객체로 나뉘어진다고 배웠습니다. 원시값이란 객체가 아니면서 메서드도 가지지 않는 데이..

안녕하세요. 좋아요요정입니다. const 변수명 = function(매개변수 목록) { 코드 실행부 } 함수의 선언 방식 중 변수명에 무명의 함수리터럴, 익명 함수를 할당해 선언하고, 변수명으로 함수를 호출할 수 있는 함수 표현식 기억하시나요? 이렇게 함수를 변수에 할당할 수 있는 이유가 자바스크립트의 함수는 일급 객체이기 때문이라고 언급을 했었습니다. 일급 객체 먼저 일급 객체란 무엇일까요? 쉽게 표현하면 변수가 사용될 수 있는 자리에 객체가 사용될 수 있으면 일급 객체입니다. 일급 객체는 다음과 같은 조건 4가지를 만족하면 일급 객체라고 뜻합니다. 예시와 함께 보겠습니다. 1. 무명의 리터럴로 생성할 수 있다. const increasePoint = function (num) { return num ..

안녕하세요. 좋아요요정입니다! 이전 객체편에서 객체 리터럴 {}을 활용하여 쉽고 빠르게 객체 인스턴스를 생성하는 방법을 살펴보았습니다. 이번엔 자바스크립트에서 객체를 생성하는 방법 중 하나인 생성자 함수를 살펴보겠습니다. 생성자 함수 자바스크립트의 함수는 객체를 생성하기 위해서도 사용할 수 있습니다. 생성자 함수는 생성자 함수의 타입에 맞는 동일한 프로퍼티를 가진 여러개의 객체 인스턴스를 생성할 때 사용할 수 있습니다. 객체 인스턴스는 객체 모양의 데이터 구조로 실제 저장공간에 할당된 실체를 뜻합니다. 먼저, 생성자 함수가 필요한 경우로는 어떤 경우가 있을지 예를 들어보겠습니다. 여기 동물병원에서 진료받은 동물들의 정보를 기록하는 배열이 있습니다. 동물의 개인코드와 이름, 나이 그리고 해가 지나면 나이를..

안녕하세요 좋아요요정입니다. 이번 게시글에서는 자바스크립트의 객체에 대해 더 깊게 이해해보겠습니다. 객체의 프로퍼티는 속성(Properties)로써 Key와 value값을 한 쌍의로 정의한 것을 뜻했습니다. 이 프로퍼티에 갱신이 가능한지, 열거가 가능한지, 재정의가 가능한지 등의 상태를 정의하고, 프로퍼티에 접근할 때 값을 읽거나 저장할 때의 상태를 관리할 수 있습니다. 객체의 프로퍼티의 상태 자바스크립트 내부 슬롯과 내부 메서드 객체의 프로퍼티의 상태는 어떻게 정의될까요? 자바스크립트 내부 슬롯에 정의되어 있습니다. 내부 슬롯과 내부 메서드는 EcmaScript에서 자바스크립트 엔진의 구현 알고리즘을 설명하기 위해 사용하는 의사 프로퍼티와 의사 메서드입니다. 자바스크립트 엔진에서 실제로 동작을 하지만,..