mystery

1. 함수의 prototype 프로퍼티와 인스턴스의 특징 생성자 함수를 사용해 객체를 생성했을 때와 리터럴 방식으로 객체를 생성했을 때 프로토타입의 동작 방식이 다릅니다. 생성자 함수의 new 연산자로 만든 객체(인스턴스)의 [[Prototype]] 은 생성자 함수의 prototype 프로퍼티를 참조합니다. prototype은 생성자 함수의(F)의 '일반 프로퍼티'입니다. (ex. F.prototype) let animal = { walk: true, } function Human(name) { this.name = name } Human.prototype = animal let human1 = new Human('Bob') console.log(human1.walk) // true 위 코드에서 Huma..

기존의 있는 기능을 가져와 확장하고 싶을 때, 자바스크립트 고유 기능인 프로토타입 상속을 사용할 수 있습니다! 1. [[Prototype]] 자바스크립트의 객체는 [[Prototype]] 이라는 숨김 프로퍼티를 갖습니다. 이 숨김 프로퍼티 값은 null 혹은 다른 객체에 대한 참조입니다. 이때 다른 객체를 참조하는 경우, 참조 대상을 프로토타입이라고 부릅니다. 객체에서 프로퍼티를 읽으려고 할 때, 프로퍼티가 없다면, 자바스크립트는 자동으로 프로토타입 객체에서 프로퍼티를 찾습니다. 이런 동작 방식을 '프로토타입 상속' 이라고 부릅니다. [[Prototype]] 프로퍼티는 내부 숨김 프로퍼티이지만 개발자가 값을 설정할 수 있습니다. __proto__를 사용하면 객체의 프로토타입을 설정할 수 있습니다. let..

오늘은 useRef를 알아보겠습니다잇! 1. 사용하게 된 계기 1-1. 무엇을 만드려고 했는가? 위에 보이는 것과 같이 signUp component를 구현하면서 있었던 일입니다! 사용자가 input을 입력하지 않고 건너뛰었을 때, 혹은 양식을 지키지 않았을때 등을 에러 상태라고 가정하고, onBlur시 각 에러에 해당하는 상황이라면 에러에 해당하는 에러 메세지를 보여주면서 에러의 타입과는 상관없이 모든 에러에는 경고를 위한 style을 적용하고 싶었습니다! 그래서... 에러상태에 보여줄 style은 미리 만들어 두고, 각 form에 해당하는 DOM을 선택해서 classList에 '.errored' 라는 class명을 추가시켜 동작시키려고 했습니다! 2. useRef로 DOM 선택하기! 2-1. 사용법 ..

1. 구조 분해 할당 개발을 하다 보면 함수에 객체, 배열을 전달해야 할 경우가 있습니다. 객체, 배열에 저장된 데이터 전체가 아닌 일부만 필요한 경우도 생깁니다. 이럴 때 객체, 배열을 변수로 분해 할 수 있게 해주는 구조 분해 할당을 사용 할 수 있습니다! 2. 배열 분해 2-1. 기본 문법 let arr = ['Do hyeon','Lee'] let [firstName, lastName] = arr console.log(firstName) // Do hyeon console.log(lastName) // Lee 구조 분해 할당을 이용하면 인덱스로 배열에 접근하지 않아도 됩니다! 2-2. 배열을 리턴한다면 무엇이든지 let [firstName, lastName] = 'Dohyeon Lee'.split(..

1. Execution Context (실행 컨텍스트) 란? scope, hoisting, this, function, closure 등의 동작 원리를 담고있는 자바스크립트의 핵심 원리입니다. 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있습니다. 자바스크립트 엔진에 의해 실행 컨텍스트 내부에는 코드 실행에 필요한 정보들이 저장됩니다. 2. 실행 컨텍스트 생성, 삭제 과정 아래 코드는 실행 컨텍스트의 생성과 삭제 과정을 잘 표현해 주는 코드입니다. var x = 'xxx'; function foo () { var y = 'yyy'; function bar () { var z = 'zzz'; console.log(x + y + z); } bar(); } foo(); 코드의 실행 과정을 실행..

☠ 과연 정확히 알고 있는가? ☠ 구글 검색창에 Call by value, Call by reference를 검색하면 많은 자료들이 Call by value 함수 호출시 전달받은 인자가 원시 타입이면? 원본 값을 그대로 복사하여 매개변수로 전달합니다! 원본 값이 함수의 영향 받지 않습니다! Call by reference 함수 호출시 전달받은 인자가 참조 타입이면? 인자의 메모리 주소값(참조)을 매개변수로 전달합니다! 원본 값이 함수의 영향을 받습니다! 라고 설명하고 있습니다. 처음 Call by XXX 키워드를 검색해서 공부할 때 원시 타입, 참조 타입에 대한 값 복사 시 각각 어떤 차이가 있는지에 대해 이미 공부한 뒤여서 비슷한 내용이라고 생각했고 그다지 어렵지 않다고 생각해 차이점만 인지하고 넘어갔..

객체는 키가 있는 컬렉션을 저장합니다. 배열은 순서가 있는 컬렉션을 저장합니다. 위 2개의 자료구조 만으론 부족해서 Map과 Set이 등장했습니다! Map Map은 키가 있는 데이터를 저장한다는 점에서 객체와 유사합니다. 다만 Map은 키에 다양한 자료형을 허용합니다. Map에는 다음과 같은 주요 메서드와 프로퍼티가 있습니다! new Map( [iterable] ) - Map을 만듭니다. [key, value] 쌍이 있는 iterable 객체를 선택적으로 넘길 수 있습니다. map.set( key, value ) - key를 이용해 value를 저장하고 map 자신을 리턴합니다. map.get( key ) - key에 해당하는 값을 리턴합니다, key가 존재하지 않으면 undefined를 리턴합니다. m..

iterable 객체 iterable 객체는 배열을 일반화한 객체입니다! iterable 개념을 사용하면 어떤 객체에든 for..of문을 사용할 수 있습니다. 배열은 대표적인 이터러블이고, 문자열 역시 이터러블의 예입니다! 배열 외에도 다수의 내장 객체가 이터러블입니다. Symbol.iterator let range = { from: 1, to: 5 }; 위와 같은 객체가 있습니다. 1부터 5까지의 간격을 나타내고 있죠. 위 객체에 for... of 문을 사용하면 다음과 같은 에러 메세지가 나타납니다. 위 range객체를 iterable로 만들려면 ( for..of 사용 가능한 상태 ) 객체에 Symbol.iterator 라는 메서드를 추가해야 합니다. 메서드 추가 후 for ...of 문을 사용하면 다..

배열에는 다양한 메서드가 있습니다. 요소 추가,제거 method splice arr.splice ( index [ , 삭제를 원하는 요소의 갯수 , 추가할 요소, ...... , 추가할 요소N ] ) 배열에서 원하는 인덱스로 부터 원하는 요소의 갯수만큼 삭제하고 삭제한 요소로 이루어진 배열을 리턴합니다. 제거와 동시에 해당 공간에 다른 요소를 추가 할 수도 있습니다! 원하는 요소의 갯수를 0으로 입력하면 요소의 제거없이 추가만 할 수 있습니다. let arr = [1 , 2, 3, 4, 5, 6] let spliceElement = arr.splice(0,3) console.log(spliceElement) // [1 ,2, 3] 제거한 요소를 배열로 반환하는 splice() let arr = [1, 2..

개발을 진행하다 보면 순서가 있는 컬렉션이 필요할 때가 있습니다! 객체를 사용하면 순서와 관련된 메소드가 없어 편리하지 않습니다. 객체는 태생이 순서를 고려하지 않고 만들어진 자료구조이기 때문에, 새로운 프로퍼티를 생성해 기존 프로퍼티 사이에 끼워넣는 행동도 불가능 합니다. 이럴 때! 배열을 사용합니다. 배열 기초 배열 요소의 자료형에는 제약이 없습니다! let friend = ['도현' , { 친구1 : '태훈'}, '재원', '태오'] console.log(friend[1].친구1) // 태훈 Array에 object를 넣을 수도 있다! 큐( queue )와 스택( stack ) 큐 큐는 먼저 집어넣은 요소가 먼저 나오게 되어있는 자료구조 입니다. 이와 같은 구조를 선입선출 ( First-In-Fir..