JavaScrip 03_변수와 자료형 변환2

변수란 ?
데이터를 보관하는 용도이다. (값 입력시 렘에 생성 )

_ 언더바를 쓰는이유?

유니크한 이름이 아닌

이미 사용하는 키워드를 사용할때 활용

 

기존에 이미 있는 키워드를 변수명으로 사용할 경우 _  붙여줌

 

 

var_scrollTop = 100;

console.log(var_scrollTop);

 

 

---

식별자 

// 제이쿼리로 요소선택시 $ 붙이는 경우 있음

var $el = $('#wrap');

console.log($el);

 

위의 코드를 입력했을때

오브젝트가 형성됨을 알수 있다.

 

 

 

결론 식별자 구별시 $ 붙이기 비추천 

var wrap = $('#wrap');

console.log(wrap);

 

 

아이디 선택자로도 선택이 가능하기 때문에 번거롭게 $사용 비추

---

변수명을 여러개 사용할때 

이런식으로 한줄 사용하면 선언한건지 이전거인지 분별이 어려움 . 가독성이 떨어짐

var num1 = 1,  num = 2,  num = 3;    (프리티어가 저장시 자동으로 줄바꿈을 한다)

 

저장후 >

 

var num1 = 1,

  num = 2,

  num = 3;

---

var 변수를 각각 다 입력해준다. 

var num1 = 1;

var num2 = 2;

var num3 = 3;

// console.log(num1, num2, num3);

console.log(num1 + '========num1의 값', num2, num3);

이렇게 기호 삽입으로 분별하기 쉽게 넣기도함 

그럼 눈에 띄게 아래와 같이 콘솔을 확인할수 있다.

 

---

변수 초기화

// 변수선언후 초기화, 나중에 들어갈 데이터타입에 맞게 초기화해야함

// var num0;

var num1 = 0;

var num2 = '';

var num3 = true;

console.log(num1 + '========num1의 값', num2, num3 );

// 예 스크롤을 초기화를 하고 데이터를 입력하겠다. 하면 초기화 변수 입력

---

오류가있을때 

참조할수없다.

참조를 할 수 없다는뜻 

 

 

var num1 = 0;

var num2 = '';

var num3 = true;

console.log(num1 + '========num1의 값', num2, num3, num0);

콜솔 뒤에 num0  변수가 미지정이라 참조 되지 않았다는뜻 

---

다른값 연산 재할당 

// 기존변수값에 다른값을 연산하여 재할당

num1 = num1 + 100;

console.log(num1);

// num1에 0을 변수 지정후 숫자 100을 더해라

// 이때 var 사용 안함. 앞에서 지정됬기 때문, 변수명만 입력한다.

 

위 내용을 간소화 할때

복합대입 연산자 사용 ( +=  뜻 : 더해서 대입하라 )

// num1 = num1 + 100;

// (간소화)복합대입연산자 - 변수의 원래값에 오른쪽 숫자를 더하여 다시 대입하라

num1 += 100;

console.log(num1);

 

---

위의 응용

 

userName에 안녕을 복합 대입 연산으로 연결하시오

var userName = 'ossam';

userName += '안녕';

console.log(userName);

 

 

---

증감연산자 (쁠쁠마마)ㅋㅋ 

1을 만들때 

// 증감연산자 (++,--)

// cnt 카운트의 약자

// 0 에 ++ 1을 더하라

var cnt = 0;

cnt++;

cnt++;

console.log(cnt);

 

 

---

2를 만들때 

 

// 증감연산자 (++,--)
// cnt 카운트의 약자
// 0 에 ++ 1을 더하라

var cnt = 0;
cnt++;
cnt++;
console.log(cnt);

 

// 후위연산은 메서드 안에서 사용하면 연산이 나중에 되므로 결과가 다를수 있음
console.log(cnt++); 

 

매서드 안에서 연산자를 쓰는건 좋지 않다. 값이 다를 수 있음 / 미리 연산을 하고 메서드를 입력한다. 

---

Prompt( ) 함수

 

함수사용법 풀이

함수에 (메세지를 집어놓고 : 그 함수에 데이터(문자)를 집어놓고 그 리턴값을 활용한다.)

 

window 객체의 함수란뜻 prompt 

 message? 처럼 인수에 ? 있으면 옵션을 넣어도 되고 안넣어도 된다  

ㅣ 뜻이 or 이다. 

 

 

: 반환되는 입력값은 srting 문자로 들어온다. 

 

string = return 반환 

default = 인수를 더 입력할 수 있다. 

 

---

Prompt( ) 함수 사용예제

 

var userName2 = prompt('이름을 입력하세요');

console.log(userName2);

 

 

 

 

 

 

 

 

 

var userName2 = prompt('이름을 입력하세요', '박효진');

console.log(userName2);

default = 인수를 더 입력시 , '' 사용

 

 

 

 

---

Prompt 와  Alert ( ) 함수

 

// alert 은 프로그램 실행이 중지 된 (경고 중지)

var userName2 = prompt('이름을 입력하세요', '박효진');

alert(userName2);

// console.log('아래내용뜨지않음');

 

 

---

comfirm ( ) 함수

 

 

 

var msg = confirm('진행하겠습니까?');

console.log(msg);

 

 

 

 

확인시 ture 확인 

 

 

 

 

 

---

 

if (msg == true) {

  console.log('감사합니다.');

} else {

  console.log('아쉽네요 ㅠㅠ');

}

 

 

취소시 false  값 확인 

 

 

 

---

Number( ) 함수

 

 

---

 

var amount = prompt('수량을 입력하세요');

amount += 30;

console.log(amount);

 

 

 

 

 

이렇게 20 을 입력시 20을 문자로 인식해 

2030 으로 값이 들어온다.

 

 

때문에 형변환이 필요 들어오는 입력값을 문자가 아닌 숫자로 지정해줄때  number

var amount = prompt('수량을 입력하세요');

amount = Number(amount) + 30;

console.log(amount);

 

 

 

이렇게 들어오는 값을 숫자로 지정해 줬을때 

똑같이 20 입력시 20+30= 50 의 값이 들어오는것을 확인

 

---

NaN 경우

 

 

 

 

Number 함수는 문자가 섞여 있으면 NaN (숫자가 아님)이뜸

 

해결방법 : amount = parseInt(amount) + 30;   추가 

 

// parseInt 숫자뒤에 문자열이 있어도 숫자로 변환시켜줌

  똑같이 20개 입력시 자동 50으로 변환 

 

---

 String ( ) 함수

 

// parseInt 숫자뒤에 문자열이 있어도 숫자로 변환시켜줌

var private = 20001225;

private = String(private);

console.log(typeof private);

 

 

 

---

연산 우선순위

 

 

// 연산우선순위 - + 에 문자가 있으면 문자우선, 그외 사칙연산은 숫자우선

 

var test = '100' + 50;

console.log(test);

 

문자로 인식하면 문자로 변환

 

 

var test2 = '100' * 50;

console.log(test2);

 

사칙연산은 숫자로 변환

 곱하기는 숫자밖에 안되고 곱하기는 우선순위가 높으므로 자동 숫자 연산 

 

---

연산 우선순위는 () 사용

 

// 괄호 없으면 무엇이 우선인지 인식을 못함

// var test3 = 100 + 20 * 3 / 3.14;

 

이떄 괄호로 우선순위를 지정한다. 

 

var test3 = (100 + 20 * 3) / 3.14;

console.log(test3);

 

제대로된 값 확인

 

 

---