Heavenising

안녕하세요~

지난시간에 이어 Functions (함수) 에 대해 좀 더 알아봅시다.

jQuery 개발에서는 함수에 전달할 때, 

여러개의 변수들로 전달하는 상황 보다 하나의 object (객체) 로 전달하는 상황이 매우 자주 이루어집니다.

(여러개의 변수로 나눠 전달하는 것 보다, 객체 형태로 전달하는 상황이 훨씬 많다는 뜻)

그 이유는 함수를 호출하고, 여러개의 인자들을 전달하는 것은 복잡함으로 인해 혼란을 줄 수 있기 때문인데,

아래의 예 처럼 다양하고 많은 인자를 한번에 전달하고자할 경우 혼란을 줄 수 있습니다.

그래서, jQuery 개발에서 광범위하게 사용되는 많은 플러그인들이 함수에 전달할 때,

객체의 타입으로 전달합니다.

예를 들어서, 3개나 4개 혹은 위의 예제처럼 더 많은 인수들을 갖는 함수를 선언한다고할 때

코드를 작성한다면 아마 다음과 같은 객체의 형태로 작성할 수 있을겁니다.

이 코드를 실행하면,

3개의 알림창을 통해 Jack 이라는 변수에 객체의 형태로 저장되어있는 각 속성들을 확인할 수 있습니다.

위 예제에 나온 내용은 jQuery 작성 시 광범위하게 이용되는 패턴이라고 하네요.

그래서, 여기 작성된 코드가 어떤 내용인지를 확실히 이해하고 넘어가야 합니다.

함수에서 한번에 많은 인수를 전달하는 것을 피하기 위해

개발자들은 종종 자신의 함수에서 객체를 하나의 인수처럼 사용할 것입니다.

왜냐하면, 한번에 많은 인수를 하나씩 전달할 경우 '어떤 인수가 어떤 것인지, 어떤 순서로 들어가있는지를

기억하기가 쉽지 않기 때문입니다.

여기서, 우리는 각각의 인수에 이름을 붙일 수 있다는 것을 알 수 있어요.

순서는 별로 중요하지 않지만, 개발자와 같이 코드를 보는 사람에겐 이 코드를 통해 무엇이 일어날지를

확인하는 것이 훨씬 쉬워집니다.

지금까지 함수 관련 내용을 살펴보면서, 외형이나 함수 내부의 상세한 부분을 설명하기 보단 기능 위주로

설명하고 있습니다.

함수의 기능과 관련하여 넘어가기 전에 한가지 더 살펴보아야 할 것이 있는데요,

바로 '값을 리턴하는 함수의 개념' 입니다.

Functions Returning Values (값을 리턴하는 함수)

함수들은 종종 인치 단위를 cm 단위로 변환하는 것과 같은 계산을 수행하는 방법으로 사용됩니다.

이 함수에 값을 전달한 후 기대할 수 있는 것은 바로, 계산된 결과값을 "반환" 할 수 있다는 것이죠.

이 함수를 어떻게 작성할 수 있는지 아래를 통해 살펴보기로 합시다.

inchesToCM 함수는 위에서 설명된 바와 같이,

인치값을 전달받은 후 인치 값에 2.54를 곱하여 계산된 CM값을 전달하는 함수입니다.

위 함수에서 sixFeatInCM에는 182.88 이라는 값이 남게됩니다.

쉽게 유추할 수 있는 바아 같이 182.88 이라는 값은 72와 2.54의 곱으로 인해 계산된 값이죠.

좀 더 자세히 설명하자면,

sixFeatInCM 변수는 inchesToCM 함수의 값을 의미하는데, 해당 함수가 리턴하게되는 값은

전달받았던 인수, 72라는 값을 갖고있는 'sixFeatInInches' 에 2.54를 곱한 값이기 때문이예요.

inchesToCM 함수는 sixFeatInInches 변수로 값을 전달받고, 계산된 결과값을 inches로 되돌려줍니다.

함수는 어떠한 값이라도 되돌려줄 수 있는데요,

심지어 다음의 예를 살펴보면, 부울형식의 값도 되돌려주는 것이 가능합니다.

예상되는 바와 같이,

위의 예제로 작성한 함수는 항상 false 라는 결과를 전달할 것 같네요.

영국에선 화창한 날씨를 볼 수 없으니까.  :D (외국식 개그코드)

이처럼, 함수로부터 반환되는 값은 여러분이 코드를 작성할 때, '자주사용할 어떤 것' 을 사용하면 됩니다.

Conditionals (조건문)

종종 코드를 실행할 때, 이런 생각들을 해보셨을 것 같아요.

"특정 조건에서만 코드를 실행시키고 싶은데..." 와 같은 거요.

즉, 어떤 것을 제외한 다른 것들이 참이거나 거짓일 경우에만 실행되게 하고 싶은 경우,

예를 들면, 나이 변수가 12살 보다 아래일 경우에만 "child" 라는 알림이 동작하게 한다 와 같은

경우가 있을 수 있죠.

위 예제는, 매우 간단한 조건문인데요.

한가지 고민이 더 남아있죠.

12살 보다 위인 경우에도 무언가를 알려주고 싶을 때엔 어떻게 하면 될까요?

아래 예제처럼 else라고하고, 원하는 내용을 적어주면 됩니다.

이런 식으로,

"Not a child" 를 알려줄 수 있습니다.

그런데, 아직도 부족한 것이 눈에 보이네요.

12살일 경우에는 어떻게 해야할까요?

그리고, 나뉘는 기준이 2가지가 아닌 3가지 이상일 경우엔 저 방법을 쓸 수 없을 것 같군요.

아래 예제처럼 작성해보면, 이 고민을 해결할 수 있을거 같네요.

age 가 15살이어도, 12살이어도 알림하는데 문제가 되지 않을 것 같습니다.

12살 이하를 표시하고 싶을 경우 위 예제처럼,

'<=' 로 표시해줄 수 있죠.

분류 기준을 3개 이상으로 하고 싶을 경우

if - else if - else 로 나눠줄 수 있습니다. 4개, 5개로 분류 기준이 많아질 경우에는

전체 분류 개수에 맞춰, 중간에 들어가는 else if 의 개수만 늘려주면 됩니다.

두가지 조건이 하나로 되어 있는 복합적인 조건의 경우는 어떨까요?

두가지 조건을 하나로 합치는 연산자 중 하나가 '&&' 인데, 'and' 라는 의미를 갖고 있습니다.

(아래 예제에도 나오지만, 'or' 라는 의미를 가진 연산자는 '||' 입니다.)

이미 알고 계시겠지만, 이 연산자의 의미는 '둘 중에 하나만 거짓이어도 거짓 값을 출력' 합니다.

즉, '양쪽의 조건이 모두 참일 때에만 참 값을 출력' 하는 것이죠.

그리고, 양쪽의 조건이 모두 같음을 의미할 때 사용하는 연산자로,

'==' 이 있습니다.

그런데, 위 예제에서 사용된 연산자는 '===' 라고 되어 있네요.

둘다 '양쪽의 값이 같음' 을 의미하지만, 한가지 분명한 차이가 있는데요.

'===' 연산자의 의미는 age > 18 && name === "Jack" 라고 기재된 내용 이후부터,

나오는 모든 내용은 '항상 같음' 을 의미합니다. ('선언 이후로는 언제든 그렇다' 는 점이 큰 차이 입니다.)

다음으로 or를 뜻하는 '||' 의 사용에 대해 알아볼께요.

위 예제에서는,

단 한가지의 조건만 참(true)을 만족해도, 알림이 표시됩니다.

즉, 나이 조건이 18보다 크다는 조건 한가지만을 만족하더라도,

해당 사람의 이름이 Jack 이든 아니든 여부에 상관없이 참(true) 값을 돌려주게 되는 것이죠.

연산자 '||' 과 '&&' 의 차이를 확실하게 아는 것이 좋겠죠?

두 조건 중 한가지만 참이어도 참 값을 돌려주게되는 ||' 과

두가지 값이 모두 참이어야지만 참 값을 돌려주게 되는 '&&' 의 차이를 명확하게 아는 것이 중요합니다.

끝으로, 부정 연산자에 대해 알아볼텐데요.

부정 연산자는 조건의 결과를 반전합니다.

아래 예제를 통해 살펴보겠습니다.

예를 들어,

age<18 이 거짓일 경우, 앞에 부정연산자인 '!' 가 붙게되면,

거짓이 참으로 변하게 됨을 의미합니다.

일반적으로 부정 연산자의 사용은 자제를 하는 편이라고 하네요.

왜냐하면, '!age <18' 이라고 쓰는 것 보다는 'age>=18' 이라고 쓰는 것이 더 읽기 쉽고,

코드 작성 시 발생할 수 있는 오류를 예방하는데도 도움이 되기 때문입니다.

오늘은 조건문의 연산자 까지 알아보았습니다.

다음 시간에는 내용을 조금 바꿔서,

웹페이지를 만드는 디자인 프레임워크인 'Bootstrap (부트스트랩)' 에 대해 배워보도록 하겠습니다.

그럼, 다음 시간에 뵐께요~~!!

고맙습니다.