자바스크립트 기초강의

Seong Hyeon Kim·2022년 5월 14일
0

개인공부

목록 보기
1/23

변수

  • 특정한 값을 저장하고싶을때 사용
name = "mike";
age = 20;

여기서 name 이나 age가 변수가 되겠다.

변수로 사용못하는 것들

class, delet, break, if 등등은
예약어로 이미 먼저 등록이 되어있어서 변수로 사용못함

출력함수?

* alert

alert(name);  //입력값
mike    /// 출력값

라고 하면 값은

mike    가 나온다

* console.log()

console.log(age);  //입력값
20   //출력값

이런식으로 작업을 하면 협업시 매우 위험하다. 변수명때문에 혼동이 생기기 때문 그래서 사용하는게

let, const

let : 값이 변할 수 있는 변수명

let name = "mike";
.
.
.
.
let name = "great"

이 경우에는 오류가 뜨고 이걸 굳이 하고 싶다면

name = "greet"

이렇게 사용하면 가장 마지막 함수가 저장이 된다.

const

  • 절대로 바뀌지 않는 상수 (수정 할려하면 에러가뜸) 보통 절대값을 사용
ex) const BIRTH_DAY = '1993-10-14;
	const SPEED_LIMIT = 50;

결론

  • 자바스크립트에서 변수 선언시
    변하지않은 값은 const,
    변할 수 있는 값은 let
    으로 선언한다.

tip : const 로 대부분 선언하고 나중에 바뀔것들만 let으로 하는게 편할 수 잇음

변수특징

1. 변수는 문자와 숫자, $와_만 사용

2. 첫글자는 숫자 불가능

3. 예약어는 변수로 사용불가

4. 가급적 상수는 대문자로 알려줄것

5. 변수명은 읽기 쉽고 이해할 수 있게 선언

ex) let a=1; xxx
let userNumber = 3; 000

자료형은 문자형과 숫자형이 존재

문자형의 방법

name = "mike";
age = 20;

const name1 = "mike"	/// "" 사용
const name2 = 'mike'	/// '' 사용
const name3 = `mike`	/// `` 사용


const message1 = `My name is ${name}` 	/// ``은  이렇게 ${ }를 사용하여도 가능
console.log(message1)					/// 출력값 : My name is mike

const message2 = `나는 ${30+1}`살입니다 	/// ``은  이렇게 ${ }를 사용하여도 가능
console.log(message2)					/// 출력값 : 나는 31살 입니다.

숫자형의 방법

  • 숫자형은 사칙연산이 가능하다.
const age = 30;
const PI = 3.14;

console.log(1 + 2)		//더하기
console.log(9 - 3)		//빼기
console.log(3 * 2)		//* 곱하기
console.log(6 / 3)		// /나누기
console.log(6 % 4)		// % 나머지

const x = 1/0;
console.log(x)			///출력값 : Infinity

const y = name/2;
console.log(y)			/// 출력값 : NaN (Not a number) 숫자가 아니다.

typeof 연산자

  • 변수의 자료형을 알아낼수 잇는 연산자
console.log(typeof 3); 				/// 출력값 : " number"
console.log(typeof name); 			/// 출력값 : "srting "
console.log(typeof true); 			/// 출력값 : "boolean "
console.log(typeof "xxx"); 			/// 출력값 : "string "
console.log(typeof null); 			/// 출력값 : " objece"
console.log(typeof underfined); 	/// 출력값 : " underfined"

여기서 null : 숫자가 아니다
	  underfined : 값이 지정되지 않았다	
      null 은 객체가 아니다.

  • 다른 사람이 작성학 변수를 알기 위해서 사용된다.

문자형과 숫자형의 더하기

const name = "mike";

const a = "나는 ";
const b = " 입니다.";

const age = 30; //  number
console.log(a + age + "살" + b)  	/// 출력값 : "나는 30살 입니다."
  • 문자형과 숫자형을 합칠경우 문자형으로 바뀌어서 출력됨 주의할것

대화상자

  • alert - 알려줌
  • prompt - 입력받음
  • confirm - 확인받음

prompt

const name = prompt("이름을 입력하세요.");
alert(`안녕하세요. ${name} 님. 환영해요. `); 		/// 출력값 : prompt 입력후 그대로 출력됨

const name = prompt("이름을 입력하세요." , ("여기에 이름을 적어주세요"));
alert(`안녕하세요. ${name} 님. 환영해요. `); 		/// 출력값 : prompt 입력창에 여기에 이름을 적어주세요 
															그대로 출력됨 이런식으로도 사용가능
		

confirm

  • 주로 확인을 받는 용도로 사용된다.
const isAdult = confirm("당신은 성인입니까?");


console.log(isAdult) 			
/// 출력 : alert 처럼 창이 뜨고 확인 과 취소 버튼 여하에 따라서 콘솔창에는 ture 와 false 가 출력됨
  • 주로 삭제하시겟습니다? 이후 정말로 삭제하시겠습니까 의 용도로 쓰임

단점

  1. 스크립트 일시 정지
  2. 스타일링 불가능

형변환 (Type Conversion)

* String( ) 			문자형으로 변환
* Number( )				숫자형으로 변환
* Boolean( )			불린형으로 변환

문자형끼리 혹은 숫자형끼리 더하면 값이 더해져서 나오지만 문자형과 숫자형이 더해지면 오류가 날수잇기때문

"ㅁ" + "ㄴ" = "ㅁㄴ"
100 + 200 = 300

두과목 평균을 구할시

const mathScore = prompt("수학 몇점?")
const engScore = prompt("영어 몇점?")
const result = (mathScore + engScore) /2;

console.log(resule)			/// 수학에 90 영어에 80을 입력하면 결과는 4545가 나옴

/// 



const mathScore = 90;
const engScore = 80;
const result = (mathScore + engScore) /2;
console.log(resule)								/// 출력 : 45
  • 이렇게 같은 식같아도 차이가 나는 이유는
    prompt 로 입력된 것들은 모두 문자형 이 되기 때문에

그래서 "90"+"80" = 9080 이 되는건데
나누기 같은 숫자형 연산자는 숫자만 잇으면 자동으로 숫자로 인식해버려서 나눗셈을 진행해서
이러한 결과가 나옴

이러한 것을 자동 형변환 이라고 한다.

자동 형변환에 때문에 의도치 않은 오류등이 발생할 수 있기때문에 이런것을 방지하는게

명시적 형변환 이라고 한다.

String()

스트링은 괄호안에 내용을 문자형으로 바꿔준다.앞에 S는 대문자로 쓸것

console.log (				///console.log 는 괄호안에 ,를 붙여서 동시에도 가능)
String(3) ,
String(안녕 ) ,
String(hi) ,
String(후후후) ,
)

		/// 출력값 : "3","안녕","hi" 등등

Number()

  • 괄호안의 내용을 숫자형으로 바꿔줌 보통 문자형을 숫자형으로 바꿀대 자주 사용
console.log(
Number("1234")
)						///출력값 : 1234



console.log(
Number("1234ㅁㅁㅁㅁ")
)						///출력값 : NaN  괄호안에 숫자랑 문자랑 같이 있으면 이렇게됨 주의할것


Boolean

  • 괄호안에 내용을 불린형으로 바꿔줌 ture, false 로 출력값이 나옴
false 가 나오는 내용들
숫자 0,  빈 문자열 "" , null ,  underfined , NaN

애네들 제외하곤 대부분 true 로 나옴

조금 특이하게

연산자

profile
삽질도 100번 하면 요령이 생긴다. 부족한 건 경험으로 채우는 백엔드 개발자

0개의 댓글