Mo's Develog

함수에서 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)은 여러 개의 데이터를 하나의 변수에 저장하기 위한 것이라고 할 수 있다. 변수는 하나의 데이터만 저장 / 배열은 여러개의 데이터를 하나의 키워드에 저장하는 것이 가장 큰 차이점이다! ▲ 변수를 사용해서 데이터를 저장하고 호출하는 방법 ▲ 배열을 이용하여 데이터들을 한번에 모아서 하나의 키워드에 저장하고 호출 방법 변수를 지정하는 방법과 호출하는 방법은 배열을 지정하는 방법과 호출하는 방법과 다르다는 것을 볼 수 있다. 배열은 대괄호( [ ] )를 사용하여 데이터들을 모으고, 출력할 때에도 '배열[ ]' 과 같은 형태로 출력한다. ..

함수(function)이란? 우리가 수학에서 얘기하는 함수랑 같은 개념이다. 하지만 수학적 지식이 필요한 것은 아니니 걱정하지 말자. 함수란 하나의 로직을 재실행 할 수 있도록 하는 것으로 코드의 재사용성을 높여준다. 여기서 포인트는 '재사용'이다. 우선 함수의 문법(형식)을 알아보자 ▲ 앞서 조건문, 반복문 때와 마찬가지로 browser에게 함수를 사용한다고 알려주어야 하므로 function을 입력한다. function 뒤에는 자신이 이 함수를 뭐라고 정의할 것인지 함수의 이름을 지어주면 된다. 그리고는 소괄호가 나오고 중괄호가 나오는 순서이고 인자는 아래에서 자세히 설명하도록 하고 중괄호 안에는 이 함수를 사용하였을 때 출력되게 하고 싶은 코드를 적어주면 된다. return은 예시이며 꼭 return..

만약 반복문의 반복작업을 중단시키고 싶다면 어떻게 해야할까? 바로 break라는 요소를 사용하면 된다. ▲ for문의 반복조건은 변수 i 에 반복문이 실행될 때마다 1씩 증가하며, i가 10보다 작을 때 까지만 실행된다. 이후 반복이 실행되면서 변수 i 가 1씩 증가하다 5가 되었을 때, for문 안에 있는 if문의 조건과 일치하게 되고 if의 조건이 true가 되면서 if문안의 코드가 실행된다. 반복문 안의 break가 실행되면 반복문을 즉시 종료시키게 된다. 따라서 i = 5부터 9까지의 반복문 코드는 실행조차 되지 않는다. ▲ 결과적으로 위와 같은 값이 출력된다. 그렇다면 실행을 즉시 중단하면서 나머지 반복은 계속되게 하려면 어떻게 해야할까? 이럴땐 continue를 사용하면 된다. 바로 예제를 보..