JavaScript의 기초 / 변수와 데이터타입 / 연산자 / if문, for문

1/JavaScript_ES6 와 V8 ? 

2/ JavaScript 기초 시작
1. 예약어
2. 대입연산자 (=)
3. 변수와 데이터타입
   1-number/boolean/string
   2-배열/객체
4. 연산자
   1- 산술 연산자
   2- 연결 연산자
   3- 비교 연산자
   4- 논리 연산자
5. if문/for문

 

 

1/JavaScript_ES6 와 V8 ? 

ES6 란?

ECMAScript / 즉 Javascript 언어의 표준 (6번째 에디션)

1/ Netscape이라는 회사가 웹디와 프로그래머가 이미지, 플러그인 등의 요소를 쉽게 조합해줄 언어를 필요로 하게 됨

2/ 자바스크립트라는 새로운 컴퓨터 언어를 개발함

3/ 자바스크립트 성공하게 됨

4/ MS사가 견제용으로 Jscript라는 걸 개발함

5/ MS사의 브라우저였던 Internet Explorer에서 Jscript를 지원함,

   지금은 사라졌지만 당시만 해도 IE는 브라우저 중에서 압도적인 점유율을 차지했었다.

6/ 오리지날 ver.인 Netscape사의 JavaScript vs. 점유율 높은 브라우저용으로 만들어진 MS사의 Jscript가 경쟁구도형성

7/ 비슷한 두 언어가 사람들을 혼란스럽게 함

8/ 스크립트 언어들에 대한 표준, 규격이 필요하다며 ES가 등장함

9/ 즉, ES는 프로그래밍 언어가 아닌 스크립트 언어들에 대한 표준, 규격이다. 

 

V8 이란?

Javascript 엔진, 즉 자바스크립트 코드를 실행하는 프로그램 / 인터프리터 이다. 

(문자,숫자 등 데이터, 소스코드를 컴퓨터가 읽을 수 있게끔 변환시켜주는 구글의 오픈 소스 프로그램)

 

브라우저에서 돌아가는 JS가 있고, NodeJS에서 돌아가는 JS가 있다.

각각 기본문법은 표준화되어 있지만, 둘에서 각각 쓰는 기능이 있고, 이걸 잘 구분할 줄 알아야 한다. 

둘다 쓸 수 있는 표준문법부터 배울 것이다.

 

Browser = 조작 x

NodeJS = 내 컴퓨터를 조작하는데 조작하는 데 있어서 JS로 하겠다.

JS가 각광받는 이유가 바로 NodeJS 덕분이다? 

IO 기능 INPUT/OUTPUT 파일을 받고 건네 줄 수 있는 기능

=> 이부분이 이해가 안되서..다시 공부해야할듯..

---

3/ Javascript 기초 시작

 <script type="text/javascript">
    let yjlee; 
    yjlee = 427;  
    console.log(yjlee);​

1. 스크립트 타입 = 자바스크립트라고 선언하고 시작한다. 
2. 'yjlee' 라는 변수를 선언하겠다 let
3. 'yjlee' 라는 변수에 427을 집어 넣겠다 라는 뜻 
4. 출력문 (yjlee를 출력하겠다) 
      => 브라우저가 만들어준 모듈 (브라우저에서 보고싶다)

 

1. 예약어

 

#예약어란?

프로그래밍 공부를 하기 위해선 '예약어' 라는 게 존재함을 알아야 한다.

프로그래밍하면서 내맘대로 작성해도 되는 부분과 정해진대로 써야하는 부분이 있다.

정해진 대로 써야하는 부분이 바로 예약어이다.

 

#처음 배우는 JS의 예약어 2가지

ES6 상의 변수를 선언하는 예약어이다. 

 

1- let 

2- const 

 

오늘은 let만 배웠는데, 

let => 나 이제 변수 선언한다. 라고 말하는것

let 변수

*(변수 variable = 변하는 수, 변하는 값)

* 변수 선언 시 숫자를 넣을 순 있지만, 시작은 숫자로 할 수 없다.

특수문자도 엥간하면 넣지 말기 ( - 와 _ 는 가능)

 

2. 대입연산자 (=) 

 

수학과 프로그래밍은 다른 것임을 계속 상기 시킬 것

예를 들어, x=1 은 수학과 프로그래밍에서 각자 다르게 해석된다. 

 #수학 : x는 1이다.

 #프로그래밍 : x라는 곳에 1을 집어넣겠다

 

=> 그래서 프로그래밍에서 '=' 는 대입연산자이다.

 

 

3. 변수와 데이터 타입

 

 크게 2종류로 나눠진다. 

 1- 변수 하나에 하나의 데이터

 2- 변수 하나에 여러개의 데이터 (군집형)

 

 

 #1. 변수 하나에 하나의 데이터

 

- number 숫자 int

- boolean 참/거짓만 저장할 수 있는 타입 

- string 문자 ( ' ' " " ` ` 로 감싸서 글자로 선언해주어야 컴퓨터가 읽는다)

let number;
number = 10;
console.log(number);

let bool;
bool = true;
console.log(bool);
bool = false;
console.log(bool);

let str;
str = '안녕하세요';
console.log(str);

 

 

#2. 변수 하나에 여러개의 데이터 (군집형)

   

  배열과 객체가 있다.

 

배열 array	객체 object
[ ] 로 여러개의 데이터를 묶어줌	{ key변수를 가리키는 역할 : value } 방식으로 선언한다.
arr = [1,2,3,4]	obj = { name : 'yjlee' , age : '29' }
값만 저장	값과 값에 해당하는 이름도 같이 저장함
특정한 데이터를 가져오고 싶을 때 index 개념으로 가져온다. (아파트의 호수 개념)  변수명[index]	index가 아닌 변수를 가르키는 key로 데이터를 가져온다. (힌트, 열쇠의 개념)  변수명.key
console.log(arr[2])	console.log(obj.name)

 

let arr;
arr = ['도리', '후추', '몽지'];
console.log(arr);
console.log(arr[1]);
// arr = [index0, index1, index2] 순이므로 1을 부르면 후추를 데려올 것이다. 

let obj;
obj = {
	name : '짱구',
    age : 7,
    height : 137,
    }
console.log(obj.name);
console.log(obj.height);
// obj 라는 변수 안에 name이라는 key를 가진 값을 출력해와라

변수는 메모리에 저장된다. 

 

지금까지 데이터 저장하는 방법을 배웠다면,

이번에는 데이터 저장한 것을 연산해서 다른 결과값을 얻는 것을 해보자.

즉, 연산자에 대해 배워보자.

 

4. 연산자

 1 - 산술 연산자

 2 - 연결 연산자

 3 - 비교 연산자 

 4 - 논리 연산자

1- 산술 연산자

console.log(1 + 2)
console.log(1 - 2)
console.log(2 - 1)
console.log(2 / 1)
console.log(1 / 2)
console.log(7 / 5)
console.log(7 % 5)
console.log(7 * 5)
console.log(2 ** 3)

 + - / * 등
 % 는 나머지값만 산출해주는 연산자 (7 % 5 = 2)
**는 제곱을 나타내줌 (2**3 = 2의 3승)

2- 연결 연산자

console.log('안녕' + '하세요')
console.log('안녕' + 1)
console.log(1 + '안녕')​

안녕하세요
안녕1 
1안녕 

=> 서로 다른 데이터타입이 있으면, 앞에 있는 데이터 타입에 따라서 연산자 역할이 달라진다. 
하지만, 이 경우 자바스크립트 상에서 앞에 1이 있고 뒤에 문자가 있으니 오류를 내야하는데, 그냥 1안녕으로
내버리는데 이건 자바스크립트의 오류..?

3- 비교 연산자

console.log(1==1);
console.log(1==2)
console.log(1 > 2)
console.log(2>=1)​

결과물이 boolean 타입으로 반환된다. true or false

4- 논리 연산자

console.log(true&&true)
console.log(false&&false)
console.log(1>2 || 2>1) 
console.log(!1<2)
console.log(!(1<2))​

#1. && (and)
     값 && 값 : 해당 두 값이 boolean이어야하며, 둘 다 true여야지만 true를 반환할 수 있다.
     true && false 나 false && false 는 false가 반환됨

#2. || (or)
     값 || 값 : 두 값 중에 하나만 true여도 true가 반환됨

#3. ! (not)
     ! 값 : 반대의 값이 나온다.
     !1<2 는 true로 나오고, !(1<2)는 false가 나온다.
     즉, ! 쓸 때는 괄호를 꼭 써주자. 

    비교 연산자가 두 수를 비교하여 boolean 반환하는 반면,
    논리 연산자는 두 개의 boolean을 확인해서 그 것의 boolean을 반환해주는 연산

 

 

5. if문 / for문

 

# if 문 (조건문) 

내가 만든 데이터가 true일 경우에 처리하는 방식과
내가 만든 데이터가 false일 경우 처리하는 방식을 다르게 하고 싶을 때 쓴다.

if 문을 잘 쓸 수 있는 건 boolean/비교연산자/논리연산자 이 3개를 잘 알고 있을 때이다.

if(true-즉 여기는 boolean 타입으로만 들어가면 된다){참일 때 실행하는 코드 영역}
else(false){거짓일 때 실행하는 코드 영역}

if (1>2){
 console.log('안녕')
 }
else{
 console.log('빠이')
 }​

# for 문 (반복문) 

변수선언 / boolean / 비교연산자 / 산술연산자
for(변수선언 ; 비교연산자boolean ; 산술연산자){}

for(let i=0; i<10; i++){
  console.log(i)
  }

let i=0 : 변수선언
i < 10 : 비교연산자/boolean
! ++ : 산술연산자
console.log(i) => 0 부터 9까지 나오게 됨
즉, 코드순서가 아래로만 내려가지 않고, 다시 올라가서 산술연산자쪽으로 감
언제까지? 비교연산자가 true일 때 까지만!

보충하자면,
변수 선언한 i=0 을 먼저 출력
-> 다시 올라와서 비교 연산자 실행
-> true이므로 i++ 실행하여 1을 더한다.
-> 결국 i = 0+1 = 1이 되어 '1'이 '먼저 출력된 0' 다음으로 출력됨
-> 이 i가 비교문에서 또 true일 경우 다시 올라가고 출력하고를 반복
-> false 가 나오면 멈춘다.