javascript : Ecam6+ 타입스크립트 문법
자바스크립트 : var a = 10;
타입스크립트 : var a : number = 'aa' // 변수에 타입을 지정함
프론트엔드 : vue, react
visual code에서 작업할꺼임
ECMAScript 6
○ ECMAScript 란?
ECMAScript (ES)는 ECMAScript International에서 표준화 한 스크립팅 언어 사양.
응용 프로그램에서 클라이언트측 스크립팅을 하기 위해 사용됨.
JavaScript. Jscript, ActionScript 등은 모두 ECMAScript 스펙 적용을 받는다.
( http://www.ecma-international.org/ecma-262/7.0/index.html )
- ECMAScript2015( ECMAScript 6)
- ECMAScript2016( ECMAScript 7)
○ ECMAScript 6 버전에서 사용 가능한 기능
Support for constants ( 상수지원)
Block Scope ( 블록 범위 )
Arrow Functions ( 화살표 기능 )
Extended Parameter Handling ( 확장 매개변수 처리 )
Template Literals (템플릿 리터럴 )
Extended Literals ( 확장된 리터럴 )
Enhanced Object Properties ( 향상된 개체 속성 )
De-structuring Assignment ( 비 구조화 과제 )
Modules ( 모듈 )
Classes ( classes )
Iterators ( 이터레이터 )
Generators ( 제너레이터 )
Collections ( 컬렉션 )
New built in methods for various classes ( 새로운 메서드 )
Promises ( 프라미스 )
○ strict 모드 (엄격 모드)란?
ECMAScript 5에서 추가된 기능으로서, 느슨한 Javascript에 강력한 제약조건을 설정할 수 있다.
대표적으로 변수 선언시 반드시 var 사용해야 된다.
<script type="text/javascript">
mesg = "hello";
console.log(mesg);
</script>
<script type="text/javascript">
"use strict"
mesg = "hello";
console.log(mesg);
</script>
<script type="text/javascript">
"use strict"
var mesg = "hello";
console.log(mesg);
</script>
let, const 및 블록 스코프
○ var 키워드
- 변수 선언시 사용
- 변수 종류 2가지 ( 전역 변수, 로컬 변수 )
전역변수와 로컬변수로 구분하는 이유는 스코프(scope)가 달라지기 때문.
일반적으로 javascript는 블록 스코프가 아닌 함수 스코프(function scope)를 따른다.
ES6는 변수를 설정하기 위한 새로운 2가지 키워드를 제공 ( let 과 const )
<title>Document</title>
<script type="text/javascript">
//1. var 변수
var n = 10;
var n = "홍길동";
console.log(n);
if (true) {
var x = 100; //함수 scope
}
console.log(x);
</script>
for (var i = 0; i < 10; i++) {
console.log("for i = ", i);
}
console.log(i);
console.log(m); //undefined
var m = -10
console.log(m);
○ let 키워드
- var 키워드의 문제점 해결 목적으로 등장.
- let 키워드를 사용하면 함수 스코프가 아닌 블록 스코프를 따른다.
따라서 블록밖에 동일한 이름의 변수가 있어도 scope가 다르기 때문에 변수에 각각 값을 설정할 수 있다.
- let 변수는 호이스팅(hoisting)되지 않는다
let n2 = 10;
let n2 = "홍길동";
이렇게 사용하는거 불가능
if (true) {
let n3 = "hello"; //블럭 scope
}
console.log(n3);
함수 밖에서 사용 불가능
for (let j = 0; j < 10; j++) {
console.log("for j = ", j);
}
console.log(j);
○ const 키워드
- 상수 작성시 사용.
- const 변수는 선언만 할 수 없으며 반드시 초기화 필요.
- const 변수는 값을 변경할 수 없는 것만 제외하고 let 변수와 기능이 동일.
const str = "홍길동";
str = "aaa";
const mesg = "hello";
try {
mesg="world";
} catch (e) {
console.log("상수값 변경 불가");
}
JSON
이런 json 도 만들 수 있음
let address = "서울" //변수 값이 객체에 사용
let my = "email" //변수 값이 객체의 키값이 됨
var user={
username:"홍길동",
age:20,
address,
[my]:"aaa@naver.com" //키값이 변수로 설정함
}
console.log(user.username);
console.log(user.age);
console.log(user.address);
console.log(user.email);
값을 안 넣으면 이전에 설정한 변수의 값을 value로 갖고
key값에 [] 하면 key랑 같은 이름의 변수의 값을 key값으로 가짐
{
getName: function () {
return this.username;
},
getAge: function () {
return this.age;
},
getAddress: function () {
return this.address;
}
}
console.log(user.getName());
console.log(user.getAge());
console.log(user.getAddress());
var person = {
name:"홍길동",
"age":20,
parent:{
name:"홍대감",
job:"사또"
}
};
console.log(person.name);
console.log(person.age);
console.log(person.parent.name);
console.log(person.parent.job);
console.log(person["parent"]["name"]);
console.log(person["parent"]["job"]);
이런 식으로도 가능
{
username:"홍길동",
setName: function(name){
this.username=name;
}
}
user.setName("이순신");
console.log(user.username);
디스트럭처링 ( destructuring )
○ De-structuring
- 디스트럭처링은 객체의 구조를 해체하는 것을 의미한다.
배열이나 객체의 데이터를 해체하여 다른 변수로 추출할 수 있다.
이러한 이유 때문에 ‘분할 할당’이라고도 한다.
가. 배열 디스트럭처링
= 기준으로 양쪽 모두 배열형식으로 지정해야 된다. 인덱스를 기준으로 값을 할당한다.
//1. 일반적인 배열값 얻기
let arr=[100, 200];
var n = arr[0];
var n2 = arr[1];
console.log(n, n2);
//2. 배열 객체 분할 할당
let arr2=[1000, 2000];
var[n, n2] = arr2;
console.log(n, n2);
var[n, n2, n3] = arr2;
console.log(n, n2, n3);
크기가 다르면 undefined 들어감
var[n, n2, n3=0] = arr2; //default 값 설정
console.log(n, n2, n3);
var[, , x] = [1,2,3];
console.log(x);
원하는 위치의 값만 출력가능
//3. = 기준으로 양쪽 값과 포맷이 일치하면 된다
var[n1, n2, [n3, n4]] = [1, 2, [3, 4]];
console.log(n1, n2, n3, n4);
//4. 갯수 불일치의 경우
var [n1, n2, ... n3] = [1,2,3,4,5,6];
console.log(n1, n2, n3);
n3 이 3,4,5,6을 배열로 가짐
//5.swap
var a=1;
var b=2;
var temp = a;
a=b;
b=temp;
console.log(a);
console.log(b);
[a,b] = [b,a];이렇게 해도 됨
나. 객체 디스트럭처링
= 기준으로 양쪽 모두 객체형식으로 지정해야 된다.
Key값을 기준으로 값을 할당한다.
미리 선언된 변수를 사용하기 위해서는 반드시 () 안에 코드를 작성해야 된다
//1. 일반적인 객체 사용법
var obj = {x:100, y:200};
var n = obj.x;
var n2 = obj['y'];
console.log(n, n2);
//2. 객체 분해(이름의 동일)
var{x, y} = {x:1000, y:2000};
console.log(x,y);
var{x, a} = {x:1000, y:2000};
console.log(x,a);
이름이 다르면 undefined 들어감
//3. default value
var{x, y2=0} = {x:1000, y:2000};
console.log(x,y2);
초기 값을 지정하면 이름이 없으면 초기값이 나옴
//4. 변수명의 변경
var{x:n, y:n2} = {x:1000, y:2000}
console.log(n, n2);
다. 파라미터 디스트럭처링
호출 받는 함수의 파라미터를 객체 디스트럭처링 형태로 작성하면,
함수에서 직접 key값을 이용하여 value 값을 사용할 수 있다
//1. 배열 파라미터
function a([x, y]) {
console.log("in function : ", x, y);
};
a([10, 20]);
a([10]); //unde
값이 안들어가면 undefined 들어감
//2. 배열 파라미터
function a2([n, n2, n3=0]) {
console.log("in function a2 : ", n, n2, n3);
};
a2([10, 20]);
//3. 객체 파라미터
function b({n, n2=0}) {
console.log("in function b : ", n, n2);
};
b({n:99, n2:88});
b({n:99, n10:88});
