2022-10-31 [새싹 프론트엔드] JS자료형과 변수

2022-10-31 강의내용

• 자료형
• 변수
• 증가/감소 연산자
• 불리언
• 비교연산
• 조건연산

 

자료형 데이터 타입

자료형 == 데이터 유형==  데이터타입 == 데이터혈

모두 같은 말이다.

 

JS의 데이터타입에는 3가지 종류가 있다

1. 기본유형
2. 복합유형
3. 특수유형

종류		비고	예시
기본유형	숫자형	따옴표 "" 없이 숫자로만 기입	let year = 2021;
	문자형	" ", ' ' 큰따옴표,작은따옴표를 사용하여 기입 , 따옴표 안에 있는  text는 문자로 인식한다	let year = "2021";
	논리형 boolean	true, false 2가지만 있는 유형	let year = true;
복합유형	배열	하나의 변수에 여러값을 저장 굳이 단어 하나하나 변수선언을 하지않고 다이렉트로 변수선언 변수명[1,,2,3]무한대로 넣을 수 있다.	let year = [2011,2022,2013];
	객체	함수와 곡성을 함께 포함	let date = new Date;
특수유형	undefined	변수 선언후 값을 할당하지 않은 상태
	null	값이 유효하지않은 상태

 

숫자유형

정수는 표현방법에 따라 10진수, 8진수, 16진수 3가지 유형으로 나누기도 한다.

8진수	0~7로 표현 할 수 있는 수 10진수와 구별하기위해 맨 앞에 0을 써준다.	012,013,0200
10진수	0~9로 표현 할 수 있는 수	2000,19
16진수	0~9와 알파벳 A~F로 표현할 수 있는 수 프로그래밍할 떄 가장 많이 쓰이며  알파벳은 대소문자 모두 사용가능하다. 10진수와 구분하기위해 Ox또는OX를 써준다.	0xfff, OxFFF,OXFFF

 

---

let 변수이름 = 데이터1; //변수선언

변수이름 = 데이터2 //변수변경

 

변수란?

변할지도 모르는 값

 

변수를 사용하는 이유는?

1. 말 그대로 변할지도 모르는 값이기때문에
2. 수식이,코드가 너무 복잡해지는 것을 방지 

변수의 초기화란?

좌측에 있는 값에 우측에 있는 값을 대입하는 것

 

블록 스코프란?

{} 이렇게 중괄호 안에 있는 변수를 블록이라 일컫는다

스코프: 변수에 접근할 수 있는 범위

 

주의사항

• 변수는 하나의 값만 저장가능하다.
• 영어 대소문자를 구분한다 ex) number 와 Number 는 JS에서는 다른 단어이다.
•  숫자는 영문 뒤에 쓴다  ex) a1 (맞는 표기) , 1a (틀린표기)
• 특수문자는  _  혹은 $ 만 허용가능하다. ex) _now, now_25 (사용가능) / 25now, %now (사용불가)
• 공백은 작성하지않는다.
• 키워드는 식별자로 사용하지 않는다.
• 변수명과 함수명을 카멜표기법을 사용한다. 
• 변수명의 이름은 의미있게 작성 해야한다.

ex)

first, box, value 이 3가지의 단어를 조합하여 하나의 변수명으로 사용한다 가정했을떄

firstBoxValue 라고 작성한다. 

 

 

키워드란?

js에서 어떠한 역할을 수행하는 단어들

변수,함수명들 중복해서 사용할 수 없는 단어

ex) let, var,for,return  은 변수를 지정하는 "역할"을 수행하는 키워드다

 

식별자란?

개발자가 짓는 이름

변수명,함수명,객체명, 클래스명... 등등 무수하다

이러다보니 식별자를 구별하기위해 개발자들끼리 약속을 했다(예의)

 

카멜표기법이란?

낙타의 등처럼 높낮이가 있다

단어와 단어가 조합될떄 두번째 단어부터 첫글자를 대문자로 작성하는 것

 

 

 

 

---

 

javascript 는 값을 담을 수 있는 양동이가 필요하다

잊지말자

//환율계산기를 만들어보자
//여기서 1194는 변할지도 모르는 값 환율은 변동되기 때문에
 console.log(1 * 1194)
 console.log(2 * 1194)
 console.log(3 * 1194)
 console.log(4 * 1194)
 console.log(5 * 1194)

//다음날 환율이 1200원으로 증가했다면 *5번의 코드를 수정해야한다.
//이러한 불편함을 해소하기위해 변수에 수를 담아주어야한다.

let dollar = 1194
// 먼저 1194라는 변수명을 만들어준다 <-개발자가 언제든지 값을 수정할 수 있다.

let num = prompt("환전할 달러 금액은?", "정수입력") 
//num이라는 변수안에 prompt 메소드를 넣는다
-prompt를 사용한 이유는 사용자가 몇 달러를 환전할지 개발자는 모르기 때문에
-사용자 스스로가 값을 넣을 수 있도록 해주어야한다.
//prompt("띄워질 제목 텍스트","값안에 들어갈 홀드 텍스트")

alert ("환전금액:" +(dollar * num)+"원") 
//alert라는 메소드에 텍스트를 넣는다
("출력text" =(1194+prompt에 사용자가 입력한 값)+"텍스트")

 

 

prompt에 출력된 값(좌)  alert에 출력된값(우)

 

.

 

color라는 변수의 값은 pink 이다
console.log에 변수값인 color 를 호출하면 pink가 호출이된다
이때 변수는 안에 어떠한 값도 넣을 수 있다.

let color = "pink"

console.log(color)


변수의 값을 정확하게 호출하지 않으면 프로그램은 호출을 인식하지못하고 에러가 난다.
에러//
let color3 = "pink" 
console.log(color)

적용값

 

변수선언은 ,콤마를 사용하여 한꺼번에 선언할 수 있다

 

str01~03까지 let 한줄에 선언함

변수는 ,(콤마)를 사용하여 두개의 값을 호출할 수 있다.

let color = "pink"
let color2 = "haha"

console.log(color,color2)

---

변수의 재사용

정했던 변수의 값은 바꿀 수 있다. 단, let은 쓰지않아야한다. 재선언은 하지않아야한다.

권장하지 않는 방법
변수의 재선언
//하나에 컵에 커피,콜라,녹차를 담은 격이다
let cup = "coffee";
let cup = "coke";
let cup = "greentea";



권장하는 방법 1
// 각각 다른 컵에 커피,콜라,녹차를 담는다.
let cup01 = "coffee";
let cup02 = "coke";
let cup03 = "greentea";

권장하는 방법 2
// 하나에 변수명을 다른 변수명으로 바꿔줄 수 있다.
// 이러한 방법이 재사용
let cup = "coffee"
cup = "coke"
cup = "greentea"

 

 

변수명 변경시 주의사항

---

let |  const | var의 차이점

var	js태초에 있었던 값	문제가 많음 권장하지않음
let	업데이트 되며 나온 값	정했던 변수의 값은 바꿀 수 있다. 단, let은 쓰지않아야한다
const	업데이트 되며 나온 값	내가 변수에 있는 값을 바꾸고싶지 않을때 사용 바뀌면 안되는 고정된 값들을 사용할때 선언한다. 영원히 변경 No! ex)비밀번호

---

값의 종류

변수에 들어갈 수 있는 값

1. string 타입 : (" ") 따옴표 안에 들어가있는 모든 언어
2. 숫자타입 : ( ) 따옴표 없이 괄호 안에 들어가 있는 숫자 - 정수 음수 소수점 전부 가능
3. boolean타입 : true , fales
4. 등등 다양한 타입이 많이 있다.

 

string 타입

문자 그 자체 한글 영문 ㄱㄴㄷ,123, abc
큰 따옴표("") 안에 있는 모든값은 문자로 취급함

사람눈엔 123 + 1 이지만 컴퓨터가 인식할 땐 123이 따옴표 ("") 안에 들어가 있기때문에
"문자열"로 인식한다
let password = "123" + 1

124가 아니라 1231로 출력되는것을 볼 수 있다.

---

숫자 타입

(" ")따옴표 안에 안 들어가 있는 숫자들

 

따옴표(" ") 가 없기때문에 123을 숫자로 인식하고 +1 이 되어 124라는 값이 완성됨


let password = 123 + 1

console.log(password)

숫자타입으로 인식

---

boolean타입 : true , fales

 

---

연산자

사칙연산을 이용하여 계산이 모두 가능하다.

1. || 를 사용하면 두가지의 값중 하나만 참 이여도 true 가 된다.
2. && (and연산자)는 두가지의 값 모두 참이여야 true가 된다.

 

논리연산

password는 2보다 큰 값인가?

논리연산자
let password = 1
password = password > 2
console.log(password)

두 가지 값을 줄 수 있음 
둘 중 하나만 참이여도 true || 두개로 뒤에 입력한다.
let password = 1
password = password <= 2 || password > 2


console.log(password)

2보다 크지않음

 

둘 중 하나만 참이여도  true

---

증감연산자란?

프로그램에서 변수값을 1증가시키커나 1감소시켜준다.

증감연산자는  (++n 전위) (n++후위) 로 나뉜다.

이 두개의 연산자들은 변수 앞/뒤에 붙였을 떄 결과값이 달라진다.

 

++n 전위 연산자 방식
일단 1을 더해서 조건식을 계산함

변수 앞에 오는 경우, 
1. 변수를 1 증가시키는 작업을 우선적으로 실행합니다.
2. 연산식 계산

      let a = 10;
      //a라는 변수에 10을 담는다.
      let b = a++ + 5;
      // a에 있는 변수에 +1을 증가 시키고 = 답은 11
      // b에 있는 연산식을 연산시킨다. = 답은 16
      console.log(b)
      console.log(a)


n++ 후위 연산자 방식
일단 조건식을 계산하고 나중에 1더함


변수 뒤에 오는 경우,
1. 연산식을 우선 계산
2. 변수를 1 증가시키는 작업을 실행합니다.

      let a = 10;
      //a라는 변수에 10을 담는다.
      let b = a++ + 5;
      // b에 있는 연산식을 우선 연산시키고 = 답은 15
      // a에 있는 변수에 +1을 시켜준다 = 답은 11
      console.log(b)
      console.log(a)
      
위 처럼 증가 연산자가 앞에 오느냐 뒤에 오느냐에 따라서 답이 완전 바뀐다.

후위 연산자

새싹 DT 기업연계형 프론트엔드 실무 프로젝트 3주차 블로그 포스팅