JavaScript/Javascript 26

유효범위(Scope)

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

정규표현식(but 찍먹)

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

객체(Object)

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

배열(Array)

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

함수(Function)

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

반복문(break, continue, 중첩)

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

반복문(for와 while)

인간은 반복적인 작업을 잘하지 못한다. 하다보면 실수도 하고, 지루해지기 때문이다. 하지만 컴퓨터는 이런 반복적인 작업을 대행하기 위해 만들어진 기계이다. 반복문은 컴퓨터에게 반복적은 작업을 하게 만드는 방법이다. 반복문의 문법에는 크게 while과 for가 있는데 둘다 '~동안' 이라는 의미를 가진 단어이므로 조금 감이 올 것이다. 이번 포스팅에서는 while에 대해 알아보자. 기본적인 형식은 아래와 같다. ▲ 조건문인 if 처럼 browser에게 반복문을 실행할 것임을 알려주기위해 while을 먼저 쓰고 소괄호안에 원하는 조건을 입력한다. 입력한 조건의 값이 true이면 중괄호( '{}' )안의 코드를 반복해서 실행하게 된다. 언제까지? 조건이 false가 될 때까지! ▼ 아래는 실제 반복문 예시이다..

조건문(part. 4)

1. && 우리가 흔히 쓰는 and(=&)를 논리연산자라고 한다. 이를 코드에서 사용할 때는 '&&'처럼 두개를 사용해줘야 and의 기능을 하게된다. 논리 연산자는 조건문을 좀 더 간결하고 다양한 방법으로 구사할 수 있도록 도와준다. (A && B) 라고하면 (A and B)와 같은 내용이며 &&의 양쪽으로 있는 조건이 동시에 만족해야 true가 되는 것이다. 예시를 보면서 알아보자. ▲ 자세한 설명은 주석으로 처리해놓았으니 확대해서 봐주시길 바랍니다. && 논리연산자를 바탕으로 앞선 포스팅에서 간단한 로그인 코드를 좀 더 간결하게 만들어보면 다음과 같다. ▲ id와 password를 사용자에게 입력값을 받아 변수에 대입한 뒤, id와 password가 원하는 값과 각각 다 만족해야 로그인이 되었다고 나..