블록체인 기반 거래소를 만들기위해 리액트를 배워야 하고, 리액트를 배우기위해 기초언어인 자바스크립트를 배운다. 기초적인 함수의 작성법 부터 변수까지 알아야 고수개발자의 첫 걸음을 밟을 수 있다.
ES6
ES(ESMA Script) 자바스크립트(js)를 표준화하기 위해 만들어졌다. Node.js를 사용한 서버 응용 프로그램 및 서비스에도 쓰이고 있다. 해가 지날 수록 버전이 업데이트 되고 있다. 그 중 가장 큰 변화를 맞고, 클래스와 모듈을 작성할 수 있게 새로운 문법이 추가된 ES6를 기반으로 js를 배워나갈 것이다.
변수(variable)
변하는 수, 변하는 값
코드를 작성함에 있어 항상 작성하게 될 변수는 크게 예약어와 변수명으로 나눠 볼 수 있다.
/* 예약어, 변수명 */
let yoon;
yoon = 123;
const KIweb;
KIweb = 456;
console.log(yoon); // 123;
console.log(KIweb); // 456;예약어
정해진대로 작성해야 되며, ES6변수명을 선언한다.
대표적으로 let, const 등이 있다.
변수명
선언한 변수에 이름을 지어준다.
작성자 마음대로 쓸 수 있지만, 약간의 규칙이 존재한다.
- 변수명은 시작을 숫자로 할 수 없다.
- 특수문자도 적당한것 이외에 사용이 불가하다.
데이터타입
js에서 크게 두가지로 나눌 수 있다.
- 변수 하나에 하나의 데이터만 들어감
- 변수 하나에 여러개의 데이터가 들어감 (군집형)
하나의 데이터만
number
숫자만 들어가는 타입
let num;
/* 10이라는 숫자 */
num = 10;
console.log(number); // 10;boolean
true와 false (참과 거짓) 두 가지만 존재하는 타입
0: false, 1: true
let bool;
bool = true;
console.log(true); // true;
bool = false;
console.log(false); // false;string
문자형식만 들어가는 타입
문자 입력방법: '문자', "무운자"
let str;
str = '헬로우!';
console.log(str); // 헬로우!;
str = "안녀어어엉";
console.log(str); // 안녀어어엉;여러개의 데이터도
array
배열되어 들어가는 타입
let arr;
arr = [1,2,3];
console.log(arr); // [1,2,3];
/* 인덱스 */
console.log(arr[0]); 1;
console.log(arr[1]); 2;
let jjang;
jjang = ['짱구','철수','훈이'];
console.log(jjang); // ['짱구','철수','훈이'];
/* 인덱스 */
console.log(jjang[2]); // 훈이;
console.log(jjang[0]); // 짱구;- 인덱스?
배열 안에 들어있는 값들 중 배열된 순서에 맞는 값을 출력하게 한다.
컴퓨터는 수를 셀때 1부터가 아닌 0부터 세므로, 1~10은 컴퓨테에게 0~9가 된다.
let jjang
jjang[2] // jjang 배열안에 3번째로 위치한 값
jjang[0] // jjang 배열안에 1번째로 위치한 값object
배열과 비슷하나, 객체형식으로 들어가는 타입
key: value 방식으로 여러 객체를 넣을 수 있다.
let obj;
obj = {
/* key: value */
name: '짱구',
age: '7',
height: 137,
}
console.log(obj);
// {name: '짱구', age: 7, height: 137};
console.log(obj.name);
// 짱구;
console.log(obj.height);
// 137;- opj.name ?
뜻으로 'obj안에 name'이라고 생각하면 된다.
실제로 obj 변수안에 name: '짱구' 라는 변수가 들어가 있는 걸 확인할 수 있다.
연산자
저장한 데이터를 다양하게 연산해서 각각 다른 결과값을 얻을 수 있다.
연결 연산자
앞에 존재하는 값의 데이터 타입에 따라 연사자의 역할이 달라진다.
/* 숫자 + 숫자 */
console.log(1+2); // 3;
/* 문자 + 문자 */
console.log('안녕'+'하세요?'); // 안녕하세요;
/* 앞의 데이터타입과 뒤의 데이터타입이 일치된다. */
console.log(1+'안녕'); // 1안녕;
console.log('안녕'+1); // 안녕1;
/* 숫자 / 숫자 */
console.log(7/5); // 1.4;
/* 두 수를 나눈 값의 나머지값 */
console.log(7%5); // 2;비교 연산자
참과 거짓을 반환한다. (boolean 타입으로 반환된다.)
console.log(1==1); // true;
console.log(1==2); // false;
console.log(1 > 2); // false;
console.log(2 <= 2); // true;- ==
두 값이 같니? - < >
a가 b보다 크니? 혹은 작니? - <= =>
a가 b보다 크거나 같니? 혹은 작거나 같니?
논리 연산자
두개의 boolean값을 비교하여 boolean값으로 반환한다.
console.log(true && true); // true;
console.log(true || false); // true;
console.log(!true && true); // false;- &&(and)
값 && 값 : 둘다 true여야 true 반환 - ||(or)
값 || 값 : 둘 중 하나만 true여도 true 반환 - !(not)
!true, !false : 해당 boolean값을 반대값으로 바꿔줌
ex) !true == false
비교,논리 연산자
두 수를 비교하여 boolean값으로 반환한다.
그리고 그 두개의 boolean값을 비교해서 boolean으로 반환해준다.
비교랑 논리 연산자는 둘이 짝꿍!
console.log(1<2 && 2<3); //true
console.log(1<2 && 3<2); //false
console.log(1<2 || 2<3); //true
console.log(1<2 || 3<2); //true
console.log(!(1<2) && 2<3); //false
console.log(1<2 && 2<3); //true