Heavenising

안녕하세요.

'JavaScript 무작정 따라하기' 그 세번째 시간 입니다~ ^^

저번 시간에 말씀드린대로 오늘은 

'Variables (변수)' 에 대한 나머지 부분을 알아보고, 'Functions (함수)' 에 대한 내용도

공부해보려고 합니다.

JavaScripct 를 포함한 모든 프로그래밍 언어에서는 Type 즉, 유형이라는 개념이 있어요.

지난시간 변수 선언 예제에서 각각의 변수들에 지정한 값들을 보면 모두 숫자값(10진수)은 아니었어요.

값들이 꼭 숫자일 필요가 없다는 것인데, 문자형 혹은 문자열, 혹은 True 나 False(맞음 틀림) 와 같은

Boolean type(부울 형식) 의 값들도 저장이 가능하다는 것입니다.

특별히 어려운 개념은 없으니까, 유형 관련 부분에 대한 설명이 나온 부분은 이해를 하고 넘어가면 됩니다.

아래, 다른 프로그래밍 언어들에선 볼 수 없었던 한가지 재미있는 예제가 있네요.

'testVariable' 이라는 변수에 5 라는 Integer (정수) 값을 저장하였는데,

다음 라인에서는 해당 변수에 Jack 이라고 하는 문자열 값으로 업데이트 하였습니다.

타 프로그래밍언어에서 최초 변수 선언 시 지정해주는 type과 같은 개념이 없기 때문에

testVariable 이라는 변수는 숫자값이나 문자열 등의 형식으로 고정되어있지 않다는 거죠.

위 예제처럼 코딩한다고 해서, 결코 JavaScript 가 불평하는 일은 없을거예요.

요 개념을 참고해서 진행하면 되겠습니다.

문자열, 숫자, 부울 형식들과 필요에 의해 관계 맺어지는 두개의 다른 형식들을 함께 나열하는 것에

'array (배열)' 라는 형식과 'object (객체)' 라는 형식이 있습니다.

뒷부분에 좀 더 자세하게 설명하겠지만, 간단하게 설명하자면, '배열' 이란,

본질적으로 여러가지 값들의 목록을 말합니다. 이 값들은 임의의 유형을 가질 수 있고,

위에서 변수에 대해 설명했던 것 처럼 모든 값들이 같은 유형일 필요가 없습니다.

아래 예제와 같이 대괄호 '[' 과 ']' 사이에 값들을 나열하여 배열을 만들 수 있어요.

위 예제에서는 squares 라는 배열과, mixed 라는 배열을 선언한 후 각각의 배열에

다양한 값들을 저장했네요.

특히, mixed 는 문자열과, 일반 정수 외 소수, 부울 형식도 함께 저장되어 있습니다.

이 외 배열에 대해 더 필요한 내용은 잠시 후 살펴보기로 합시다.

다른 형식인 '객체' 는 예제를 들어 좀 더 쉽게 살펴볼 수 있어요.

예를 들어, 응용 프로그램에서 car (자동차)의 컨셉에 대해 얘기해보기로 합시다.

일반적으로 자동차를 설명할 때, 특징을 나타내는 항목들이 정해졌다고 할 수 있죠.

바퀴 수, 색상, 좌석 수, 최대 스피드와 같은 항목들이 예가 될 수 있을텐데,

아래와 같이 각 항목들을 변수로 나열해볼 수 있겠네요.

이 예제처럼, 여러분은 바퀴 수, 색상과 좌석 수, 최대 스피드의 항목 과 같이

4개로 분리된 각각의 변수를 선언해준 후 각각 값을 지정해줄 수 있습니다.

그런데, 만약 'car' 라고하는 하나의 변수 안에

위 예제와 같이 4개로 분리된 변수들 및 해당 값들을 모두 저장할 수 있다고 한다면,

더 쉽지 않을까요?

이것이 바로 '객체' 의 개념이예요. 하나의 변수 안에 여러가지 많은, 또 다양한 정보들을

저장하는 방식이죠.

객체를 사용하여 위의 예제를 아래처럼 간단하게 바궈줄 수 있겠네요.

car 라는 객체를 선언 후,

내부에 각각의 항목 및 해당 항목의 값들을 이렇게 저장해줄 수 있습니다.

이 후 car 라는 변수만 호출하게되면,

내부 모든 정보를 다 가져올 수 있는 매우 유용한 방법인 듯 합니다.

객체 생성 시의 문법은 위 예제에 나온 것과 같이,

지금까지 배워온 문법과는 좀 다르네요.

중괄호 '{' 과 '}' 사이에 원하는 키(key) 와 값(value)를 한쌍씩 작성해주면 되는데,

객체는 속성이기 때문입니다.

키와 값이 한쌍이 된 집합이 속성이 되는데, 각각의 라인 마지막에는 ',' 를 찍어준다는 것을 기억합시다.

객체를 사용하는 것이, 코드를 체계적인 모델로 만드는 훨씬 좋은 방법입니다.

이렇게 객체를 만든 후 객체 내 특성들을 액세스하게 되는데,

아래 예제와 같이 객체 내 특성들에 접근하는 방법에는 두가지가 있죠.

객체 내 특성들에 접근하는 두가지 표기법 중,

보통 대부분의 경우에는 첫번째 표기법인 'car.wheelCount ;' 와 같은 점 표기법을 사용합니다.

다만, 두번째 표기법인 'car["wheelCount"];' 은 키의 이름이 변수에 저장될 때 사용해야합니다.

아래 예제와 같이 키의 이름인 wheelCount 가 변수 keyToGet 의 값으로 저장될 경우,

키 wheelCount 의 값으로 저장된 4라는 값을 가져오기 위해서는 두번째 표기법을 사용해야하는 거죠.

이렇게, 키의 이름이 특정 변수의 값으로 사용되는 예는

그렇게 자주발생하는 상황은 아닙니다.

다만, 이런 상황이 발생할 수 있기 때문에 알아두면 좋겠네요.

이 책의 뒷부분에서 관련 예제를 더 살펴볼 수 있을 것 같구요. 여기까지하고, 넘어가죠.

Functions (함수)

드디어, 함수네요. 함수에 대한 기본 설명을 먼저 해볼께요.

어떠한 코드를 작성했을 때,

현재 작성된 코드 외에 다른 곳에서 동일한 기능을 하는 코드를 한번 더 사용하고 싶을 때가 있을 거예요.

자, 두가지 방법이 있습니다.

'복사 후 붙여넣기' 와 같이 동일한 코드를 복사하여 사용할 수 있을겁니다.

하지만, 이것은 그렇게 좋은 접근 방법은 아니예요.

왜냐하면, 당신이 그 코드와 관련하여 변경하고 싶은 일이 발생했을 때에는

해당 코드들을 복사해서 쓴 만큼 찾아다니며 모두 일일이 수정해줘야하기 때문이죠.

이럴 때, 함수를 작성하는 것이 좋습니다.

함수를 사용함으로써 여러 위치에서 코드를 재 사용하는 것이 가능하며,

코드를 수정해야할 일이 발생할 경우 한 곳만 수정하면 되거든요.

함수를 만드는 것은 매우 간단한 일인데요.

function 이라는 키워드를 사용하여 새로운 함수를 만든다는 것을 라는 것을 표시해줄 수 있습니다.

그리고, 새로운 함수의 이름을 지정해준 후 중괄호 '{' 과 '}' 사이에 원하는 코드를 배치하면 됩니다.

위 예제와 같이,

함수를 표시하는 키워드, 함수이름 그리고, 중활호 내에 원하는 코드를 배치할 수 있습니다.

위 예제의 코드는 화면에 "2"를 표시해주는 함수를 작성한 것인데요.

주의해야할 사항은, 함수 이름인 'alertTwo' 의 뒤에 있는 괄호 '()' 의 내용이 비어있다는 것입니다.

이것은 위에 선언된 함수가 '어떠한 인수도 갖지 않는다' 는 것을 의미합니다.

그런데, 모든 함수가 인수를 갖지 않는 것은 아니예요. 아래 예제처럼 인수(arguments) 나 알림(alerts) 을 갖는 다른 함수를 선언할 수도 있어요.

이 alertSomething 이라는 함수는 함수 안에서 'something' 처럼 참조할 수 있는 변수인 인수를 전달하는 함수 입니다.

이 코드를 브라우저에서 실행할 경우 두개의 알림창이 팝업되게 됩니다.

두개 중 첫번째로 팝업되는 알림창에는 "Jack" 이라는 텍스트가 출력될 것입니다.

그리고, 해당 팝업 창을 닫는 즉시 "2" 라는 숫자가 포함된 다음 알림창이 팝업되게 됩니다.

함수는 2개 이상의 여러 인수들을 가질 수도 있는데요.

이 전의 예제와 같이 이번 함수도 두가지 알림창을 보여줍니다.

예상하시는 바와 같이,

첫번째 알림창에는 "Jack" 이 두번째 알림창에는 "Franklin" 이 포함되어 있어요.

오늘은 함수와 관련된 기본적인 부분을 살펴봤습니다.

다음 시간에는 함수와 관련된 추가적인 부분들을 살펴보고,

'Conditionals (조건문)' 에 대해 배워볼께요.

수고 하셨습니다~~