Mo's Develog

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

유효범위는 변수의 유효범위를 의미한다. 함수 밖에서 변수를 선언하면 그 변수는 '전역변수(Global variable)'이 되고, 함수 내에서 변수를 선언하면 그 변수는 '지역변수(Local variable)'이 된다. 아래의 예제를 보면서 이해해보자. ▲ 함수밖에서 변수 vscope을 global로 선언하였다. 따라서 변수 vscope은 '전역변수'가 되고 함수를 호출하면 전역변수인 vscope의 값이 출력된다. ▲ 첫 줄에서 vscope = global로 변수선언을 하였다. 그리고 함수를 선언하면서 내부에서 같은 이름의 변수 vscope의 값으로 local을 선언하였다. 같은 이름의 변수가 각각 다른 값으로 선언된 것이다. 함수 fscope을 실행하면 함수를 실행한 것이므로 함수 내에서 선언된 변수값..

이번 포스팅에서는 정규표현식(Regular expression)을 알아볼...건 아니고 맛만 보려고 한다. 왜냐면 정규표현식을 조금 깊이가 있기때문에 따로 공부를 더 해야하기 때문이다. 따라서 기본적인 정규표현식만 살펴보자. 정규표현식은 문자열에서 특정한 문자를 찾아내는 도구다. 이 도구를 이용하면 수십줄이 필요한 작업을 한줄로 끝낼 수 있다. 정규표현식의 기능은 크게 3가지로 나눌 수 있다. 1. 어떤 문자열에서 내가 찾고자 하는 문자열을 추출하는 것. 2. 어떤 문자열에서 내가 찾고자 하는 문자열이 존재하는지 test하는 것(추출은 하지 않는다.) 3. 어떤 문자열에서 내가 찾고자 하는 문자를 찾아서 다른 문자열로 치환하는 것. 정규표현식은 두 단계로 이루어진다. 하나는 컴파일(complie)이고 다..

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

배열(array)이란 연관된 데이터를 모아서 통으로 관리하기 위해서 사용하는 데이터 타입이다. 변수(Variable)가 하나의 데이터를 저장하기 위한 것이라면 배열(Array)은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 변수는 하나의 데이터만 저장 / 배열은 여러개의 데이터를 하나의 키워드에 저장하는 것이 가장 큰 차이점이다! ▲ 변수를 사용해서 데이터를 저장하고 호출하는 방법 ▲ 배열을 이용하여 데이터들을 한번에 모아서 하나의 키워드에 저장하고 호출 방법 변수를 지정하는 방법과 호출하는 방법은 배열을 지정하는 방법과 호출하는 방법과 다르다는 것을 볼 수 있다. 배열은 대괄호( [ ] )를 사용하여 데이터들을 모으고, 출력할 때에도 '배열[ ]' 과 같은 형태로 출력한다. ..