2021. 8. 2. 20:48ㆍWEB/Java Script
1. 출력
타 언어의 print, printf의 역할을 해주는 것이 console.log()
문자열 : " "(큰 따옴표), ' '(작은따옴표) 둘 중 편한 것을 사용
숫자 : 따옴표 없이 숫자로만 표현
앞서서 웹이 존재하려면 기본 구조의 틀을 잡아주는 HTML이 필요하다고 했다
HTML의 구조 안에서 JS가 동작하기 위해서는 서로 연결될 수 있게 설정을 해주어야 한다
Line 10, <script> 태그를 이용하여 JS 호출
JS를 호출시에는 가급적 <body> 안에서도 가장 아랫부분에서 호출해주는 것이 좋다
이유는 JS를 위에서 호출 시 웹의 정보를 불러오기 전에 JS의 코드부터 읽기 때문에
웹의 정보가 화면에 출력되기까지 오랜시간이 소요됨을 방지하기 위함이다
위 과정들을 정상적으로 수행해주었다면 아래와 같은 화면을 콘솔 창에서 확인할 수 있다
2. 변수(Variables)
: 타 언어들과 마찬가지로 JS 또한 가변적인 데이터를 담아둘 수 있는 변수가 존재한다
위 코드는 보이는 그대로 사칙연산을 수행한다
이때, 5라는 데이터를 10으로 변경하고 싶다면 위 코드의 경우 4개의 5를 지우고 10을 다시 4번 작성해야 한다
데이터 그대로 사용할 시 이처럼 수정, 관리 측면에서 비효율적인데, 변수를 사용하면 한 번에 해결이 가능해진다
위 사진과 같이 변수 "First_number"를 선언 후 10이라는 값을 할당해준다
이후 변수명을 그대로 사용하여 연산을 수행하면 아래와 같은 결과를 확인할 수 있다
다시 값을 변경하고 싶다면 변수에 할당되어있는 10이라는 값만 수정하면 나머지는 자동으로 계산될 것이다
이처럼 수정, 관리 측면에서도 유용하고, 혹시 모를 실수를 방지해주기도 한다
위 예시는 4줄 밖에 되지 않는 짧은 코드지만 굉장히 긴 코드가 있다고 가정
이때, 위 예시처럼 반복하여 사용하고 있는 "Cat"이라는 문자를 "Cet"과 같은 형태로 잘못 작성할 가능성이 있다
하지만 변수를 사용한다면 이 또한 예방 가능하다
위와 같이 모두 동일한 값이 출력되는 것을 확인할 수 있다
변수를 사용하면 이처럼 실수 또한 예방할 수 있기 때문에 변수에 데이터를 담아서 사용하는 것이 좋다
3. let, const
위 변수에서 살펴본 var는 과거의 방식으로 현재는 let과 const를 사용한다고 생각
let과 const의 차이는 아래와 같다
| 함수명 | 재선언 | 재할당 |
| var (예외) | 가능 | 가능 |
| let | 불가능 | 가능 |
| const | 불가능 | 불가능 |
코드 작성 시 값을 재할당해야할 경우가 생각보다 많지 않다고 한다
일반적으로 변수 선언 시 기본적으로 const를 사용한다고 생각하고, 예외적으로 재할당이 필요한 경우에만 let을 사용
1) 재할당
위와 같이 변수 선언 후 "변수명 = 데이터" 의 형태로 작성 시 아래와 같은 결과를 확인할 수 있다
위 표에서 살펴본 바와 같이 const는 재할당이 불가능하기 때문에 에러가 발생(let은 재할당이 적용)
2) 재선언
let 재선언 결과
const 재선언 결과
위와 같이 let, const 모두 재선언은 불가능하다는 것을 확인할 수 있다
변수 생성 후 값을 할당 시 위와 같은 특징을 구분하여 필요한 함수를 적재적소에 사용하는 것이 포인트
작성된 모든 내용은 개인의 생각을 정리하여 작성된 것으로, 사실과 다른 내용이 있을 수 있습니다
이점 참고하여 주시길 바라며, 오류에 대한 수정사항을 남겨주시면 확인 후 조치하도록 하겠습니다
'WEB > Java Script' 카테고리의 다른 글
| [JavaScript] 전개 구문(Spread Syntax) (0) | 2021.08.04 |
|---|---|
| Create Web App - Vanilla JavaScript (4) Function (0) | 2021.08.03 |
| Create Web App - Vanilla JavaScript (3) Booleans, Array (0) | 2021.08.02 |
| Create Web App - Vanilla JavaScript (1) 기본 환경 설정 (0) | 2021.08.02 |
| Create Web App - Vanilla JavaScript (prologue) (1) | 2021.08.02 |