키다리 개발자

호이스팅(Hoisting)의 개념 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 1. 파일 전체의 코드를 모두 읽습니다. 2. 파일 전체에서 함수와 변수를 전부 추출합니다. 3. 함수와 변수를 최상단으로 올려서 실행시킵니다. > 여기서 우선순위는 변수가 최상단, 함수가 그 밑입니다.. 실질적으로 코드의 위치를 바꾸는게 아닙니다. 메모리 상에서, 코드를 전부 읽어서 메모리 상의 위치를 바꾸는것 입니다. 결과값 : 100 변수를 최상단에 올려도 결과값은 100이 출력이 됩니다.

apply와 call 메서드 Function 객체의 메서드에는 apply와 call이 있습니다. this 값과 함수의 인수를 사용하여 함수를 실행하는 메서드입니다. apply와 call의 동작은 본질적으로는 같습니다. 차이점은 함수에 인수를 넘기는 방법 뿐인데, apply의 인수는 배열이고 call의 인수는 쉼표로 구분한 값의 목록입니다. 이처럼 apply와 call 메서드의 첫 번째 인수는 함수의 this 값 입니다. apply 메서드의 두번째 인수는 함수의 인수를 순서대로 담은 배열이며, 실제 배열 객체 대신 유사 배열 객체를 넘겨도 동작합니다. 예를 들어 현재 실행 중인 함수의 arguments를 apply 메서드에 넘겨도 실행할 수 있습니다. call 메서드의 두 번째 이후 인수는 함수의 인수 목..

자바스크립트는 프로토타입 기반 객체 지향 언어라고 표현한다. 그렇다면 대체 프로토타입은 무엇을 의미하는걸까? 프로토타입은 함수가 만들어지면 생성되는 객체 원형(원본)을 보존하기 위한 객체 prototype = 원형(원본) 가장 중요한 부분은 원형을 유지한다. 자바스크립트는 클래스라는 개념이 없다. 그래서 기존의 객체를 복사해서 새로운 객체를 생성하는 프로토타입 기반의 언어이다. 이는 객체 원형인 프로토타입을 이용하여 새로운 객체를 만들어낸다. 이렇게 생성된 객체는 다른 객체의 원형이 될 수 있다. function person() { person.prototype.stature = 172; person.prototype.weight = 70; person.prototype.name = "anonymous"..

브라우저 콘솔을 켜고, this를 치면 window가 나옵니다. 함수 내에 넣어서 사용해도 this는 window 입니다. this는 기본적으로 window라는 사실을 알 수 있습니다. 객체 메서드 a 안의 this는 객체를 가리키고 있습니다. 이것은 객체의 메서드를 호출할때 this를 내부적으로 바꿔주기 때문입니다. 호출하는 함수가 객체의 메서드인지 그냥 함수인지가 중요한데, a2는 object.a를 꺼내온 것이기 때문에 더이상 object의 메서드가 아닙니다. 그래서 window가 출력됩니다. 또한 this를 내부적으로 바꿔주기 위해 생성자 함수(=함수)를 만들어 this를 바꾸어 주어 사용할 수 있습니다. 생성자 함수를 만들때 new로 호출을 해야하는데 그렇지 않으면 기본값인 window를 가르키기..

객체 지향 프로그래밍이란? (OOP) 객체 지향 프로그래밍은 현실 세계를 컴퓨터 프로그래밍으로 사고를 하는 패러다임중 하나이다. 프로그래밍에서 필요한 데이터를 추상화하여 상태(state)와 행위(behave)를 가진 객체를 만들고 그 객체들 간의 상호작용을 통하여 프로그래밍 하는 방법이다. 즉 인간 중심적 프로그래밍이라고 볼 수 있다. 장점 ▶코드 재사용 용이 자주 사용되는 라이브러리를 만들어 두면 혹은 남이 만든 라이브러리를 가져와서 이용할 수 있고 상속을 통해 확장해서 사용할 수 있다. ▶유지보수가 쉬움 (중복 소스 관리 및 디버그) 절차 지향 프로그래밍에서는 코드를 수정해야할 때 일일이 찾아 수정해야하는 반면 객체 지향 프로그래밍에서는 수정해야 할 부분이 클래스 내부에 멤버 변수 혹은 메서드로 있기..

filter(value, index) filter 함수는 반환 값이 true인 대상만 필터링해서 새로운 배열로 반환한다. value = 배열 안의 요소 하나하나의 값 -> 여기서(사진)는 1, 2, 3, 4, 5 index = 순서 -> 이 데이터가 몇 번째 데이터인가? value 값에서 2에서 4까지 숫자만 남기고 새로운 배열을 반환하고 싶을때 새로운 배열 [ 2, 3, 4 ] 예시) 배열에서 Premium 요소가 true인 요소들만 필터링해서 가져오기 Premium 회원들만 필터링해서 출력할 수 있다. map(value, index) 모든 요소에 적용될 공통 form에 반환 값을 적용하여 새로운 배열을 반환한다. arr 배열 내 모든 숫자에 value + 5를 반환하여 새로운 배열인 [ 6, 7, 8..

ECMA Script 1999년 ES3이 공개될 때, 여러 웹 브라우저들의 표준이 난립하는 상황이었다. 예를 들어, Internet Explorer에서는 작동하는 기능이 Firefox에서는 동작하지 않았기 때문에 어느 브라우저를 사용하던 원활하게 동작하는 Javascript를 확보하는 것이 큰 고민이었다. 2009년부터 ES5가 공개된 후로부터는 차차 개발되어, 각 브라우저 간 호환성을 확보하기 위해 ECMA Script 표준을 구현하기 시작했다. 2015년 ES2015 (ES6) 부터는 엄청나게 많은 문법과 기능이 추가되고 구동환경이 많아졌다. 하지만 빠르게 발전하는 언어로 인해 최신 버전의 Javascript를 지원하지 않는 브라우저는 항상 존재하거나, 브라우저마다 업데이트 주기 및 지원하는 기능이 ..

문서 객체 모델(DOM) 문서 객체 모델(DOM, Document Object Model)은 HTML 문서를 객체화한 것입니다. (인터페이스) 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공합니다. 이러한 DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현됩니다. Javascript에서 HTML을 가져오기 위해 만든것이 DOM이다. 그러므로 Javascript는 DOM을 이용하여 새로운 HTML / 기존의 HTML의 요소를 생성, 변경, 삭제를 할 수 있다. API (Application Programming InterFace) API = 다른 사람이 자신의 소스를 쉽게 사용할 수 있도록 함수를 만들어 놓은 것 HTML 요소와 관련된 작업을 도와주는..