일반적으로 함수를 만들때는 하나의 기능을, 단 하나의 함수만 작성하는 것이 좋은 프로그래밍 방법이다. 하지만 어떤 경우에는 이것이 가독성을 해치기도 한다. 기능별로 하나의 함수만 만든다는 것은 그 함수의 output이 다른 함수의 input이 된다는 것을 의미한다. 따라서 코드를 볼 때 거꾸로 타고 계속 올라가야 한다. 많은 사람들이 이런 경우를 경험해 보았을 것이다. 이럴 때 좋은 방법이 Method Chaining Pattern이다. Method Cahining Pattern Method Cahining Pattern은 자기 자신의 객체를 return하여, 계속 그 객체의 함수를 사용할 수 있게 한다. function solution(n) { return parseInt(String(n).split(..
옵셔널 체이닝(Optioinal Chaining) 옵셔널 체이닝은 ?.을 사용한다. const name = person?.name 좌항(person)이 undefined나 null이면 좌항(person)을 반환하고, 그렇지 않으면 우항(person.name)을 반환한다. 옵셔널 체이닝이 도입되기 전에는 && 연산자를 사용했다. &&연산자 const name = person && person.name &&연산자는 좌항(person)이 falsey값이면(0, -0, '', null, undefined, false, NaN) 좌항(person)을 반환하고, 그렇지 않으면 우항(person.name)을 반환한다. &&연산자는 falsy값이 조건이지만, 옵셔널 체이닝은 undefined나 null인 경우가 조건 ..
목적 배경지식 Person이라는 객체를 상속받아 Student라는 객체를 만들려고 한다. 상속을 공부하려면 프로토타입과 프로토타입 체이닝에 대한 이해가 있어야 한다. https://wouldyou.tistory.com/30 [javascript] 프로토타입 체이닝이란? 결론 프로토타입 체이닝이란, 자신에게서 먼저 프로퍼티를 찾고 없으면, [[prototype]]링크가 가리키는 객체에서 찾는 것을 말한다. [[prototype]]링크가 가리키는 객체에도 없으면 그 객체의 [[prototype] wouldyou.tistory.com javascript의 상속 javascript에서의 상속은 [[prototype]]의 연결로(프로토타입체이닝) 구현된다. 아래와 같이 Person과 Student객체가 있다. 우..
결론 프로토타입 체이닝이란, 자신에게서 먼저 프로퍼티를 찾고 없으면, [[prototype]]링크가 가리키는 객체에서 찾는 것을 말한다. [[prototype]]링크가 가리키는 객체에도 없으면 그 객체의 [[prototype]]링크가 가리키는 객체에서 찾는 것을 반복하기 때문에 체이닝이라는 표현을 쓴다. javascript는 프로토타입 체이닝을 통해 부모의 메소드와 속성에 접근 할 수 있도록 한다. const obj = { a : "", b : "" }; if(obj.hasOwnProperty("c")){ obj.c = "c"; } console.log(obj); // obj에는 c라는 속성이 없으므로 obj는 바뀌지 않는다. 이 코드는 obj라는 객체에 있는 hasOwnProperty라는 메소드에 접근..
프로토타입 JavaScript는 프로토타입 기반 언어(prototype-based language)이다. 프로토 타입 기반 언어라는 것은 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체(prototype object)를 가진다는 의미이다. [[prototype]] 링크 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체를 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. ECMA Script에서는 이러한 링크를 implicit prototype link(암묵적 프로토타입 링크)라고 부른다. 이 링크를 [[prototype]]이라고 표현한다. prototype 모든 객체는 자신을 생성한 생성자 함수의 prototype 프로퍼티가 가리키는 객체를 자신의 [[prototyp..
사전지식 function ghost() { this.name = "유령" this.getName = function () { return this.name; } } g = new ghost(); //ghost 객체 g를 생성 // console.log(g); 위와 같은 코드를 작성하면 new를 통해 ghost객체를 생성할 수 있다. 그러나 이렇게 코드를 작성하면 new를 통해 ghost객체를 생성할 때마다 this.getName이라는 함수를 계속 만들기 때문에 메모리를 많이 잡아먹을 수 있다. 이를 해결하기 위해 this.getName을 prototype을 이용하여 부모에게 넘긴다. function Ghost(){ this.name = "유령"; } Ghost.prototype.getName = func..
const obj = { 1:사과, 2:배, 3:바나나 } number = 1; //오류 obj.number; //undefiend //원인 //obj.1로 접근한 것과 같기 때문, 1을 숫자로 인식 //해결 obj[number.toString()]; // 문자로 바꿔줌 // 사과 //비슷한 예 find-number = 1; obj.find-number; //오류 -를 minus로 인식 //해결 obj[find-number]; //사과 javascript에서 object에 접근할 때 obj.1 처럼 숫자로 접근할 수 없습니다. 따라서 obj.number로 접근시 number = 1이라면 undefined로 오류가 납니다. 비슷하게 obj.find-number의 형식도 오류가 납니다. -를 minus로 인..
클로저 개념은 여기를 참고해주세요 https://wouldyou.tistory.com/15 JavaScript closure 개념 일단 읽어보시면 좋을 것 같습니다! https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures 클로저 - JavaScript | MDN 클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 클로저를 이해하려면 자.. wouldyou.tistory.com MDN예제를 보다가 막히는 부분을 적어봅니다 function countSeconds(howMany) { for (var i = 1; i
