JavaScript 변수,연산자 그리고 조건문과 반복문

안녕하세요 개발적금입니다.

요즘 CSS를 배우는데 너무어려워서

블로그를못올렸는데 오늘 한번에 업데이트 하겠습니다..

목차

1. 변수

 

2. 연산자

 

3. 조건문

 

4. 반복문

 

먼저 배우기전에! Javascript란?

웹페이지 기준으로 HTML과 CSS로 그림과 색깔을 칠한다 라고 표현을하면

Javascript는 애니메이션 효과를 부여해준다고 해야할까요

동적인것을 쉽게 잘 표현하기위해 사용합니다!

 

1. 변수란?

 

"하나의 값을 저장하기 위해 확보한 메모리 공간자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다"

라고 정의를 하는데, 변수선언까지 먼저 알아보고 설명드리겠습니다.

 

" let num = 2;"

" 예약어  변수명 대입연산자 변수값"

 

예약어는 기능이 있는,javascript에서 사용되는 문법같은것이다.

 

변수명은 예약어를 구분할수있는 변수명이다.

 

대입연산자는 "같다" 라는 의미가 아니라 변수값을 대입하겠다. 라고 생각해야한다

(뒤에서 설명하겠지만 "같다"라는 의미는 == 혹은 === 로 사용된다..)

 

변수의 정의에대해서 그림으로 설명드리겠습니다.

let num = 2; 라고 선언을했는데 그말은 num이라는 공간에 2라는 변수값을 넣겠다 대입하겠다라는 말로

 

num

num이라는공간에 2가 들어간 모습입니다.

 

여기서 주의해야 할점은 let이라는 예약어는 재할당이 가능하지만 재선언은 안됩니다..

let num = 5;

console.log(num);

num = 10;

console.log(num);

이렇게하고 실행 시키게되면 값은

5

10

이라고 나옵니다.. 처음에 num공간에 5를 넣었고 log를 실행했을때 5가 출력이됩니다.

그리고 다시 num이라는공간에 10을 재할당을 해주었습니다.

다시 log를 실행했더니 10이 출력이되었습니다.

 

const라는 예약어입니다.

 

const는 재할당도 안되고,  재선언도 안됩니다!

const num = 1;

num = 2;

라고하면 에러가 날것입니다!

 

2.연산자

 

+ - * / % 가 있으며

let num1 = 10;

let num2 = 10;

 

console.log(num1 + num2); -> 더하기

20이 출력되게 됩니다.

console.log(num1 - num2); -> 빼기

0이 출력되게 됩니다.

console.log(num1 * num2); -> 곱하기

100이 출력되게 됩니다.

console.log(num1 / num2); -> 나누기

1이 출력되게 됩니다.

console.log(num1 % num2); -> 나눈값에서 나머지값 (10에서 10을 나눴을때 남은값)

0이 출력되게 됩니다.

 

단항 산술 연산자 라는것이 있는데

++ -- 입니다

let num = 10;

num++;

console.log(num);

출력해보면 11이 출력됩니다.

- num이라는 공간안에 10이라는값을 넣었고

- num을 1증가시켜달라는 의미입니다. / num--;를 하면 9가 출력되겠죠?

 

여기서 헷갈리는점 한가지가 발동이됩니다.

 

let num = 1;

num++;

console.log(num);

num--;

console.log(num);

let num2 = 2;

// 값호출후 , 후 증가

console.log(num2++);

// 선 증가후 , 후 값호출

console.log(++num2);

출력값이 어떻게 나올지 생각해보세요!

num 출력값	num공간에 있는값
2	2
1	2
num2 출력값	num2공간에 있는값
2	3
4	4

++가 앞에있냐 뒤에있냐에 따라서 출력값이 달라집니다

값을 먼저 호출후에 , 증가시킬건지

값을 먼저 증가시킨후에 , 호출할건지

 

헷갈리지만 연습을 많이 해봐야할것같아요

 

3. 조건문

 

javascript에는 true와 false형태(boolean 형태)로 조건문을 작성할수있습니다.

 

if(10 > 2){

<!-- true일때만 작동됩니다-->

 console.log("10은 2보다 큽니다");

}else{

<!-- false일때만 작동됩니다-->
 console.log("false");

}

 

출력하게되면 "10은 2보다 큽니다" 라고 출력이 될것입니다.

 

4. 반복문

 

javascript에는 반복문이 존재하는데 그중 하나인 for문을 배웠습니다.

 

for(let i = 1 ; i < 10 ; i++){

 console.log(i);

}

 

하게되면 1~9까지 출력이 됩니다.

for() << ()안에는 3가지 값이 들어가게되는데 순서대로

 

1. 초기값 -> 처음에 i에게 1을 대입시키며 시작합니다(for문 시작할때 한번만쓰입니다)

 

2. 종료조건 -> 처음에 i 가 1이므로 1 < 10가 됩니다. 그러므로 종료조건에 부합하지않습니다

 

3. 증감값 -> i를 1늘려달라는 의미입니다

 

## 조건들 사이에 ;(세미콜론)은 조건들 사이의 구분값입니다##

 

작동순서를 다시정리해드리겠습니다.

1. [let i = 1 ]   <- 초기값이 시작이됩니다

2. [ i < 10 ] <- 조건이 충족하는지 확인을합니다

3. [console.log(i)] <- i값을 출력시킵니다.

4. [i++] <- 마지막으로 i를 ++시켜줍니다

5. [ i < 10] <- 증가된 i값이 조건에 충족하는지 확인합니다.

6. [console.log(i)] <- 증가된 i값을 출력시켜줍니다

7. [i++] <-증가된 i값을 또 ++ 시켜줍니다.

8. [ i < 10 ] <- 또증가된 i 값이 조건에 맞는지 봅니다

이렇게 계속 반복시켜서 마지막에 조건이 충족이 되지않는다면

반복문을 빠져나오게 됩니다!!

 

 

------------------------------------------------------------------------------

 

오늘은 javascript를 처음배웠는데 아직 처음이라그런지

재미는있지만 어려운것같습니다..

봐주셔서 감사합니다