특히 이러한 형태로 Setter 메서드를 생성할 때 주로 사용하게 되는데 JavaScript에도 this가 있다.
JavaScript this
* 렉시컬 스코프
var x = 1;
var foo : function() {
var x = 10;
bar();
}
var bar : function() {
console.log(x);
}
foo();
bar();
위와같이 두 개의 함수를 선언하고 실행했다. 결과는 둘 다 1이 나올것이다. 이처럼 렉시컬 스코프는 어디서 실행하였는지가 중요한게 아니라 어디서 선언하였는지 중요한 것이다. foo()함수에서 실행했던간에 bar()함수는 전역에서 선언하여 전역 변수를 사용하게 된 것이다.
자바스크립트에서 this는 호출되었을때 동적으로 바인딩 된다.
foo() {
console.dir(this);
}
foo(); //window
var obj = {foo : foo;}
obj.foo(); // obj
var instance = new foo(); //instance
이런식으로 말이다. this는 기본적으로 전역변수에 바인딩 된다. 심지어 내부 함수로 설정되었더라도 일반 함수, 메소드, 콜백함수 어디에서 선언되었든 관게없이 this는 전역객체를 바인딩한다.
기본적으로 java로 이루어진 언어이기 때문에 연산자나 기호는 java랑 비슷하다 하지만 변수 선언 만큼은 다르다.
var 변수이름 = 값;
이런 형식으로 변수를 선언하는데 java처럼 자료형을 지정하지 않는다. 그렇기 때문에 초기화와 동시에 자료형이 결정된다. 따라서 초기화하지 않고 선언만하게되면 undefined자료형을 가진다. 이런 방식의 언어를 동적타입의 언어라고 한다.
js에서 변수를 선언하는 방법은 이렇게 3가지가 있다. 세가지 변수 선언 방식이 차이점을 가지는 포인트 4가지는 재선언, 재할당, 호이스팅, 범위가 있다.
var : 재선언 가능, 재할당 가능, 호이스팅이 이루어진다, 함수 레벨 스코프다.
let : 재선언 불가능, 재할당 가능, 호이스팅이 이루어지지 않는다, 블록 레벨 스코프다.
const : 재선언 불가능, 재할당 불가능, 호이스팅이 이루어지지 않는다, 블록 레벨 스코프다.
선언하지 않음 : 선언하지 않고도 변수를 사용해서 값을 할당할 수 있다. 선언하지 않고 변수명을 통해서 값을 찾을땐 암시적 전역변수로 선언이 되어 불러진다. 이는 호이스팅이 일어나지 않으며 추후에 오류를 만들 수 있다. 따라서 'use strict'를 선언하여 엄격한 룰 적용을 하는것으로 방지할 수 있다.
* 여기서 호이스팅이란 해당 선언문을 스코프의 선두로 가져간것 처럼 동작한다는 것이다.
* javascript의 문자열은 inmmutable(변경 불가능)하므로 문자열의 일부를 수정할 수 없고 새로운 재할당을 해도 문자열이 바뀌는것이 아니라 새로운 문자열이 생성되고 참조하는 주소가 바뀌는 것이다.
* 함수 레벨 스코프는 선언된 함수 내에서 사용할 수 있다. 따라서 함수 외부에서 선언하게 되면 전역 변수가 되게 된다. 그리고 var선언 특성상 재 할당이 가능하므로 변수가 바뀌는 위험이 있을 수 있다.
* 블록 레벨 스코프는 선언된 블록 내에서 사용할 수 있다. var의 단점으로 인해 ES6부터 let과 const가 생기게 됐다.
var t = 1;
document.write(t+”<br>”); // 1
var t = 2;
document.write(t+”<br>”); // 2
t = 3;
document.write(t+”<br>”); // 3
document.write(r+”<br>”); // undefined
var r = 4;
document.write(u+”<br>”); //
이 처럼 var는 t를 두번 선언하는 재선언, t의 값 변경인 재할당, r을 아래에 선언해도 값은 할당이 안되지만 선언 자체가 가능하다. 선언 자체가 되지 않으면 u처럼 아무 결과도 나오지 않는다.
let t = 1;
document.write(t+”<br>”); // 1
let t = 2;
document.write(t+”<br>”); //
이렇게 let으로 선언하면 두 번째 let t=2에서 아무 스크립트가 나오지 않는것을 볼 수있다.
let t = 1;
document.write(t+”<br>”); // 1
t = 2;
document.write(t+”<br>”); // 2
document.write(r+”<br>”); //
let r = 3;
이처럼 재할당을 할 경우 값이 제대로 나오는 것을 볼 수 있고 호이스팅이 이루어지지 않아 변수 선언자체가 되지 않는다.
const t = 1;
document.write(t); // 1
const t = 2;
document.write(t); //
t = 3;
document.write(t); //
document.write(r); //
const r = 4;
const는 재선언, 재할당, 호이스팅이 불가능한것을 볼 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>
<body>
a<br>
<script>
document.write("b"+"<br>");
var a,b,c;
a=5;
b=6;
c=a+b*10;
let d = 'string';
let e = ' linked string';
let f = a+" "+d;
document.write(a+"<br>");
document.write(c+"<br>");
document.write(d+"<br>");
document.write(f);
</script>
</body>
</html>
또한 js는 객체지향 언어이기 때문에 객체도 작성이 가능하다. 항상 key:value형식으로 작성해야한다.
객체 이므로 메서드 선언도 가능하다. 단, key:value 형태를 유지한다. 메서드명 : function() {}형식이다.
javascript의 자료형
javascript의 자료형으로는
number : int,float 전부 하나의 자료형으로 표현된다.
string : 문자열
null
undefined : 할당되지 않았다.
Boolean
여기까지 원시타입의 immutable(primitive)한 자료형으로 변경이 불가능하다. 실제로 값을 변경 할 수 없는것이 아니라 메모리 구조상 참조하고 있는 주소에 할당된 값을 변경할 수 없다. 따라서 재 할당시에 메모리에 새로 할당될 값이 생성되고 변수가 참조하고 있는 위치가 변경되는 것이다.
(*) 여기서 input이랑 button으로 똑같은 기능을 하는 두 개를 작성했는데 이유는 문득 input으로 만든 버튼과 button으로 만드는것이 다를까 라는 근본적인 궁금증 때문이다. input으로 만드는것으로 연습해 보자
script태그
script태그 내에 자바스크립트 코드를 작성하면 된다.
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo"></p>
<script type="text/javascript">
document.write("hello");
document.getElementById("demo").innerHTML = "My First JavaScript";
</script>
</body>
</html>
그럼 결과를 볼 수 있다. 다만 script를 가장 마지막에 선언해야 한다. 이유는 모르겠다. p태그를 script태그 아래에 선언 했더니 아무것도 나오지 않는다. 그 이유는 좀 더 찾아서 새로 포스팅 해보겠다.
function(함수)
js는 객체지향의 함수이므로 이벤트 실행시에 발생하는 함수를 작성할 수 있다.
<!DOCTYPE html>
<html>
<head>
<title>javascript</title>
<meta charset="utf-8">
</head>
<body>
<h2>JavaScript in Body</h2>
<p id="demo">함수 실행 전</p>
<input type="button" value="함수 실행" onclick="func()"><br><br>
<input type="button" value="다른 함수" onclick="fun()"><br><br>
<script>
document.write("default write");
function func(){
document.getElementById("demo").innerHTML = "함수 실행 됨";
}
function fun() {
document.write("다른 함수");
}
</script>
</body>
</html>
이런 식으로 script태그 내에 선언하면 된다. 이벤트 부분에 함수를 두어 해당 이벤트 발생 시에 해당 함수가 실행된다. 여기서 document.write()를 사용해서 하면 다음에 자동으로 추가될줄 알았는데 새로운 문서가 생기고 거기에 write되는것을 확인했다. 앞으로 함수에 document.write()는 잘 안쓸것 같다.
혹은 .js 로 끝나는 확장자를 가진 파일을 만들어 연결하여 사용할 수도 있다. 마치 css적용하는것 처럼 말이다. 하지만 css와 다른점이 있다면 css는 link로 연결하고 style태그를 통해서 다른 css효과를 줄 수 있지만 script는 그렇지 않다. 두 개의 함수를 각각 하나는 script태그 내부에 하나는 js파일에 두고 실행하면 script태그 내에 있는 함수는 작동되지 않음을 볼 수 있다.
