Javascript 스터디(1주차)

HTML의 구조

HTML 웹페이지는 HTML, CSS, Javascript 각각 세개의 서로 다른 언어가 합쳐져 있는 구조이다. 세개의 언어는 브라우저에 내부에 있는 서브 프로그램인 렌더링 엔진과 자바스크립트 엔진이라는 해석기에 의해서 글자를 해석하게 된다.

렌더링 엔진은 HTML과 CSS를, 자바스크립트 엔진은 Javascirpt를 해석한다. 따라서 자바스크립트 엔진이 해석할 수 있는 문법으로 js파일을 작성해야 한다.

변수

기본형

number

var a = 10;

number 타입. 숫자를 저장한다.

string

var b = "Javascript"; 
var c = "10"; 

string 타입. 문자열을 저장한다. 내용이 숫자인 경우에도 " "로 감싸져 있다면 문자로 취급한다.

Boolean

var d = true;
var e = false;

Boolean 타입. true(참) 또는 false(거짓)을 저장한다.

undefined

var f; // undefined

undefined. 값이 주어지지 않은 상태이다.
변수를 선언한 후 값을 할당하지 않았거나 값이 주어지지 않은 인수에 자동으로 할당된다.

null

var g = null;

null. "값이 없다"는 의미의 특수한 값.
의도적으로 값이 없다는 의미를 나타낸다.
주의할 것은 Javascript는 대소문자를 구분하므로 null은 Null, NULL 또는 다른 변형과는 다르다.

참조형

함수형

var f = function(){
  alert('hello');
};

객체형

javascript var g = { v1: 10, v2: 20 }; 

배열형

javascript var h = \[ 10, 20, 30 \];

인스턴스 참조형

javascript var my1 = new MyName(); 

DOM 참조형

javascript var j = document.getElementById('id'); 

 

변수의 중요 개념

1. 스캐닝 -> 런타임

선처리 과정(스캐닝)에서는 변수 또는 함수가 선언되어있는지 확인 하고 메모리에 등록한다. 이 단계에서는 각 변수의 값이 undefined가 된다. 즉 변수 선언만 되어있는 상태이다. 이 이후에 값을 할당하는 실행 단계가 된다.

(추가) 실행 컨텍스트와 관련된 부분. 추가 공부 이후에 내용 정리 후 수정할 예정

 

2. 변수 호이스팅

호이스팅(hoisting) = 끌어올린다.
스캐닝 과정이 사전에 수행되었기 때문에 발생함.
var라는 변수에 한정되고, let과 const로 선언한 변수의 경우에는 호이스팅시 변수를 초기화하지 않는다.

console.log(test1); // undefined
console.log(test2); // error 

var test1 = 30;
let test2 = 40;

console.log(test1); // 30

✍ Check

• console.log(test1) : 호이스팅이 되어 변수가 undefined로 초기화됨
• console.log(test1) : 선처리 과정 후 실행단계에서 할당된 값인 30이 출력

❌ Error

• console.log(test2) : let 변수는 호이스팅이 되지 않음

3. 전역변수와 지역변수

3-1. 전역변수

• 전체 영역 변수.
• 변수가 함수 외부에 있다.
• 프로그램 전체에서 접근할 수 있다.
• 블록스코프{}의 영향을 받지 않는다.
• var를 쓰지 않고 변수를 작성할 경우 전역변수가 된다.

3-2. 지역변수

• 한정된 지역 내의 변수
• 함수가 실행되면 만들어지고 함수가 종료되면 소멸한다.
• 함수 외부에서는 접근할 수 없다.
• 변수가 함수 내부에 있다. ex) for{}, if{}, while{}, function{} ...

var g1 = "global"; // 전역변수

function f1() {
  var lo1 = "local1"; // 지역변수
  lo2 = "local2"; // 전역변수
}

f1(); // 함수 f1 호출

console.log(g1); // global
console.log(lo1); // error 
console.log(lo2); // local2

✍ Check

• var g1 : 함수 외부에 선언된 전역변수
• var lo1 : 함수 내부에 선언된 지역변수
• lo2 : 함수 내부에 선언되었으나 var를 쓰지 않아 전역변수가 됨

❌ Error

• console.log(lo1); : lo1은 지역변수이기 때문에 함수 외부에서 접근할 수 없음

4. var, let, const

4-1. var

• 호이스팅이 가능하다.
• 블록{}스코프scope = 범위의 영향을 받지 않는다. 단, 함수 블록스코프에는 영향을 받는다.
• 재선언 및 재할당이 가능하다.

console.log(va1); // undefined 

var va1 = "va1";
{
  var va2 = "va2";
}
var va3 = "va3";
var va3 = "var num 3";

console.log(va1); // va1
console.log(va2); // va2
console.log(va3); // var num 3 

✍ Check

• console.log(va1) : va1은 var 변수라 호이스팅이 가능함. 그래서 값이 undefined로 초기화됨

console.log(va2) : 일반 블록 스코프의 영향을 받지 않음.

• console.log(va3) : 재선언(중복 선언)이 가능함.

4-2. let

• 호이스팅이 불가능하다.
• 모든 블록스코프의 영향을 받는다.
• 재할당은 가능하나 재선언(중복선언)이 불가능하다.

console.log(le1); // error 

let le1 = "le1";
{
  let le2 = "le2";
}
let le3 = "le3";
let le3 = "let num 3"; // let num 3 
le3 = "let num 3"; // error =


console.log(le1);
console.log(le2); // error 
console.log(le3); // let num 3

✍ Check

console.log(le3) : let은 재할당이 가능함

❌ Error

• console.log(le1) : let은 호이스팅이 불가능함.
• le3 = "let num 3" : let은 재선언(중복선언)이 불가능함.
• console.log(le2) : let은 모든 블록스코프의 영향을 받음.

4-3. const

• 재할당 및 재선언 모두 불가능하다.

const con1 = "con1";
const con1 = "const number 1"; // error 
con1 = "const num 1"; // error 
console.log(con1);

❌ Error

const con1 = "const number 1" : const는 재선언 불가

• con1 = "const num 1" : const는 재할당 불가

함수의 중요 개념

1. 실행 컨텍스트와 렉시컬 스코프

실행 컨텍스트는 함수가 내부적으로 스캐닝 되고 실행될때 코드에 관련된 정보가 저장되는 공간이다. 더 정확하게는 실행 가능한 코드가 실행되기 위해 필요한 환경이라고 말할 수 있다.
스코프는 변수 이름, 함수 이름, 클래스 이름 등의 식별자가 유효한 범위를 말한다.
렉시컬 스코프는 함수가 선언되는 위치에 따라서 상위 스코프가 결정되는 것이다.

2. 스코프체인

모든 스코프는 하나의 계층적 구조로 연결되며 모든 지역 스코프의 최상위 스코프는 전역 스코프이다. 이렇게 스코프가 계층적으로 연결된 것을 스코프 체인(Scope Chain)이라고 한다. 자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작해서 상위로 이동하며 선언된 변수를 검색한다.

console.log(fc1); // undefined 
console.log(fc2); // undefined 

var fc1 = 10;
var fc2 = 20;

function f2() {
  var fc1 = 20;
  console.log(fc1); // 20
  console.log(fc2); // undefined   
  var fc2 = 30;
  console.log(fc2); // 30 
  console.log(fc3); // undefined. 
  fc4 = "fc number 4"; 
};
f2(); 

console.log(fc1); // 10

var fc3;

console.log(fc4); // fc number 4 

✍ Check

• console.log(fc1) : 함수 f2 내부에도 변수 fc1이 있고(지역변수) 함수 외부에도 변수 fc1이 있다(전역변수). 하지만 스코프체이닝에 따라서 자기자신의 실행컨텍스트에서 해당하는 변수를 먼저 찾는다. 그래서 콘솔에 출력되는 값은 함수 f2 내부의 변수 fc1의 값인 20이 출력된다.

console.log(fc2) : 자기자신의 실행컨텍스트의 지역변수 fc2를 먼저 찾기때문에 콘솔에 undefined가 찍힘

• console.log(fc2) : 자기자신의 실행컨텍스트의 지역변수 fc2의 값 30을 출력
• console.log(fc3) : 스코프체이닝(변수를 찾는 순서)에 따라서 자기자신의 실행컨텍스트에서 먼저 지역변수 fc3을 찾는다. -> 없으면 상위 실행 컨텍스트에서 찾는다. -> 상위에도 없으면 전역 컨텍스트에서 찾는다. => 따라서 콘솔에는 전역 컨텍스트에 있는 전역변수 fc3의 값 undefined가 출력된다.
• console.log(fc1) : 전역변수 fc1을 찾는다
• console.log(fc4) : fc4는 var 없이 선언된 전역변수라 함수 내에 위치해 있어도 콘솔에 값이 출력될 수 있다.

3. this에 대해서(window)

this는 자기참조 포인터이다. 일반함수와 중첩함수에서의 this는 window를 말하지만 이벤트에서의 this는 이벤트가 발생한 주체를 말한다.

HTML

<button id="btn1">버튼1</button>
<button id="btn2">버튼2</button>

Javascript

function f3() { 
  var num1 = 10;
  console.log(this); // window => 일반 함수 내의 this
  function f4() {
    console.log(this); // window => 중첩 함수 내의 this
  };
  f4();
};
f3();

window.addEventListener('DOMContentLoaded', (e) => {
  // DOMContentLoaded : 초기 HTML 문서를 완전히 불러오고 분석했을때 실행하겠다

  var btn1 = document.getElementById("btn1");
  // 변수 btn1은 문서 내에서 id가 btn1인 요소
  var btn2 = document.getElementById("btn2");
  // 변수 btn2은 문서 내에서 id가 btn2인 요소

  btn1.addEventListener('click', eventClick);
  // btn1이 클릭되면 eventClick이라는 이벤트를 실행시키겠다
  btn2.addEventListener('click', eventClick);
});

function eventClick(e) {
  console.log("버튼 클릭");
  console.log(this);
  // 함수가 실행되면 콘솔에 메시지가 출력되고 이 이벤트가 발생한 주체(=this)가 콘솔에 출력된다.
};

✍ Check

일반 함수 내의 this : window
중첩 함수 내의 this : window
이벤트 내의 this : 위의 코드에서 btn1을 클릭했을때는 this가 btn1이 되고 btn2를 클릭해서 이벤트가 발생하면 그때의 this는 btn2가 된다. 따라서 이벤트에서의 this는 이벤트가 발생한 주체를 말한다.