[ROADMAP] JavaScript

JavaScript란?

동적으로 컨텐츠를 바꾸고, 멀티미디어를 다루고, 움직이는 이미지 그리고 꽤나 많은 다른 일들을 할 수 있는 스크립트 언어

JavaScript 실행 순서

브라우저에서 자바스크립트를 만났을 때 일반적으로는 위에서 아래 순서로 실행

const para = document.querySelector('p');
//HTML 요소 중 p태그를 선택

para.addEventListener('click', updateName);
//para에 저장된 객체가 클릭되었을 때 updateName 함수를 실행

function updateName() {
  let name = prompt('Enter a new name');
  //'Enter a new name'과 입력란 출력하여 입력받은 값을 name에 저장
  para.textContent = 'Player 1: ' + name;
  //papa(p태그)에 새로운 문자열 저장
}

만약 1번줄과 3번줄을 바꿨다면 코드는 실행되지 않음

외부의 자바스크립트

<script src="script.js"></script>

메모리 관리

var x = {
  a: {
    b:2
  }
};
// 2개의 오브젝트가 생성되었다. 하나의 오브젝트는 다른 오브젝트의 속성으로 참조된다.
// 나머지 하나는 'x' 변수에 할당되었다.
// 명백하게 가비지 콜렉션 수행될 메모리는 하나도 없다.


var y = x;    // 'y' 변수는 위의 오브젝트를 참조하는 두 번째 변수이다.
x = 1;        // 이제 'y' 변수가 위의 오브젝트를 참조하는 유일한 변수가 되었다.

var z = y.a;  // 위의 오브젝트의 'a' 속성을 참조했다.
              // 이제 'y.a'는 두 개의 참조를 가진다.
              // 'y'가 속성으로 참조하고 'z'라는 변수가 참조한다.

y = "yo";     // 이제 맨 처음 'y' 변수가 참조했던 오브젝트를 참조하는 오브젝트는 없다.
              // (역자: 참조하는 유일한 변수였던 y에 다른 값을 대입했다)
              // 이제 오브젝트에 가비지 콜렉션이 수행될 수 있을까?
              // 아니다. 오브젝트의 'a' 속성이 여전히 'z' 변수에 의해 참조되므로
              // 메모리를 해제할 수 없다.

z = null;     // 'z' 변수에 다른 값을 할당했다.
              // 이제 맨 처음 'x' 변수가 참조했던 오브젝트를 참조하는
              // 다른 변수는 없으므로 가비지 콜렉션이 수행된다.