Mo's Develog

이번 포스팅은 상속수업의 연장선상에 있다. 상속의 구체적인 수단인 prototype에 대해서 구체적으로 알아보자. prototype이란? 한국어로는 '원형', '개발중인 시제품' 등의 뜻이 있는데 여기서는 원형이 조금 더 가깝다고 생각한다. 말 그대로 객체의 원형이라고 할 수 있다. 함수는 객체다. 객체는 속성(property)를 가질 수 있는데 prototype이라는 property는 그 용도가 약속되어 있는 특수한 property이다. prototype을 이용하여 저장된 속성들은 생성자를 통해서 객체가 생성될 때 그 객체와 연결된다. ▲ 결과는 true가 된다. 어떻게 true가 되는 것이냐? 생성자 Sub를 통해서 만들어진 객체 o가 Ultra의 property ultraProp에 접근 가능한 것은..

상속은 '자식이 부모로부터 상속받는다' 라고 할 때의 그 상속이다. A라는 객체가 a라는 기능을 가지고 있는데 그것을 B라는 객체도 사용할 수 있도록 a라는 기능을 상속해준다는 개념이다. 또한 단순히 물려받는 것 뿐만이 아니라 새로운 기능을 추가도 할 수 있따. 예제를 보자. ▲ 위의 코드를 상속을 위한 코드로 아래처럼 바꿔보자. ▲ 12행과 13행에서 Person.prototype이라는 객체를 만들고 객체 안에 name과 introduce라는 property를 생성하고 각각의 메소드도 생성한 것이다. 20행의 코드가 상속을 시키는 코드이다. 상속하는 부모인 person앞에 new를 붙여 생성자를 만들고, 상속을 받은 programmer.prototype을 통해 person.prototype의 기능을 사..

this는 함수 내에서 함수 호출 맥락(context)을 의미한다. 우리가 흔히 말하는 '맥락에 따라서~'라고 할 때 그 맥락이다. 즉, 상황에 따라서 달라진다는 의미인데 함수를 어떤방식으로 호출하느냐에 따라서 this가 가리키는 대상이 달라진다는 뜻이다. ▲ 위 예제에서 기본적인 함수를 만들었다. 그 안에서 this가 가르키는 것은 window이므로 조건이 true가 된다. ( => 기본함수에서 this가 가르키는 것은 func앞에 생략되어 있는 window를 가리킨다. ) ▲ o라는 객체를 생성했고 객체의 메소드로 함수를 지정했다. 예제처럼 객체 안에있는 메소드의 this는 그 객체를 가리킨다. 즉 여기서 this가 가리키는 것은 객체 o 이다. ▲ 15행에서 함수를 호출했을 때의 this는 wind..

객체(Object)란 서로 연관된 변수와 함수를 그룹핑한 서랍 또는 상자라고 할 수 있다. 객체 내의 변수를 속성(property), 함수를 메소드(method)라고 부른다. 객체를 만들어보자. ▲ 객체를 만들긴 했지만 분산되어 있다. 객체를 정의할 때 값을 셋팅하도록 코드를 바꿔보면 아래와 같다. ▲ 하지만 여전히 문제가 있다. 만약 다른사람의 이름을 추가할 때는 다시 객체의 정의를 반복해야 한다. 우리는 재활용할 수 있는 방법이 필요하다. 이럴 때 우리가 이용하는 것이 바로 '생성자'이다. 생성자(Constructor)는 객체를 만드는 역할을 하는 함수이다. JS에서 함수는 재사용 가능한 로직의 묶음이 아니라 객체를 만드는 창조자라고 할 수 있다. ▲ 10행에서 person은 단순 함수였지만, 11행..

우리가 알고 있는 기본적인 함수의 호출 방법은 아래와 같다. 하지만 JS는 함수를 호출하는 또다른 특별한 방법을 제공한다. 함수는 기본적으로 객체이다. 때문에 위의 예제에서 함수 func는 Function이라는 객체의 인스턴트이다. 따라서 func는 객체 Function이 가지고 있는 메소드들을 상속하고 있는 것이다. 지금부터 알아볼 함수를 호출하는 다른 방법은 함수의 메소드를 이용한 방법이다. Function.apply에서 Function바로 뒤에 찍히는 점 뒤에는 수많은 기능들이 올 수 있는데 이러한 기능들을 메소드라고 한다. 그중에서도 apply 메소드에 대해서 알아보자. ▲ 기본적인 합계 함수를 생성하고 사용하면 다음과 같이 결과값이 나온다. 같은 결과값을 얻을 수 있는 방법은 apply를 사용하..

클로저(Closure)는 내부함수가 외부함수의 맥락(contex)에 접근할 수 있는 것을 가르킨다. 클로저는 JS를 이용한 고난이도 테크닉을 구사하는데 필수적인 개념으로 활용된다. 먼저 내부함수와 외부함수의 개념을 간단히 집고 클로저를 알아보자. JS는 함수 안에서 또 다른 함수를 선언할 수 있다. 아래의 예제를 보자. ▲ 결과는 경고창에 JavaScript가 출력될 것이다. 위의 예제에서 함수 outter의 내부에는 함수 inner가 정의 되어 있따. 함수 inner를 여기서 '내부 함수'라고 한다. 함수 outter는 함수 inner의 입장에서 '외부 함수'가 되는 것이다. 그렇다면 예제를 아래와 같이 바꾸면 어떻게 될까? ▲ 변수 title을 함수 inner에서 함수 outter의 변수로 빼내었다...

앞선 비동기 처리 포스팅에서 비동기 처리가 무엇인지 비동기 처리 방식에 의해 생길 수 있는 문제들을 보았다. 이러한 문제들을 해결하기 위해 우리는 콜백(Callback) 함수를 이용 할 수 있다. ▲ 위 비동기 처리만으로 작성했던 코드를 콜백함수로 개선해보면 아래와 같다. ▲ 이렇게 콜백 함수를 사용하면 특정 코드(로직)이 끝났을 때 원하는 동작을 실행시킬 수 있게 된다. 콜백 함수의 동작 방식은 일종의 식당 자리 예약과 같다. 일반적으로 맛집을 가면 사람이 많아 자리가 없다. 그래서 대기자 명단에 이름을 쓴 다음에 자리가 날 때까지 주변 식당을 돌아다니게 된다. 만약 식당에서 자리가 생기면 전화로 자리가 났다고 연락이 온다. 그 전화를 받는 시점이 여기서의 콜백 함수가 호출되는 시점과 같다. 손님 입장..

비동기 처리란? JavaScript에서 특정 코드의 실행이 끝날 때까지 다른 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 것을 말한다. 바로 예제를 보면서 이해해보자. 비동기 처리의 가장 대표적인(?) 예시는 jQuery의 Ajax이다. jQuery로 실제 개발할 때 Ajax 통신은 빠질 수 없기 때문이다. 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데, 이때 Ajax통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다. 그럼 Ajax 예시를 먼저 보자. ▲ 우선 $.get()은 Ajax 통신을 하는 부분이다. ~~~~~~~~~ 에다가 HTTP GET요청을 보내서 product1정보를 요청하는 코드인 것이다. 쉽게말해 지정된 URL에 ' 이러한 데이터를 하나 보내주세요'라..

객체는 배열과 정~말 비슷한 개념이다. 하지만 중요한 차이점이 있는데... 배열(Array)는 배열 안의 데이터에 대한 index로 숫자를 사용했다. 배열에서는 index가 무조건 숫자로 고정되어 있다. 하지만 객체(Object)에서는 index로 숫자뿐만 아니라 원하는 문자로 index를 만들 수 있다. 그리고 이 index로 원하는 데이터를 호출 할 수 있게되는 것이고, 이것이 우리가 가장 시각적으로 확인할 수 있는 차이점이다. 다른 언어에서도 같은 개념을 사용하고 있는데 연관배열(associative array), 맵(map) 또는 딕셔너리(Dictionary)이다. 객체를 만드는 문법을 알아보자. ▲ 보다시피 변수를 생성하는 방법으로 시작하는 것은 같지만 중괄호( { } )를 사용하여 안에 내용을..

for문은 while문을 조금 더 압축해서 코드를 짤 수 있다는 장점이 있다. 하지만 뭐가 더 좋다고는 말할 수 없고 상황에 따라 for문 또는 while문을 사용하면 된다. for문의 문법(?)은 아래와 같다. ▲ 보다시피 while문은 소괄호안에 조건만 입력되는 반면, for문은 '초기화(=변수 선언)', '조건', '반복될 때마다 실행할 코드'순으로 입력을 하고 마지막으로 중괄호 안에 '반복해서 실행할 코드'를 입력해야 한다. (이때 마지막 '반복될 때마다 실행되는 코드 뒤에는 세미콜론(;)을 붙이지 않는다!) ▲ 위의 while문을 for문을 바꾼다면 아래와 같다. (while문을 모른다면 앞선 포스팅 반복문(while)편을 참고바란다) ▲ i++는 'i = i +1' 을 좀 더 간결하게 압축한 ..