개발공부일지
Javascript - 원시자료형, 변수(let/const/var), 연산 본문
목차
1. 변수 (let, const, var)
2. 변수명 규칙
3. 연산
1.변수 (let, const, var)
① let
- 한번 선언된 변수명에 대해 중복으로 사용할수없다.
- 중복 사용됨을 알려준다 (작업하는데 있어 헷갈릴 일이 없어짐)
- 자주 사용되는 변수이다.
② const
- let처럼 중복으로 사용할수없고, 고정된것이라서 한번 정한 값을 바꿀수없다.
- 정해진 값들을 넣을때 사용한다.
③ var
- 한 번 선언된 변수명을 중복으로 사용이 가능한데, 중복 사용됨을 알려주지 않아서 혼용되면 문제가 생길수있다.
- ES5 이전에 사용되었고 배우는데 있어 사용하지 않기로한다.
- 호이스팅이라고 코드를 끌어올려 undifined를 넣었다고, 형식이라고 인식해두기
let num1 = 16;- let num1 → 변수를 선언한다
- num1=16 → 변수를 정의한다는 뜻
- let num1=16 → 초기화한다 (이름을 정하고 값을 정한다는 뜻)
- console.log(num1); → 16
2. 변수명 규칙 (표기법)
① 카멜형 (tempLetVaule)
- temp let value 라는 것으로, 띄어쓰기 대신 대문자로 표기해 보여주는것
② 파스칼형 (TempLetVaule)
- 카멜형과 같지만 시작을 대문자로 입력한다. → 클래스를 만들때 사용한다.
③ 스네이형 (temp_let_value)
④ 케밥 표기법 (temp-let-value)
- css에서 class,id명을 쓰는 형식으로 자바스크립트에서는 사용 할수없는 표기 → -를 빼기라고 인식함
⑤ 헝가리안 표기법 (numTempLetValue)
- 앞에 어떤 형태인지 알려주는 표기법으로,이제는 안쓰는 표기법.
3. 연산 (+, -, /, *, %)
let num1 = 16;
let num2 = 5;
console.log(num1 + num2); ≫ 21
console.log("문자열" + "문자열"); ≫ 문자열문자열
let num3 = num1 + num2;
console.log(num1 + num2 + "문자열"); ≫ 21문자열
console.log("문자열" + num1 + num2); ≫ 문자열165
▼ 실습코드
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>javascript</title>
</head>
<body>
<script>
// 자바스크립트 입력하는 엘리먼트
number = 1;
// 1+2=3
// =을 기준으로 오른쪽에 있는걸 왼쪽에 넣는다고 이해하기 --연산자
console.log(number);
console.log("안녕하세요");
// 글자자체를 보여주고싶다면 ' ' 혹은 " " 입력
string = "이것은 글자입니다.";
console.log(string);
// 안녕하세요 = "이것은 안녕하세요입니다.";
// console.log(안녕하세요);
`이것도 문자입니다.`;
bool = true;
// boolean 불값
unde = undefined;
nul = null;
// 둘다 없다는 뜻, 정확하게 분류하자면 undefinded는 값을 넣은적이 없는상태(아무것도 준게없다고 없다는), null은 내가 '없다'고 못박아둔것
// console.log(이런거없어);
// 이렇게 쓰면 혼나
var varNumber = 2;
var varString = "이것은 변수 문자열입니다";
console.log(varNumber);
console.log(varString);
// var 명령어로 변수를 만들겠다는 뜻 이름을 주고 값을 넣었음
var varUnde;
console.log(varUnde);
var varSymbol = Symbol("여기에 값을 넣어 사용한다");
console.log(varSymbol);
// 요즘 var를 잘 사용하지않아...
// 위는 ES5이전이며 아래는 ES6이후 사용함
let letNumber = 23;
const constNumber = 23;
var varNumber = 32;
console.log(varNumber);
letNumber = 32;
console.log(letNumber);
// constNumber = 23;
// let letNumber = 32;
// let은 같은 이름으로 선언된것은 중복 사용이안돼 (중복된 네임을 알려준다) 작업하는데 있어 헷갈릴일이 없음
// 하지만 var은 계속 중복으로 사용되서 혼용되면 문제가 생길수있어
// const도 두번적을수 없어. constant, 고정된거라서 한번정한값을 바꿀수없어 넣을수없어
// var잘안쓰고 let은 자주사용하고 cont는 정해진것들을넣을때 사용
// console.log(tempValue);
// console.log(tempLetValue);
// var tempValue;
// let tempLetValue;
// console.log(tempValue);
// console.log(tempLetValue);
// 위에쓴걸 가져올수있는건 runtime에서 확인할수있어, 이벤트루프에 들어왔을때! 변수명을 미리 콜스택에 저장해둠 (이름을 다 정해둠) / 실행하기 전에 한번 훑어서 코드가 있는지 확인해봄, 위치 지정까지 해둠
// var는 undifined을 아예 넣어주고, let과 const는 아예 값이 없는 상태인 변수명만!
// 다른언어들에서는 이런 경우의수가 없어
// var라고 있으면 코드를 끌어올려서 undifined를 넣었다고 형식이라고 인식해두기 -> 호이스팅
// var는 사용하지 않는걸로!!!!!!!!!!!!
// 변수명 규칙으로 1.카멜형
// tempLetVaule => temp let value 띄어쓰기를 할수없어서 대문자로 표시를해주는
// 2. 파스칼형 시작이 대문자로 시작하고 카멜처럼 눈에띄게 대문자로 구분해서 볼수있게
// TempLetVaule => 클래스를 만들때 사용
// 3. 스네이크형
//temp_let_value
// 4. 케밥 표기법 꼬치로 꽂았다는 의미로
// temp-let-value << class,id 이름을 css에서 쓰던 형식, 자바스크립트에서는 사용못함 - 빼기로 인식하기때문
// 5.헝가리안 표기법
//intTempLetValue numTempLetValue => 앞에 어떤형태인지 알려주는 -이제는 안쓰는 표기법
// 카멜형과 파스칼형을 가장 많이 사용함
// 특수문자를 넣고싶을떄는 \ 역슬래시 넣어주기
// 여기까지 원시 타입 (이름과 값이 일대일로 매칭되는)
let num1 = 16;
let num2 = 5;
console.log(num1 + num2);
console.log("문자열" + "문자열");
console.log(true + 2);
let num3 = num1 + num2;
console.log(num1 + num2 + "문자열");
// 21문자열
console.log("문자열" + num1 + num2);
// 문자열165
console.log("\u3AA1");
console.log("\{\u3AA1\}");
// 유니코드 3AA1을
</script>
</body>
</html>
★ 오늘의 포인트와 남겨두기 ★
※ 전역변수
※ 원시타입 (이름과 값이 일대일로 매칭되는)
※ = 을 기준으로 오른쪽에 있는것을 왼쪽에 넣는다고 이해하기 (대입연산자)
※ unde는 undefined으로 값을 넣은 적이 없는 상태의 '없다'
※ nul 은 null로 내가 '없다'고 지정한것
※ 예약어 : 자바스크립트내에서 이미 이름이 정해진것으로 대소문자를 구분하고, 변수명으로 사용할수없다
※ 특수문자를 넣고싶을때는 \ 역슬래시 넣어주기
※ 변수명은 내마음대로 만들수 있지만, 다른사람이 보기에 어떤걸 뜻하는지 알수있게 만들기!!!!
*** 앞으로 백엔드, 서버를 배우고 블록체인까지 배워 개발자가 되는 그날까지 화이팅!!!!!!!!!!
** 목표에 대해 생각하자!!!!!
'Javascript' 카테고리의 다른 글
| Javascript - DOM, BOM/ prototype(프로토타입) (0) | 2023.07.03 |
|---|---|
| Javascript - 반복문(for),함수(function) (0) | 2023.06.30 |
| Javascript - 연산자, 조건문(if/switch),반복문(while),git (0) | 2023.06.29 |
| Javascript - 참조타입, 객체, 배열 (0) | 2023.06.28 |
| Javascript - js runtime/ 브라우저 렌더링 (0) | 2023.06.26 |
