Javascript #variables

변수 (variables)

---

• 데이터를 저장하기 위한 메모리 공간
• 사용자는 메모리 공간을 위한 이름을 임의로 지정할 수 있다.
• 그 이름에 데이터를 대입시켜 이름을 프로그래밍할 때 데이터 대신 사용할 수 있다.
  
  

📌 변수가 필요한 이유?

---

복잡한 데이터를 간단한 이름에 할당시켜 가독성을 높일 수 있다.

📌 변수의 선언 방법

---

• 재할당이 필요한 데이터의 경우 let 변수이름 = 데이터 값
• 재할당이 필요하지 않거나 불변성이 필요한 데이터의 경우 const 변수이름 = 데이터 값

예시)

	let a = 5;
	console.log(a) // result: 5
	a = 7; // 재할당 가능
	console.log(a) // result: 7

	const b = 3;
	console.log(b) // result: 3
	b = 4; // 재할당 불가능
	console.log(b) // result: TypeError! Assignment to constant variable. 

• 변수 Naming 규칙
  1. 대소문자 구분
  2. 변수 이름의 첫번째 문자는 반드시 글자, 밑줄(_), 달러기호($) 중 하나로 정한다.
  3. 자바스크립트는 camelCase(카멜 케이스) 방식으로 변수, 함수 이름을 정한다.
  4. snake_case 표현법은 잘 사용하지 않는다.
  예시:

	const myName = "sangwoong"
    let myAge = 27;
	
	function thisIsFunction() {
    	console.log(myName, myAge);
    }

📌 자바스크립트의 데이터 타입

---

1. 문자열 (string)
텍스트 (주로, 프로그래밍 언어에서는 문자열이라고 부름.) 형태의 값은 작은 따옴표 (' ') 혹은 큰 따옴표(" ")로 감싸서 선언한다.

	let text = "javascipt"
    let name = "자바칩스크립트"
    let notNumber = "1996"

2. 숫자 (number)
숫자는 바로 값을 대입하면 된다.

	let value = 1996

3. 참/거짓 (boolean)
참 혹은 거짓 두가지 종류의 값을 나타낼 수 있다.

	let 참 = true;
	let 거짓 = false;

4. null과 undefined
"없음"을 나타내는 두 종류의 타입이다.
null은 주로 "이 값이 없습니다."라고 선언을 할 때 사용한다.
반면, undefined는 선언만 하고 값을 정해주지 않았음을 의미한다.

	let myPocket = null;
	console.log(myPocket) // null
	// 값이 비어있습니다!
	
	let money;
	console.log(money) // undefined
    // 값을 설정해주세요!

결국 null은 사용자가 고의로 "값 없음"이라는 값을 할당한 것이고,
undefined는 사용자가 값 설정 자체를 하지 않은 것이다.

📌 string, number 메소드 알아보기

---

1. split(구분자, 최대 배열 크기)
문자열을 구분자 기준으로 나눈 후 나뉜 문자열을 하나의 배열로 반환한다.

	const alphabet = "abcdef"
    alphabet.split(""); // ["a","b", "c", "d", "e", "f"]

	const frontEndLang = "HTML, CSS, JS"
    frontEndLang.split("") //['H', 'T', 'M', 'L', ',', ' ', 'C', 'S', 'S', ',', ' ', 'J', 'S']
    frontEndLang.split(",") // ["HTML", " CSS", " JS"]

2. indexOf()
특정 문자나 문자열이 처음으로 등장하는 위치의 index 값을 반환한다.

	const alphabet = "abcdef"
    alphabet.indexOf("a") // 0
	alphabet.indexOf("b") // 1
	alphabet.indexOf("c") // 2 
	alphabet.indexOf("d") // 3 
	alphabet.indexOf("e") // 4 
	alphabet.indexOf("f") // 5

3. toUpperCase() / toLowerCase()
특정 문자나 문자열을 대소문자로 변환시킨다.

	const smallLetter = "abcdef"
    const capitalLetter = "GHIJKL"
    
    smallLetter.toUpperCase() // "ABCDEF"
	capitalLetter.toLowerCase() // "ghijkl"

4. parseInt()
문자열 타입의 숫자를 정수로 변환한다.
문자열을 parsing하여 숫자로 된 부분만 변환한다.
숫자로 변환할 수 없으면 NaN (Not a Number)을 반환한다.

	const 문자1 = "1"
    const 문자와숫자 = "1살"
    const 문자숫자문자 = "얘는 1살 아기"
    
    console.log(parseInt(문자1)) // 1
	console.log(parseInt(문자와숫자)) // 1
	console.log(parseInt(문자숫자문자)) // NaN

5. Math.random()
0보다 크거나 같고 1보다 작은 랜덤 숫자를 반환한다.

다음 예시는 실제 사이드 프로젝트에 추가한 코드입니다.
해당 레포지토리에서 전체 코드를 확인할 수 있습니다.
깃헙링크로 보기

	const signPw = document.querySelector("input");

	// 6자리 숫자 (100000 ~ 999999) 사이의 숫자를 반환
	const password = Math.floor((Math.random() * 900000 + 99999));
	// 반환된 숫자를 input의 value로 표시하여
	// 사용자에게 키 발급을 해주는 코드
 	signPw.value = password;

6. Math.floor() / Math.ceil() / Math.round()
가장 가까운 정수로 내림 / 올림 / 반올림

	const myBirthWeight = 4.5
    console.log(Math.floor(myBirthWeight)) // 4
	console.log(Math.ceil(myBirthWeight)) // 5
	console.log(Math.round(myBirthWeight)) // 5
	

---

[참고자료]
http://www.tcpschool.com/javascript/js_standard_numberMethod
https://www.w3schools.com/js/js_number_methods.asp