8시간만에 완성하는 속성 자바스크립트
ex01~
<script>
console.log("11111");
var v1 = "aaaa";
// script 태그 안에 있는 자바스크립트를 실행하는 중에 오류가 발생하면
// 즉시 script 태그의 실행을 중단하고 다음 태그로 간다.
console.lag("오류 발생!"); // log() 함수의 이름을 잘못 작성하여 lag()로 작성하였다. 그래서 실행 오류!
var v2 = "bbbb";
console.log("11111 okok!");
</script>
<script>
console.log("22222");
console.lag("오류 발생!");
console.log("22222 okok!");
</script>
<script>태그 내에서 오류가 발생하면 바로 다음 script태그로 넘어간다.
그래서 오류발생! 문구를 띄우지 않고 바로 그 자리에서 멈춘다. 바로 다음 script태그로 넘어감!!
스크립트 코드를 head에 두면 그 코드가 실행시간이 길어질수록 사용자는 body가 출력되기 전까지 하얀 화면만 봐야한다.
예전에는 script 태그를 head 태그 안에 두었다. 그 시절에는 실행할 자바스크립트 코드의 양이 많지 않았기 때문에 HTML 본문을 출력하기 전에 자바스크립트를 두어도 괜찮았다. 그러나 최근에는 사용자의 다양한 행위와 동적인 화면을 지원하기 위해 자바스크립트 코드의 양이 굉장히 많아 졌다. 그래서 head 태그에 있는 자바스크립트를 실행하는 동안 body 태그의 내용은 화면에 출력할 수 없기 때문에 화면 출력이 느려지게 되었다. 이런 이유로 사용자가 지루해 하지 않도록 하기 위해 일단 화면의 일부를 출력한 후 자바스크립트를 실행하도록 script 태그를 body의 맨 끝에 두는 게 요즘 경향이다.
요즘 유저들은 2초이내(거의 1초) 페이지가 나오지 않으면 다른페이지로 가버림. 속도는 매우 중요하다..!
일단 화면을 출력시키고 사이사이 데이터를 채워주는 것이 요즘 트렌드.
자바스크립트는 인터프리터 방식(한줄한줄 실행할 때 컴파일한다.)
hoisting : 끌어올리다.
// 변수 선언을 하기 전에 그 변수를 사용하는 코드를 먼저 둘 수 있다.
v2 = "임꺽정";
console.log(v2);
var v2; // 변수 선언은 항상 script 태그를 실행할 때 제일 먼저 실행된다.
변수선언을 아래에 둘 수도 있는데 굉장히 혼란스럽다. 그러나 JS에서 이 문법을 버리기 전까진 잘 알아두어야 한다.
hoisting은 현재 태그에 선언된 변수나 함수에 대해서만 수행됨!!
변수 선언만 먼저 되는것이지 값 할당이 바로 된다는 것은 아니라는거.
<script>
"use strict"
console.log(v3);
var v3 = "유관순";
// 변수 선언만 먼저 실행되는 것이지, 값을 할당하는 코드는 원래의 순서대로 실행된다.
console.log(v3);
</script>
-----위 코드는 아래와 같다.
var v3;
console.log(v3);
v3 = "유관순";
// 자바스크립트의 객체는 마치 자바의 맵 객체 같다. // 맵 객체에 마음껏 값을 저장할 수 있듯이, // 자바스크립트 객체에도 마음껏 변수나 함수를 추가할 수 있다.
함수밖에 선언되는 변수 : window객체(global 변수)
javascript document
javascript문법을 표준화시켜서 ECMA Script(=EXMA-262 명세)를 정의했다.
대부분의 브라우저는 ECMAscript 2015판을 지원한다. 문법이 최신이라고 모든 브라우저가 그 문법을 지원하지는 않는다는거 유념할 것.
맵객체의 값을 분해해서 받을 수 있다. 자바에선 지원하지 않는데 아주 편함
// destructuring 문법을 사용하여 key와 value를 분해하여 받는다.
for (var [key, value] of obj2) {
console.log(key, "=", value);
}
구조분해
배열분해는 대괄호, 객체분해는 중괄호
const 상수 변수는 반드시 초기화 시켜야한다! const는 hoisting된다. 그래서 에러뜨면 다른걸 아무것도 실행 못함. 그냥 예외 발생!
let 변수는 사용범위가 블록으로만 한정된다.(block-scoped) 그 블록을 벗어나면 사용할 수 없음.
함수도 변수와 같이 window(global)객체에 소속된다.
보통 window는 생략할 수 있음.
f1("hi");
window.f1("hi");
자바스크립트개발자들의 난관 - 클로저
함수안에 정의된 함수 : inner-funtion, newsted function이라고도 한다.
<script>
"use strict"
// 함수 안에 정의된 함수를 보통 클로저(closure)라 부른다.
// => inner function, nested function 이라고도 표현한다.
// => 클로저의 핵심 개념
// closure에서 바깥 함수의 로컬 변수를 사용할 때,
// 바깥 함수의 호출이 끝나면 해당 로컬 변수가 제거되기 때문에
// 클로저는 존재하지 않는 변수를 사용하는 상황이 발생한다.
// 그래서 이런 경우를 방지하고자,
// 클로저에서 사용하는 바깥 함수의 로컬 변수는 클로저의 별도 메모리에 복제된다.
//
//
function createGreeting(name) {
var message = name + "님 반갑습니다!";
// 클로저 만들기
var f = function() {
console.log(message); // 클로저에서 바깥 함수의 변수를 사용하기
// 클로저가 바깥 함수의 로컬 변수를 사용하면,
// 내부적으로 클로저 메모리에 복제해 둔다.
// 따라서 바깥 함수의 호출이 끝나 로컬 변수가 사라지더라도 영향을 받지 않는다.
};
return f;
}
var test1 = createGreeting("홍길동");
var test2 = createGreeting("임꺽정");
test1();
test2();
</script>
클로저 ex03 exam11-3 잘 살펴보기!
자바스크립트에서 함수는 세미콜론을 빼도 된다. 하지만 그걸 섬세하게 하기는 굉장히 어려운 일인데 구글에서는 전부 다 세미콜론을 붙인다. 나는 세미콜론 붙이는게 더 편할 것 같다..
자바스크립트에서는 함수도 객체다. 그래서 객체에 임의의 프로퍼티 값을 추가할 수 있다.
자바스크립트 글로벌함수 exam16~