INTHEJ.LOG

undefined

자바스크립트 코딩을 하다보면 무언가 의심쩍은 일이 생기면 undefined를 만나게 됩니다. 이는 아직 초기화하지 않은 변수나 존재하지 않는(아니면 삭제한) 속성, 혹은 존재하지 않는 배열 요소를 사용하는 경우 등에서 발생합니다.

그런데 대체 undefined 란 뭘까요? 사실 그리 복잡한 건 아닙니다. undefined 는 아직 값을 갖고 있지 않은 변수에 할당된 값이라고 생각하면 됩니다. 달리 말하면 undefined 값은 변수가 아직 초기화되지 않았다고 알려주는 겁니다. 이러한 undefined 라는 게 어떤 쓸모가 있을까요? undefined 는 어떤 변수, 속성, 배열 요소 등이 값을 갖고 있는지 확인할 수 있는 방법을 제공한다고 할 수 있습니다.

또한 우리가 알아야 할 것중에 하나는 undefined 값의 형은 undefined 입니다. 이에 대한 자바스크립트의 논리는 다음과 같습니다. "이 값은 객체도, 숫자도, 문자열도, 불린형도 아니다. 형을 알 수 없으니 자료형을 undefined로 만드는 것도 문제가 없다." 이것이 우리가  받아 들여야 하는 자바스크립트의 이상한 영역 중 하나입니다.

undefined vs null

저는 이점 때문에 혼란이 종종 생기기도 하였습니다. '객체 없음'을 의미하는 개념을 뜻하는 언어가 많이 있습니다. 그리고 잘못된 것도 아닙니다. document.getElementById() 메서드를 예로 들어보겠습니다. getElementById() 메서드는 DOM 에 대한 해당 아이디를 가진 요소를 찾지 못하면 null 을 반환합니다. null 은 정확히 어떤 건가요? 왜 undefined 가 아니라 null을 반환하는걸까요?

getElementById() 메서드가 하는일은 객체를 반환하는것입니다. 그런데 원하는 객체를 찾지 못한다면... 그러면 우리는 "그런 객체가 있다면 반환하겠지만, 나에겐 그런 객체가 없다" 고 알려주는 무언가를 반환하고 싶었을 겁니다. 그게 바로 null 입니다.

null 값은 변수에 직접 할당할 수도 있습니다.

var obj = null;

우리가 생각해 봐야할 것은 변수에 null 값을 할당한다는게 어떤 의미인가 입니다. 그건 바로 "이 변수에 언젠가 객체를 할당하려고 하는데, 지금은 객체가 없다." 라는 것입니다.

그렇다면 그런 의미로 undefined 를 사용하면 안될까요? 하고 고개를 갸우뚱하고 있다면 여러분은 지금까지의 설명을 제대로 이해하고 있는 겁니다. 사실 이 질문에 대한 대답은 자바스크립트의 아주 초창기에 나왔습니다. 기본적인 취지는 아무런 값으로도 초기화되지 않은 변수를 나타내는 값과 객체가 없다고 나타내는 값을 다르게 표현하자는 겁니다.  약간은 중복된다고 생각 할 수 있지만 현실이 그렇습니다. 우리가 알아야 할 것은 그저 undefined 과 null 의 의도를 기억하고 있으면 됩니다.

null 값은 객체가 있어야 하는 곳에 객체가 없음을 나타내는 것이고,

undefined 는 초기화 되지 않은 변수, 존재하지 않는 객체의 속성, 배열 안에서 값이 할당되어 있지 않은 요소를 나타냅니다.

숫자가 아닌 숫자 NaN

표현이 불가능한 숫자 값이 있습니다. 자바스크립트는 이런 값들을 표현할 수 없으므로 대신 NaN 이라는 값을 사용합니다. NaN 은 '숫자가 아니라는 것(Not A Number)' 을 의미합니다. 예를 들어 0 / 0 을 생각해보면 이 값은 컴퓨터에서 표현할 수 없는 값이 됩니다. 자바스크립트에서는 이 값을 NaN 으로 표현합니다.

이 값은 표현할 수 없는 값을 나타낼 뿐만 아니라 자바스크립트에서 자기 자신과 일치하지 않는 유일한 값입니다. 이 말이 무슨말이냐면 NaN 과 NaN 을 비교해보면 두 값은 일치하지 않습니다.

console.log(NaN == NaN);   // false

아마 NaN을 다루는 일이 자주 생길 거라고 생각하지는 않겠지만 어떠한 형태든 숫자를 다루는 코드를 작업을 하게 된다면 이 문제는 발생 할 수도 있습니다. 이 문제를 다룰 때에는 결과가 NaN 이 되는지 확인해야 하는데 아래의 경우는 주의해야 합니다.

if (myNum == NaN) {
  myNum = 0;
}

센스 있는 분이라면 어떤 변수의 값이 NaN인지 검사하기 위해 위와 같은 방법이면 충분 할 거라고 생각하겠지만, 이 코드는 작동하지 않습니다. 왜 그럴까요? 위에서 설명 한 것처럼 NaN 은 그 어떤 값과도 일치하지 않습니다. 심지어 자기 자신과도요. 따라서 NaN과 비교하는 것은 불가능 합니다.

대신 isNaN() 이라는 특별한 함수를 다음과 같이 사용해야 합니다.

if (isNaN(myNum)) {
  myNum = 0;
}

isNaN() 함수를 사용하세요. 이 함수는 인자로 받은 값이 숫자가 아니면 true 를 반환하도록 되어 있습니다.

typeof NaN

NaN 이 숫자가 아니라는 것을 의미한다면 도대체 어떤 걸 의미하는 걸까요? '어떤 것이 아니라는 것' 보다는 '어떤 것' 이라고 이름을 붙여 놓는게 사실 더 이해하기 좋습니다. 이 문제는 코드를 통해서 확인 해 볼 필요가 있습니다.

var num = 0 / 0;
console.log(typeof num);  // number

코드를 확인해보면 보다시피 NaN 의 타입은 숫자형입니다. 숫자가 아닌 것(Not A Number)을 의미하는 NaN 의 자료형이 숫자입니다.

우리는 이 문제를 NaN의 이름이 부적절하다고 생각해야 합니다. '숫자가 아닌 것' 이라기보다는 '표현 할 수 없는 숫자'가 아마도 더 적절한 용어 일 겁니다.(NaN 은 그리 잘 만든 약자는 아닌 것 같습니다.)

정리 하자면 우리는 NaN 을 이렇게 생각하면 됩니다. "NaN 은 숫자값이지만 (적어도 컴퓨터로는) 표현할 수 없는 숫자값이다." 

출처: Head First JavaScript Programming

JavaScript HTML

자바스크립트와 HTML은 서로 별개의 것입니다. HTML은 태그를 가진 문서이고 자바스크립트는 코드입니다. 이 둘은 어떻게 서로 대화할 수 있을까요? 궁극적으로 웹 페이지를 문서 객체 모델(Document Object Model, DOM) 이라고 부르는 방법으로 표현함으로써 가능합니다. 자바스크립트는 HTML과 다음의 과정으로 대화합니다.

1) 브라우저에 웹 페이지를 로딩하면 브라우저가 HTML을 파싱하고 화면에 출력 할 뿐만 아니라 태그를 나타내는 일련의 객체도 만듭니다. 이 객체들이 DOM에 저장됩니다.

2) 자바스크립트는 DOM에 들어 있는 요소에 접근할 수 있습니다. 또한 자바스크립트는 DOM을 이용해 요소를 생성하거나 제거할 수 있습니다.

3) 자바스크립트가 DOM을 수정하면 브라우저는 웹 페이지를 동적으로 갱신하므로 웹 페이지에서 새로운 내용을 볼 수 있게 됩니다.

중요한 점은 웹 페이지가 자바스크립트가 사용할 수 있는 데이터 구조(Data Structure)를 제공한다는 것입니다. 자바스크립트는 웹 페이지에 있는 요소에 접근해 내용을 읽을 수 있으며 웹 페이지의 내용이나 구조를 바꿀 수도 있습니다.

요소 가져오기

document 객체는 내장된 객체로서 다양한 메서드와 속성을 갖고 있습니다.

getElemenetById()

var planet = document.getElementById("planet");

getElementById() 메서드는 DOM 안에 해당 아이디를 갖고 있는 객체를 반환합니다. 자바스크립트의 다른 객체와 마찬가지로 요소 객체도 속성과 메서드를 갖고 있습니다. 이 속성과 메서드를 이용해 요소를 읽거나 변경할 수 있습니다. 만약 해당 아이디가 존재 하지 않을 경우에는 null 값을 반환합니다.

요소 객체란? 

요소 객체는 <p>어떤문장</p> 처럼 HTML 파일 안에 입력한 것을 브라우저 내부에서 객체로 표현한 것을 말합니다. 브라우저가 HTML 파일을 로딩하고 분석할 때 브라우저는 웹 페이지 안에 있는 모든 요소에 대해 요소 객체를 만들고 이 객체들을 모두 DOM에 추가합니다. DOM은 요소 객체를 담고 있는 커다란 트리 구조체라고 생각 할 수 있습니다.

innerHTML

planet.innerHTML = "지구";

innerHTML은 요소의 내용을 읽거나 변경하기 위해 사용하는 속성입니다. 들어 있는 값을 보면 HTML 태그를 제외하고 요소에 들어 있는 모든 내용을 볼 수 있습니다. 안쪽에 들어 있는 내용만 볼 수 있으므로 속성명이 innerHTML 입니다.

setAttribute()

planet.setAttribute("class", "earth");

어떤 요소든 setAttribute() 메서드를 호출하면 요소에 이미 있는 속성은 변경하고 요소에 존재하지 않는 속성은 추가해줍니다.

주의할점

DOM을 다룰 때에는 페이지가 완전히 로딩된 후에 코드를 실행해야 합니다. 그렇지 않으면 DOM이 완성되기 전에 코드가 실행될 가능성이 높습니다.

<html>
<head>
<title>행성</title>
<script>
  var planet = document.getElementById("planet");
  planet.innerHTML = "지구";
</script>
</head>
<body>
<p id="planet">행성</p>
</body>
</html>

페이지의 <head> 에 스크립트 코드를 넣게 되면 페이지의 body 부분이 로딩되기 전에 코드가 실행됩니다. 코드 실행당시 planet 아이디를 가진 문장 요소가 아직 만들어지지 않았기 때문에 getElementById() 메서드는 null 값을 반환합니다. 이후에 브라우저는 페이지를 계속해서 읽고 그려 나가므로 내용이 변경되지 않습니다.

문제를 해결하기 위해선 스크립트 코드를 <body> 요소 제일 마지막으로 옮기거나, 가장 확실한 방법으로 "웹 페이지를 완전히 로딩하고 DOM을 생성한 후에 이코드를 실행하라"고 브라우저에게 명령하는 것입니다.

<script> 이동

<html>
<head>
<title>행성</title>
</head>
<body>
<p id="planet">행성</p>
<script>
  var planet = document.getElementById("planet");
  planet.innerHTML = "지구";
</script>
</body>
</html>

window.onload 속성

<html>
<head>
<title>행성</title>
<script>
  function init() {
    var planet = document.getElementById("planet");
    planet.innerHTML = "지구";
  }
  
  window.onload = init;
</script>
</head>
<body>
<p id="planet">행성</p>
</body>
</html>

window 객체는 웹 페이지가 완전히 로딩된 후에 onload 속성에 할당되어 있는 함수를 호출합니다. 초기화 함수를 구현한 후 window 객체 onload 속성에 이 함수를 할당하게 되면 문제가 해결됩니다. 이렇게 초기화를 목적으로 작성된 함수를 일반적으로 init 이라는 함수명을 사용하여 정의하며 window onload 속성에 함수를 할당하는데는 괄호를 사용하지 않습니다. 함수를 호출하는 것이아니라 함수를 값으로 할당하기 때문입니다.

콜백(Callback)

onload 의 작동방식을 조금 더 생각해보면 자바스크립트에서 매우 흔한 코딩 패턴으로 거의 늘 사용 됩니다. 이벤트에 대해 알고 있는 객체에게 함수를 알려주고 이벤트가 발생하게되면 객체는 함수를 호출합니다. 이렇게 어떠한 이벤트가 일어난 뒤에 처리되는 코드를 일반적으로 콜백(Callback) 혹은 이벤트 처리기(Event Handler) 라고 부릅니다.

출처: Head First JavaScript Programming

객체 (Object)

객체를 알게되면 자바스크립트 프로그래밍 기술 수준이 한 단계 올라갑니다. 객체는 복잡한 코드를 관리하고, 브라우저 객체모델을 이해하고, 데이터를 구조화 하는 데 필요한 핵심적인 기술입니다. 객체지향 방식으로 패키지화된 자바스크립트 라이브러리도 많이 있습니다.

자바스크립트 객체의 비밀은 객체는 그저 속성(Property)를 모아 놓은 것입니다.

객체지향이란 어떤 것인지?

객체지향 프로그래밍에서는 문제를 객체의 관점에서 바라봅니다. 객체는 상태와 행동을 갖고 있습니다. 객체지향 방식으로 프로그래밍하면 상당히 높은 수준에서 생각할 수 있게 해줍니다. 토스트를 굽는 과정을 절차적인 방식과 객체지향적인 방식으로 설명한다면 다음과 같다.

토스트를 굽는 과정

- 절차적인 방식

1) 전선을 이용해 전열선을 만든다.

2) 전기에 연결한다.

3) 빵을 전열선에 가까이 놓는다.

4) 토스트가 다 구워질 때까지 기다린 후 전열선의 전기를 차단한다.

- 객체지향적인 방식

1) 토스터에 빵을 넣고 토스트 버튼을 누른다.

객체 생성 방법

var car = {
  make: "쉐보레",
  model: "벨 에어",
  year: 1957,
  color: "빨간색",
  passengers: 2,
  convertible: false,
  mileage: 1021
}

객체의 진정한 강점은 객체를 많이 만들고 어느 객체에서든 행동할 수 있는 코드를 만들 수 있다는 것입니다.

(해당 내용은 나중에 다루고 지금 본질적인 개념에만 집중합니다.)

속성에 접근하기

car.mileage

점 표기법을 이용해 객체의 속성에 접근 할 수 있습니다.

속성값 변경하기

car.mileage = 10000;

그저 속성에 새로운 값을 할당하면 됩니다.

속성 추가하기

car.needsWashing = true;

언제든 새로운 속성을 추가해 객체를 확장할 수 있습니다. 속성을 추가하려면 새로운 속성명을 지정하고 값을 할당하면 됩니다.

기존에 이와 같은 속성이 없었다면 객체에 새로운 속성이 추가됩니다. 하지만 기존에 이속성이 있었다면 단지 속성의 값이 변경됩니다.

속성 제거하기

delete car.needsWashing;

속성을 제거하려면 delete 라는 키워드를 사용하여 제거 할 수 있습니다. 속성을 제거하면 속성값만 제거되는 것이 아니고 속성 자체가 없어집니다. delete 키워드는 다음과 같은 특징을 가지고 있습니다.

1) 속성이 제대로 제거되면 delete 키워드는 true 를 반환합니다.

2) 보호된 객체의 경우 delete 키워드로 속성을 제거할 수 없습니다. 이처럼 제대로 속성을 제거 할 수 없을 때는 false를 반환합니다.

3) 객체에 존재하지 않은 속성을 제거할 때에도 true를 반환합니다.

변수에 객체가 어떻게 들어가는지

변수는 그릇처럼 어떤 값을 담습니다. 숫자 문자열, 불린형은 상당히 작으므로 담을 수 있겠지만 객체는 속성이 무한히 들어 갈 수 있습니다. 하지만 이런 객체도 변수에 담을 수 있습니다. 이유는 실제로 변수에 객체가 들어가는 것이 아니라 객체에 대한 참조가 들어갑니다. 참조는 실제 객체에 대한 포인터나 주소 같은 것입니다. 즉, 변수는 객체를 그대로 담고 있는 것이 아니고 포인터를 담고 있는 것입니다.

자바스크립트에서는 변수 안에 들어 있는 참조가 정확히 어떻게 생겼는지 알 수 없습니다. 다만 이 참조가 가리키는 객체는 알 수 있습니다.

점 표기법을 사용하면 자바스크립트 인터프리터는 객체에 대한 참조를 이용해 객체를 찾고, 그 안에 들어 있는 속성에 접근하게 됩니다.

객체에 행동을 추가하기

var car = {
  // ...
  started: false,
  
  start: function() {
	this.started = true;
  },
  stop: function() {
  	this.started = false;
  },
  drive: function() {
    if (this.started) {
      alert("go~go!");
    } else {
      alert("시동이 꺼져있습니다.");
    }
  }

객체안에 들어가는 함수는 일반적으로 메서드(Method)라고 부릅니다. 메서드는 객체지향 방법론에서 널리 사용하는 명칭입니다. 메서드는 객체에 들어 있는 속성명에 할당된 함수 일 뿐입니다. 객체 안에 존재하기 때문에 메서드라고 부를 뿐입니다. 속성은 변수와 값을 부르는 다른이름인것처럼 함수 도 값이라고 생각하면 됩니다.

위와 같이 속성에 함수를 정의 한다면 객체의 행동을 추가 할 수 있습니다. 

일반적으로 함수는 함수 안에서 변수이름을 찾을 때 지역변수, 함수파라미터, 전역변수 순으로 찾아갑니다. 만약 this 키워드를 사용하여 객체 자신의 속성이라고 명시적으로 알려주지 않는다면 해당 변수를 찾을 수 없는 점을 주의해야 합니다.

메서드를 왜 만들어야 하지?

started 속성을 직접 바꾸면 되는데 우리는 왜 메서드를 만들어야할까요?

car.start();

// or 

car.started = true;

속성을 바꾸기 위해 메서드를 사용하는 것은 캡슐화(Encapsulation)의 한 사례입니다. 객체를 캡슐화하면 객체가 어떻게 쓰일지 걱정하지 않고 코드의 유지보수성과 확장성을 향상시킬 수 있습니다. '자동차를 시동을 걸려면 started 변수를 true로 설정해야 한다'는 것을 아는 것보다 이런 내부 사정을 잘 아는 start() 메서드를 사용하는 편이 더 좋습니다. 안전벨트, 연료, 배터리, 엔진 온도 등 많은 것을 검사해야 하는 경우처럼 시동을 거는 과정이 더 복잡해 진다고 생각하면 이해가 쉽습니다.

객체의 속성을 모두나열하기

for (let prop in car) {
  console.log(prop + ": " + car[prop]);
}

for in 반복문은 객체 안에 들어 있는 속성들을 임의의 순서로 반복합니다. 대괄호  표기법을 사용하여 속성에 접근 할 수 잇습니다.

속성에 접근하는 방법은 점 표기법도 있지만 대괄호 표기법을 사용하여 접근 할 수 도 있습니다.

출처: Head First JavaScript Programming

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