[javascript] 자바스크립트 완전 기초

 

비교 & 연산

// 비교할때는 =을 3개를 사용한다.

// 왼쪽 오른쪽 같은데 true가 나온다
5 == '5'   // true


// 왼쪽 오른쪽 같은데 false
5 === '5'  // false

// 자바스크립에서 이것만 예외이다. 왼쪽 오른쪽 같은데 false가 나옴
NaN === NaN   // false

// 사칙연산을 먼저 계산한다.
1 + 2 * 3 > 6 // 7>6 true

 

변수

// 계산 결과를 기억하기 위해 변수(variable)를 사용한다.
// 변수명은 $와 _를 제외한 특수문자는 안되고 숫자는 첫 글자로는 쓸 수 없다.
var n  = 3 * 5
console.log(n)  // 15


// 변수에 값을 꼭 안넣어도 된다. default로 undefined 들어감
var 빈값;
console.log(빈값)  // undefined

// 값을 나중에 넣을 수 있음
빈값 = 5
console.log(빈값)  // 5

 

 

null 과 undefined

// 값의 종류 : 숫자, 스트링, 불린, null, undefined


// undefied 대신 null을 사용하는 게 좋다
var n = null
console.info(n) // null

var 새로운값;
새로운값 === undefied // true
새로운값 === null //  false

var 언디파인드;

// 원래 있던 값에 값을 지웠을 때 null을 할당하면 컴터가 넣은 값인지 내가 넣은 값인지 구별 할 수 있다

console.info(언디파인드) // undefined (컴터가 기본으로 넣은 값)
console.info(새로운값)  // null (내가 값을 지운 것)

null == undefined  // true
null === undefined // false

 

 

scope

var x = 'global';

function ex() {

       var x = 'local';

       x = 'change';

}

ex()
alert(x) // global

var x = 'global';

function ex() {

       x = 'local';

       x = 'change';

}

ex()
alert(x) // change

차이점을 확인하자. function 안에 선언 했는지 안했는지 차이. 먼저 function 안에 선언되었는지 확인하고 밖으로 나간다.

 

 

 

Scope Chain

scope를 확인하기.  Enemy는 function inner 안에 들어있기 때문에 밖에서 접근 안됨.

var name = 'zero';
function outer() {
	console.log('외부', name);   // zero
    function inner() {
    	var enemy = 'nero';
        console.log('내부', name);  // zero
    }
    inner();
}
outer();
console.log(enemy); // error!! can't reference enemy

var name = 'zero';
var enemy;
function outer() {
	console.log('외부', name);   // zero
    function inner() {
    	var enemy = 'nero';
        console.log('내부', name);  // zero
    }
    inner();
}
outer();
console.log(enemy);  // undefined

 

Lexical Scope

var name = 'zero';
function log() {
	console.log(name) // nero
}


function wrapper() {
	name = 'nero';
    log();
}

wrapper();

 함수가 실행되는 순서를 확인하자!!

var name = 'zero';
function log() {
	console.log(name) // zero
}


function wrapper() {
	var name = 'nero';
    log();
}

wrapper();

 

 

closure

// 0, 1, 2, 3, 4, ... 가 찍힐 것 같은데...?
for (var i = 0 ; i < 100; i++) {
	setTimeout(function() {
    	console.log(i);
    }, i*1000)
}

// 100이 찍힌다.. function 안에 i의 값은 함수가 실행될 때 정해진다. 값을 찍으려고 할 때는 이미 i가 100까지 간 상태이다.

 

closure 문제 해결 방법 - 이거 신기하네 ㅋㅋ

for (var i = 0 ; i < 100; i++) {
	function closure(j) {
      setTimeout(function() {
          console.log(j);
      }, j*1000)
    }
    closure(i)
}


// 주로 이렇게 쓴다고 함! 즉시 실행 함수라고 함!
for (var i = 0 ; i < 100; i++) {
	(function closure(j) {
      setTimeout(function() {
          console.log(j);
      }, j*1000)
    })(i)
}