Ji-u's blog

안녕하세요. 좋아요요정입니다. 오늘은 ES6에 도입된 Map과 Set에 대해 알아보겠습니다. 컬렉션? 컬렉션이란 데이터들의 집합, 데이터를 모아놓은 자료구조의 개념입니다. 자바스크립트에서 컬렉션으로 잘 사용하는 데이터 타입은 객체입니다. 객체는 key와 value를 하나씩 쌍으로 가진 프로퍼티를 끊임없이 추가할 수 있는 컬렉션입니다. Map과 Set은 ES6에서 도입된 새로운 컬렉션입니다. Map은 Map 객체로 키-값 쌍을 보유하는 형태의 자료구조이고, Set객체는 자료형에 관계 없이 원시 값과 객체 참조 모두의 유일한 값을 저장하는 형태의 자료구조입니다. 자바스크립트는 객체로 자료구조가 가능한데 왜 Map과 Set이라는 새로운 자료구조를 도입했을까요? 도입한 이유는 일반 객체로는 해결할 수 없는 문제..

안녕하세요. 좋아요요정입니다! 오늘은 자바스크립트에서 사용되는 자기참조 변수 this를 함께 살펴보겠습니다. 함수의 호출되는 방식에 따른 this와 this 바인딩을 함께 살펴보겠습니다. this 키워드 이미 생성자함수, 객체 메서드, 프로토타입 등을 작성하며 자연스럽게 this를 사용했었습니다. 자기참조 변수 this는 전역에서도 사용할 수 있고, 생성자 함수에서도, 객체 메서드에서도 사용되는키워드 입니다. this는 호출하는 대상이 속한 객체, 생성자 함수로 만들어지는 인스턴스를 가리키거나, 본인이 호출되는 상황에 따라서 다 다르게 해석됩니다. 특히 this가 호출되는 컨텍스트에 따라 연결되는 참조값이 동적으로 결정되어 간혹 잘못된 코드를 작성할 수도 있습니다. this가 어디에서 호출될 때 어떻게..

[프로토타입 연장되는 내용입니다.] 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 ..

안녕하세요. 좋아요요정입니다. ES6이전 과거에는 전역 변수가 아닌 변수를 할당하는 방법은 var 키워드를 이용한 선언만 있었습니다. ES6에서는 let과 const가 추가되어 var, let, const 3가지의 선언 방법이 있습니다. 지난 게시글에서는 var와 let으로 변수 선언 시 차이점에 대해서 알아보았습니다. 오늘은 ES6에서 let과 함께 추가된 const 키워드를 알아보겠습니다. const 🎃 const는 constant의 약어로 상수를 의미합니다. 상수란 변하지 않고 항상 같은 값을 가지는 수를 이야기합니다. 수학의 함수를 f(x) = x + 1 생각해보시면 변수와 함께 사용되는 상수값 1이 있죠? 이를 함께 이해해보시면 좋습니다. var만 있던 과거에는 모든 변수를 하나의 키워드로 선언..

안녕하세요. 좋아요요정입니다 다들 이야기합니다. var를 쓰지마세요 등짝스매싱! 그래서 준비했습니다 var 외 않대요? var, let 키워드로 변수를 선언한 상태를 살펴보고, var를 쓰면 안 되는 이유를 이해해보는 시간을 가지겠습니다. var 👻 ES5 이전까지는 var를 사용하여 변수를 선언했다고 합니다. var에게는 자바스크립트를 더욱 다이나믹하게 만들어주는 엄청난 능력이 있었습니다. 1. 변수의 중복 선언 허용 var x = "오렌지꿀주먹"; var x = "오렌지똥주먹"; console.log(x) //"오렌지똥주먹" var 키워드로 선언한 변수는 중복으로 선언이 가능합니다. 사용했던 변수명인 것을 까먹고 다시 선언한다면? 그렇게 시간은 흐르고 흘러 유지보수를 할 때 이전에 사용했던 변수명을 ..

안녕하세요 좋아요요정입니다. 오늘은 "스코프"에 대해 설명해보려 합니다. 스코프는 변수와 함수, 객체들의 생명주기와 접근성 등을 결정하는 아주 중요한 개념입니다. 유효 범위로써 변수와 매개변수가 어디까지 유효한지 나타냅니다. 저는 전역 스코프, 지역 스코프, 전역에서 선언된 변수는 지역에서 접근이 가능하지만, 지역에서 선언된 변수는 전역에서 접근이 불가능하다라는 정의를 통해 이해하고 있었습니다. 콜 스택과 실행 컨텍스트, 스코프, 스코프체인 정의도 알고 개념도 아는데 머릿속에는 두리뭉실하게 인식하고 있었습니다. 오늘은 콜 스택과 실행 컨텍스트, 스코프, 스코프체인을 제대로 잡고 스코프에 대해 다시 한번 정의해보겠습니다. 콜스택 콜 스택(Call Stack)은 메모리 상에 함수의 호출과 연관되는 데이터가 ..