INTHEJ.LOG

Function 사용하기

함수를 이용하면 아주 다양한 환경에서 사용할 수 있는 코드를 만들 수 있다. 이 코드는 계속해서 재사용 할 수 있고, 관리하기도 훨씬 쉽고, 복잡한 것을 처리해주는 코드에 간단히 이름만 붙여 놓고 중요한 일에 집중할 수 있게 해준다. 이렇게 복잡한 부분을 간단히 생각할 수 있게 해주는 방법을 추상화 라고 한다.  함수를 이용하면 어떤 코드를 가져와 이름을 붙이고, 그 코드가 필요할 때마다 이름만 불러주면 된다.

파라미터(Parameter) 와 인자(Agument)

함수를 정의할 때 사용되는 변수를 파라미터(Parameter)라고 하며 함수를 호출할 때에 전달하는 데이터를 인자(agument) 라고한다.

파라미터(Parameter)

function bark(name, weight) {
}

인자(Agument)

bark("해피", 23);

자바스크립트 함수는 값으로 전달한다.

자바스크립트가 인자를 전달하는 방법은 함수에 값으로 인자를 전달(Pass-By-Value) 한다. 다시 말하면 파라미터에 인자를 복사하는 것이다. 파라미터는 새로운 변수이다. 함수는 파라미터 앞에 var 키워드를 선언하지 않아도 적절히 변수를 만들고 초기화하는 과정을 처리해 준다.

함수를 사용 할 적에 파라미터 보다 적게 인자를 보내면 인자를 받지 못한 파라미터는 undefined 값으로 설정되며 파라미터보다 많은 인자를 보내면 남는 인자들은 무시된다.

return 문을 통하여 무언가를 돌려 줄 수 도 있으며 return 문이 없는 함수는 undefined 값을 반환한다.

전연변수와 지역변수

변수를 어디에서 정의하느냐에 따라 변수의 범위가 정해진다. 변수의 범위에 따라 코드의 어느 부분에서 이 변수를 사용할 수 있는지 결정된다. 자바스크립트에서 변수의  범위는(Scope)는 함수 밖에서 정의한 변수는 전역 범위(Global Scope), 함수 안에서 정의한 변수는 지역 범위(Local Scope)를 갖는다는 점에 주의해야 한다.

함수 바깥에서  선언하면 전역 변수가 되며 함수 안에서 선언하면 지역 변수가 된다.

페이지가 열려 있는 동안 전역 변수는 살아 있다.

자바스크립트가 페이지에 로딩될 때 전역 변수가 생성된다. 그리고 페이지가 사라질 때 전역 변수의 생명도 끝나게 된다.

똑같은 페이지를 다시 로딩하더라도 기존 전역 변수는  사라지고 전역 변수들이 새로 만들어 진다.

일반적으로 지역 변수는 함수가 종료되면 사라진다.

지역 변수는 함수가 호출될 때 생성되고 함수가 반환되면 사라진다(값을 반환 하는지 여부는 상관 없다). 그렇지만 변수가 사라지기 전에 지역 변수의 값을 가져와 함수가 종료될 때 반환 할 수 있다. 여기에서 '일반적으로' 라고 말하는 것은 지역변수라고 해도 수명을 약간 연장시키는 방법은 있기 때문이다.

지역변수는 전역 변수를 가린다.

선언된 전역변수 명으로 지역변수를 선언 할 경우 지역 변수가 전역 변수를 가린다(Shadow)고 말한다.

지역변수 때문에 전역 변수를 볼 수 없게 되므로 가린다라고 표현한다).

var beanCounter = 10;

function getNumberOfItems(ordertype) {
  var beanCounter = 0;
  if (ordertype == "order") {
    // beanCounter를 이용해 연산을 수행
  }
  return beanCounter;
}

함수의 선언위치

자바스크립트는 함수를 사용하기 전에 선언하든 사용한 후에 정의하든 신경 쓰지 않는다.

예를 들어 다음과 같은 코드를 본다면 상당히 이상해 보일 수 있다. 

var radius = 5;
var area = circleArea(radius);
alert(area);

function circleArea(r) {
  var a = Math.PI * r * r;
  return a;
}

브라우저가 웹 페이지를 로딩하고 파일 꼭대기에서 자바스크립트를 실행하기 시작하는데 사실은 자바스크립트는 웹 페이지를 두 단계로 처리한다. 첫번째단계는 모든 함수의 정의를 읽어들이고 두번째 단계에서는 코드를 실행하기 시작한다. 그렇기 때문에 함수는 파일 어디에 놓아도 상관이 없다.

자바스크립트는 변수와 함수를 정리하는 데 있어서 상당히 느슨한 편이다. 따라서 코드를 깔끔하게 정리하고 확장하기 쉽도록 만드는 것을 좋아한다. 전역 변수는 꼭대기에, 함수는 함께 있는 것을 좋아하고, 지역변수는 함수의 꼭대기에 선언하는 규칙을 지키는 편이 좋다.

출처: Head First JavaScript Programming

난수 생성하기

자바스크립트가 제공하는 수많은 내장 함수 중에는 난수를 생성하기 위해 사용하는 함수도 있다.

var random = Math.random();

먼저 Math.random() 함수로 시작한다. 이 함수를 호출하면 소수 형태의 난수가 반환된다.

문제는 반환되는 값이 0.128, 0.830, 0.9, 0.42와 같은 소수라는 점이다. 이 숫자는 0에서 1사이의 값이다(1은 포함되지 않음).

따라서 이 값을 이용해서 난수를 만드는 방법이 필요하다.

var random = Math.random() * 5;

난수에 5를 곱하면 0에서 5사이의 숫자를 얻게된다.(5는 제외). 즉 0.13983, 4.231, 2.3451, 혹은 4.999와 같은 숫자가 나온다.

이제 소수점 이하의 숫자들을 잘나내 정수 부분만 취하면 된다. 소수점 아래를 잘라내려면 자바스크립트에 내장된 Math.floor() 함수를 사용하면 된다.

var random = Math.floor(Math.random() * 5);

Math.floor() 함수를 이용하면 이 숫자에서 소수점 이하를 때어낸 정수를 취할 수 있다.

예를 들어 0.13983 은 0, 2.34 는 2, 4.999 는 4가 된다.

정리하자면 Math.random() 함수는 0에서 1사이의 숫자를 생성하지만 1은 생성하지 않는다.

Math.random() 함수가 생성할 수 있는 가장 큰 수는 0.999··· 이다. 이 숫자에 5를 곱하면 나오는 가장 큰 수는 4.999···인 것이다.

Math.floor() 함수는 소숫점 이하를 내림하므로 1.2도 1이되지만 1.9999도 1이 된다. 따라서 0에서 4.999··· 숫자가 생성된다면 소숫점 이하를 내림해서 나온 숫자는 0에서 4사이의 숫자가 된다.

자바스크립트에서는 대부분 이와 같은 방법을 이용하여 난수를 생성한다.

출처: Head First JavaScript Programming

웹 페이지라고 해서 그저 가만히 있는 것만 보여주지는 않는다. 멋진 웹 페이지는 역동적이며, 대화식으로 사용자에게 반응해야 한다. 바로 이런 일을 해주는 게 자바스크립트이다. 먼저 웹 페이지 생태계에서 자바스크립트가 어떤 역할을 하는지 살펴보자.

HTML

HTML(Hyper Text Markup Language)을 사용해 단락, 제목, 섹셕과 같은 구조를 이용하여 페이지의 내용을 만든다.

CSS

색상, 폰트, 경계, 폭, 페이지 배치 등 HTML을 화면에 표시하는 방법을 지정하는 데 CSS(Cascading Style Sheets)를 이용한다. 즉 CSS는 문서의 스타일을 지정할 수 있게 해주며, 페이지 구조와는 분리되어 있다.

JavaScript

자바스크립트는 웹 페이지를 작동시킨다. 페이지를 프로그래밍할 수 있게 해주므로 계산하고, 사용자 입력을 처리하고, 그림도 그리고, 네트워크로 전송하고, 경고 메시지를 보여주고, 페이지 내용을 바꾸는 등 모든 동적인 요소를 구현할 수 있게 해준다.

작성방법

프로그래밍 세계에서 자바스크립트는 상당히 독특하다. 일반적인 프로그래밍 언어로는 코드를 짜고, 컴파일하고, 링크하고, 설치한다. 그러나 자바스크립트는 훨씬 더 유동적이다. 자바스크립트로 프로그래밍할 때에는 웹 페이지 안에 자바스크립트를 바로 넣고 브라우저로 읽으면 된다. 그러면 브라우저가 작성한 자바스크립트 코드를 실행한다.

1. 작성

HTML 태그와 CSS 스타일을 이용해 늘 해오던 방식대로 웹 페이지를 만든다. 그리고 웹 페이지 안에 자바스크립트 코드를 넣는다. HTML과  CSS 처럼 웹 페이지에 보여줄 내용을 한 파일에 모두 넣거나 아니면 별도의 (자바스크립트) 파일에 넣을 수 있다.

2. 로딩

브라우저로 페이지를 연다. 브라우저가 코드를 보면 바로 파싱하고 실행할 준비를 한다. HTML 이나 CSS와 마찬가지로 브라우저가 코드에 있는 오류를 발견하더라도 자바스크립트, HTML, CSS를 최대한 많이 읽으려고 한다. 브라우저는 사용자에게 아무것도 보여주지 못하는 것을 가장 싫어 한다.

3. 실행

페이지 안에 있는 코드를 보자마자 브라우저는 이 코드를 실행할 준비를 한다. 그리고 페이지를 보고 있는 내내 이 코드를 실행한다. 초기 자바스크립트와는 달리 최신 자바스크립트는 컴파일하는 프로그래밍 언어에 육박하는 속도를 내기 위해 고급 컴파일러 기술을 사용하고 있으므로 상당히 빠르다.

어떤 방법으로 페이지에 JavaScript 코드를 넣을 수 있을까?

<script> 태그를 이용해 <head> 나 <body>에 자바스크립트 코드를 추가할 수 있다는 것은 이미 알고 있다. 자바스크립트 코드를 추가할 수 있는 곳을 모두 확인해 본다.

① <head> 요소 안에 코드를 직접 넣는다.

<head> 안에 <script> 요소를 넣는 방법이 가장 널리 사용된다. 그러면 코드를 찾기도 쉽고 합리적인 위치인 것 같다. 그런데 이 위치가 언제나 가장 좋은 것은 아니다.

② <body>요소 안에 코드를 직접 넣는다.

<body> 요소 안에 <script> 요소를 추가하고 그 안에 자바스크립트 코드를 넣는 방법이 약간 더 좋다. 왜 그럴까? 브라우저가 페이지를 로딩할 때에는 <body> 요소를 읽기 전에 <head> 요소를 모두 읽는다. 그러면 <head> 요소 안의 코드가 다 실행되고 나서야 실제 페이지의 모습이 보인다. <body> 요소 안에 있는 HTML을 먼저 읽은 후 코드가 실행되므로 실행되기 전의 페이지 내용을 모두 볼 수 있다.

③ <head> 요소 안에서 외부파일을 연결한다.

이 방법은 CSS 파일에 연결하는 것과 똑같다. <script> 태그 안에 src속성 값이 CSS 파일 대신 자바스크립트 파일에 대한 URL이라는 점만 다르다. 코드가 별도의 외부 파일에 있으면 관리하기 훨씬 더 쉬워지고, 여러 페이지에서 함께 사용할 수 있다. 그렇지만 이 방법도 페이지의 <body>를 읽어서 보여주기 전에 코드를 로딩하는 단점이 있다.

④ <body> 요소 안에서 외부파일을 연결한다.

가장좋은 방법이다. 어떤한 페이지에도 포함시킬 수 있는 유지보수성이 뛰어난 자바스크립트 파일을 갖게 되고, 이 파일은 페이지의 본문이 모두 로딩되어 보이고 난 후에 실행된다.

증거가 있기는 하지만 난 아직도 <head>가 코드를 넣기에 가장 좋은 곳인거 같다.

출처: Head First JavaScript Programming