JavaScript 변수

변수.. 자바에서도 많이 사용한 변수입니다.

 

JavaScript 변수를 선언하는 규칙 세 가지가 있습니다.

• 이름은 의미있게 만듭니다.
• 여러 단어를 연결한 변수 이름을 낙타 모양으로 만들어 줍니다.(ex) abcDef)
• 변수 이름의 첫 글자는 반드시 문자나 밑줄(_), 달러 기호($)로 시작해야 합니다.

변수 선언과 값/식 할당.

• const(상수),let,var 다음에 변수 이름을 적어서 변수를 선언합니다.(var는 잘 사용하지않는다.)
• 변수 오른쪽에 = 기호를 붙이고 오른쪽에 저장할 값이나 식을 작성합니다.(변수 선언과 동시 값 할당 가능)

(예시) 나이를 계산해주는 프로그램 - 변수

(const(constant)선언은 아시다시피 변경불가하고 업데이트 가능한 변수는 var, let형이있는데 기본적으로는 let만 사용하는게 좋다고 합니다.)

  <button class="btn" onclick="calc()">나이 계산하기</button>
  // (나이 계산하기가 적혀있는)버튼 생성하고 클릭시 calc()가 작동
	<div id="result" class="show">(결과 값 표시)</div>
    // (결과 값 표시가 밑에있는 "당신의 나이는" + age + "세입니다."가 됩니다.)
  <script>
        function calc() {
            var currentYear = 2019;
            var birthYear = prompt("태어난 연도를 입력하세요", "yyyy");
            // 프롬프트를 사용하여 연도를 입력하게 합니다.
            var age;
            age =currentYear - birthYear + 1;
            document.querySelector("#result").innerHTML = "당신의 나이는" + age + "세입니다.";
        }
    </script>

 

자료형

자료형이란 컴퓨터가 처리하는 자료의 형태를 의미 합니다. 

자료형		설명
기본형	number(숫자)	따움표 없이 표기한 숫자를 나타냅니다.
	String(문자열)	작은 따움표나 큰 따움표로 묶어서 사용합니다.
	boolaen(논리형)	참(true)나 거짓(false)이란 두 가지 값만 가지고 있는 유형
	underfined	자료형을 지정하지 않았을 때의 유형입니다. 예를 들만 변수를 선언만 하고 값을 정의 하지 않았을때 underfined가 됩니다.
	null	값이 유효하지 않을 때의 유형입니다.
복합형	array(배열)	하나의 변수에 여러 값을 저장하는 유형입니다.
	object(객체)	함수와 속성이 함께 포함된 유형입니다.

간단하게 underfined 는 값을 아직 할당하지 않았다 라는 의미이고

null은 처음에 할당된 값이 더 이상 유효하지 않다 라는 의미입니다.(값을 넣을 공간은 있지만 아직 값이 없다)

 

- 자바랑 다르게 꼭 ' ' 를 사용해서 문자만 넣을수 있는게 아니고 JavaScript에서는 문자열을 넣어도 상관없다. 다만 '," 둘중하나를 사용한다고하면 문자 마지막에도 같은 기호를 꼭 사용해줘야한다 ( '틀림" )

 

 배열

• 하나의 변수에 여러 값 저장
• 배열의 인덱스(index)는 0부터 시작
• 배열에 있는 값을 가져오려면 배열 이름과 대괄호([])안에 인덱스 사용

변수타입 변수명 = [변수값1, 값2, 값3, ....]; 
변수명[0] = 변수값1... 자바랑 차이없음

 

산술 연산자

분류	연산자 이름	기호	설명
사칙연산자	더하기	+	두 값을 더합니다.
	빼기	-	앞의 값에서 뒤의 값을 뺍니다.
	곱하기	*	두 값을 곱합니다.
	나누기	/	앞의 값을 뒤의 값으로 나눕니다.
나머지 연산자	나머지	%	앞의 값을 뒤의 값으로 나눈 나머지 값을 구합니다.
증감 연산자	증가	++	변수값을 1만큼 증가시킵니다.
	감소	--	변수값을 1만큼 감소시킵니다.

 

객체.

• 여러 자료를 중괄호({})로 묶은 것
• 키(key)와 값(value)을 한 쌍으로 여러 자료를 저장한다.

ex)

var kim = {
	firstName : "John",
    lastName : "kim",
    age : 35,
    address : "seoul"
}

 

배열

• 하나의 변수에 여러 값 저장
• 배열의 인덱스(index)는 0부터 시작
• 배열에 있는 값을 가져오려면 배열 이름과 대괄호([])안에 인덱스 사용.

const daysOfWeek = ["mon","tur","wed","thu","fri","sat","sun"]
// daysOfWeek이란 월,화,수,목,금,토,일 이란 값을 가지고있는 배열을 만들었습니다.

JavaScript도 자바랑 동일하게 출력
console.log(daysOfWeek[?]); // 수요일을 출력하고 싶다면 2를 쓰면됨.
// 값은 0, 1, 2, 4, 5, 6 순으로 저장

push()로 배열에 데이터를 넣을수도 있습니다.
daysOfWeek.push("?");

concat()

• 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수입니다.
• concat() 함수는 새로운 배열을 만들기 떄문에 기존의 nums나 chars 배열에는 영향을 주지 않습니다.

let nums = ["1","2","3"];
let chars = ["a","b","c","d"];
nums.concat(chars); // nums 배열에 chars 배열 연결
-> ["1","2","3","a","b","c","d"]

join()

• 지정한 구분 기호를 사용해 배열 요소 연결
• 구분 기호를 지정하지 않으면 쉼표(,)로 구분

nums.join( ) <- 기호를 저장하지않아서 자동으로 쉼표로 구분할것임
"1,2,3"
nums.join("-")
"1-2-3"

psuh() 함수 : 배열의 맨 끝에 요소 추가

unshift() 함수 :  배열의 맨 앞에 요소 추가

let nums = ["1","2","3"];
nums.push("4","5")
=> ["1","2","3","4","5"]

pop()함수 : 배열의 맨 뒤에 있는 요소 추출

shift()함수 :  배열의 맨 앞에 있는 요소 추출

let study = ["html", "css", "javaScript"]
study.pop();
=>"javaScript"
study 의 남은 배열
=["html", "css"]

slice()함수

 여러 개의 요소를 추출하는 함수.

1. 시작 인덱스와 끝 인덱스를 지정하면 시작 인덱스부터 끝 인덱스 직전까지 추출
2. 시작 인덱스만 지정할 경우 시작 인덱스부터 끝까지 모두 추출

let colors = ["red","green","blue","white","black"]
colors.slice(2)
=> ["blue","white","black"] // 인덱스 2부터 끝까지 추출한다. (0부터 시작인걸 잊지말자)
colors
=> ["red","green","blue","white","black"] // 배열은 변경되지 않는다.