Mo's Develog

표준 내장 객체(Standard Built-in Object)는 JS가 기본적으로 가지고 있는 객체들을 의미한다. 내장 객체가 중요한 이유는 프로그래밍을 하는데 기본적으로 필요한 도구들이기 때문이다. 결국 우리는 이 내장 객체들을 이용하여서 새로운 객체를 만들고 이를 통해서 새로운 소프트웨어를 만들어 내기 때문에 더욱이 중요하다고 할 수 있다. JavaScript는 그렇게 많지 않은 내장 객체들을 가지고 있는데 다음과 같다. Object Function Array String Boolean Number Math Date RegExp 우리는 이 객체들의 기능을 확장해볼 수도 있다. 배열(Array)의 기능을 확장시켜보자. ▲ new생성자를 이용해 Array라는 새로운 객체를 만들고 우리는 그 객체안의 데이..

이번 포스팅은 상속수업의 연장선상에 있다. 상속의 구체적인 수단인 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를 사용하..

함수에서 arguments는 배열과 유사한 기능을 가지고 있다. 바로 예제를 보자. ▲ 함수 sum은 인자로 전달된 값을 모두 더해서 리턴하는 함수이다. 그런데 첫행을 보다시피 우리는 함수 sum의 소괄호 안에 매개변수(Parameter)를 지정해주지 않았다. 하지막 마지막행에서 4개의 인자를 함수 sum으로 전달하고 있다. 함수의 정의부분에서 매개변수를 정하지도 않았는데 인자를 어떻게 전달할 수 있었을까? 바로 arguments라는 특수한 배열이 있기 때문이다. arguments는 함수안에서 사용할 수 있도록 그 이름이나 특성이 약속되어 있는 일종의 배열이다. 예로 arguments[0]는 함수로 전달된 첫번째 인자를 알아낼 수 있다. arguments.length처럼 arguments를 사용함으로써 ..

클로저(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에 ' 이러한 데이터를 하나 보내주세요'라..