javascript01

발표자 : zero86
Javascript study
문법, 변수, 스코프

INDEX
01
Javascript 문법
02
Javascript 변수
03
Javascript 스코프

Javascript 문법 및 정의
정의
- 프로그래밍 언어 / 인터프리터 언어(별도의 컴파일 과정을 거치지 않고 즉시 실행)
- Prototype 기반 언어
- 객체지향언어이자 1급 함수를 취급하는 언어
- 정적인 HTML 문서를 동적인 상태로 조작가능(DOM : Document Object Model)하도록 해주는 요소
문법
- 인라인 작성(inline)
01 - Javascript 문법
<ul>
<li onClick='alert("월월")'>강아지</li>
<li>개돼지</li>
<li onClick='alert("멍멍")'>월요일만 짓는개</li>
</ul>

문법
- 인터널 작성(internal)
<html>
<head>
</head>
<body>
<div id="dog">
div dog
</div>
</body>
</html>
<script>
var dogElement = document.getElementById('dog');
dogElement.addEventListener('click', function() {
alert('인터널 멍멍!');
});
</script>
- 익스터널 작성(external)
script 태그 src 속성에 *.js 파일을 지정
<html>
<head>
</head>
<body>
<div id="dog">
external dog
</div>
</body>
</html>
<script src='app.js'>
</script>

문법
<html>
<head>
</head>
<body>
<div id="dog">
div dog1
</div>
</body>
</html>
<script>
// window 객체에 이벤트 등록(이벤트명, 이벤트 완료 시 실행할 함수 작성)
window.addEventListener('DOMContentLoaded', function(){
alert('DOMContentLoaded..'); // 알림창 출력
});
// window 객체에 이벤트 등록
window.addEventListener('load', function() {
alert('All assets are loaded..'); // 알림창 출력
});
/* window.onload = function() {
alert('body onload..');
};
document.body.onload = function() {
alert('body onload..');
} */
</script>

Javascript 변수
변수정의
var 키워드 사용
예) var a;
변수할당
var a = 10; // 10이라는 값을 a변수에 할당
변수사용
var a = 'Hello World';
console.log(a); // 콘솔에 a 변수 내용 출력
02 - Javascript 변수

Javascript 변수
자바스크립트는 느슨한타입, 동적타입 특징을
가지고 있다. 그말은 변수의 타입을 미리 선언할
필요가 없다는 뜻이다.
원시타입(Primitive Type)
boolean / number / string / null / undefined
참조타입(Reference Type)
object : 함수, 배열, 일반 객체
null 같은 경우, typeof 연산자를 보면 object라
고 출력이 되지만, 원시타입이며 설계오류이다.
변수타입(자료형)
var a = 1;
var aa = 1.54;
var b = 'Hello World';
var c = [];
var cc = new Array();
var d = {};
var e = function() { };
var f = null;
var g = undefined;
var h;
var i = true;
console.log(typeof a); // number
console.log(typeof aa); // number
console.log(typeof b); // string
console.log(typeof c); // object
console.log(typeof cc); // object
console.log(typeof d); // object
console.log(typeof e); // functoin
console.log(typeof f); // object
console.log(typeof g); // undefined
console.log(typeof h); // undefined
console.log(typeof i); // boolean

Javascript 변수
call By Value
- 원시타입인 경우, 콜바이벨류로 동작
- 해당값을 복사하며, 전혀 다른 주소다
* 원시타입은 값을 변수에 그대로 할당
call By Reference
- 원시타입이 아닌 경우, 콜바이레퍼런스로 동작
- 값을 복사하나, 변수에 할당된 주소값을 복사
* 레퍼런스 타입은 원본값을 참조하기 위해, 변
수에 주소값을 할당
function callByValue(num) {
num++;
console.log(num); // 101
console.log(numA); // 100
}
function callByReference(obj) {
obj.num++;
console.log(obj.num); // 101
console.log(objA.num); // 101
console.log(this.obj);
}
var numA = 100;
var objA = {
num : 100
};
var obj = {
num : 200
};
console.log(window.obj);
callByValue(numA); // numA 인자를 넘겨준다.
callByReference(objA); // objA 인자를 넘겨준다.

Javascript 변수
복사 = 연산자를 이용해서 변수의 내용을 복사
pass by value 이기 때문에, 복사한다고 볼 수 있
다.
예) var a = 10;
var b = a; // b변수에는 a변수에 있는 값이 할당된다.
깊은복사(Deep copy)
값을 완전히 복사한다. 독립적이다.
얕은복사(Shallow copy)
참조값을 복사한다. 참조값이 복사되었기 때문에,
독립적이지 않다.
그렇다면, 참조타입에 대한 깊은복사를 하려면?
1. 새로운 배열 / 객체를 생성하여 담는다.
2. 재귀형식의 사용자 정의 함수 작성
3. JSON.stringify() / JSON.parse() 메서드 이용
var a = 10;
var aCopy = a;
aCopy = 100;
console.log(a);
console.log(aCopy);
var b = {num : 10};
var bCopy = b;
bCopy.num = 100;
console.log(b)
console.log(bCopy)

Javascript 변수
값 변환
변수에 담긴 어떤 값을 다른 타입의 값으로 바꾸
는 과정.
명시적이면, 타입 캐스팅
암시적이면, 강제변환 이라고 한다.
예)
var a = 7;
var b = a + ''; // 암시적 강제변환
var c = String(a);
//명시적 강제변환 함수 new 키워드가 붙지 않
기 때문에, 객체를 생성하는 것이 아니다.
String()
Number()
Boolean()
False 한 값
JS에서는 일부값을 boolean 으로 강제변환했을
때, false가 되는 값들이 존재한다.
- undefined
- null
- false
- +0 / -0 / NaN
- '' (빈문자열)
위 값들을 boolean 으로 강제변환하면 false다.

정의
- 접근할 수 있는 영역
- 유효범위를 의미(유효범위는 어느범위까지 참조하는지 접근성을 의미)
종류
- global scope or 전역 스코프
- 함수 레벨 스코프
- ES6 부터는 블록레벨스코프를 지원한다.
03 - Javascript 스코프
var hello = 'Hello CSS-Tricks Reader!' // 전역변수
function sayHello () {
console.log(hello)
}
console.log(hello) // 'Hello CSS-Tricks Reader!'
sayHello() // 'Hello CSS-Tricks Reader!'
function sayHello () {
var hello = 'Hello CSS-Tricks Reader!' // 함수레벨스코프
if(true) {
var test = 'test IF';
}
console.log(hello)
console.log(test); // test IF
}
sayHello() // 'Hello CSS-Tricks Reader!'
console.log(hello) // Error, hello is not defined

렉시컬 스코프
- 정적스코프라고도 불리운다.
- 대부분의 언어들은 렉시컬 스코프를 따른다.
- 스코프가 정의가 되어있는 해당 문맥(context)에서 결정이 된다.
- 내부에서 외부로 검색하여 올라간다(scope chain) / 외부에서 내부로 검색 또는 참조할수 없다.
- 스코프에서 검색이 되어 감지가되면, 더이상 검색을하지 않는다.
function outerFunction () {
var outer = 'outer function!'
function innerFunction() {
var inner = 'inner function!'
console.log(outer) // outer function!
}
console.log(inner) // Error, inner is not defined
}

정리
- 스코프는 어디서 어떻게 변수를 찾는가를 결정
(영역이 어디까지일까?)
foo 스코프에서 a / b 변수를 탐색한다.
b 를 찾지못해, 글로벌 스코프까지 탐색영역을 확대한다.
앗 b를 찾았네!! 가져다 쓰자.
현재 스코프에서 변수를 찾기 시작하고, 찾지 못하면 상위 스코프로 한 단계씩 올라간다.
최상위 스코프에 도달하면 변수를 찾았든, 못찾았든 탐색을 중단.
2 + 2 = 4
function foo(a) {
console.log(a+b);
}
var b = 2;
foo(2); // 4

javascript01

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Similar to javascript01

Similar to javascript01 (20)

More from ChangHyeon Bae

More from ChangHyeon Bae (14)

javascript01