변수와자료형
코드 블록의 Try it Yourself 버튼으로 직접 실행할 수 있다.
구문
1. 변수
1.1.변수란?
✅ 변수(상수)란? 데이터(값/자료)를 저장 할 수 있는 메모리 공간
- 변하는 값은 변수 let, var
- 변하지 않는 값은 상수 const
✅ 변수 사용 이유
- 변수를 쓰는 이유는 코드의 재활용성을 높여준다.
1.2.변수의사용
1.2.1. 선언과할당
let currentYear; //올해 연도의 변수 선언
let name; // 이름의 변수 선언
let age; // 나이의 변수 선언
let currentYear, name, age; //한번에 선언
//선언후 할당하기
let frontend;frontend = '김망고';
//선언과 할당을 동시에 하기
let letiable = '변수';
1-2-2-나이계산 프로그램 구현
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>나이 계산하기</title>
</head>
<body></body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>나이 계산하기</title>
</head>
<body>
<script>
let currentYear = 2021;
let birthYear
let age;
birthYear = prompt('태어난 연도를 입력하세요. (YYYY)', '');
age = currentYear - birthYear + 1;
document.write(currentYear + '년 현재<br>');
document.write(birthYear + '년에 태어난 사람의 나이는 ' + age + '세입니다.');
</script>
</body>
</html>
1.3. 변수의 특성
변수 키워드에 식별자를 작성하고 값을 넣는 과정을 초기화 한다라고 합니다. 우리가 변수를 선언하고 값을 할당하면 아래 3단계의 순서로 컴퓨터는 데이터를 메모리에 저장하게 됩니다. **① 선언 **: 변수를 생성하기 위해 식별자를 지정하는 단계 **② 할당 **: 변수에 값을 넣는 단계 **③ 초기화 **: 변수의 식별자에 값의 할당을 완료한 단계
1.3.1. var
var 키워드로 선언한 변수는 재선언과 재할당이 가능합니다. 실행
function addNumber(num1, num2) {
return num1 + num2;
}
var sum = addNumber(10, 20);
console.log(sum);
sum = 50;//재할당
console.log(sum);
var sum = 100;//재선언
console.log(sum);
1.3.2. let
let 키워드로 선언한 변수는 재선언은 불가 재할당은 가능합니다. 실행
let x;
x = 1;//재할당가능
let x = 2;//재선언불가
document.body.innerHTML = `<h1>${x}</h1>`;
1.3.3. const
const 키워드로 선언한 변수는 재선언과 재할당이 불가능합니다. 실행
const currentYear = 2020;
const currentYear; //재선언불가
currentYear = 2100; //재할당불가
console.log(currentYear);
2. 자료형
2.1. 개요
Info: 자료형이란?
- 자료(data): 컴퓨터에서 처리할수 있는 모든 것
- 자료형(data type): 자료를 형태별로 분류해 놓은것
2.2. 종류
| 종류 | 자료형 | 설명 | 예시 |
|---|---|---|---|
| 기본(원시) 유형 | Number | 숫자를 나타내는 데이터 타입. 정수 및 부동소수점 숫자를 포함. | let num = 123; |
| String | 문자열을 나타내는 데이터 타입. 0개 이상의 16비트 유니코드 문자로 구성. | let str = "Hello World"; | |
| Boolean | 논리적인 값을 나타내며 true와 false 두 가지 값을 가짐. | let isTrue = false; | |
| 복합(참조) 유형 | Object | JavaScript의 객체를 나타냄. 객체는 이름과 값으로 구성된 프로퍼티들의 집합. | let obj = \{name: "John", age: 30\}; |
| Array | 순서가 있는 요소들의 집합을 나타냄. 배열 요소에 접근하는 것은 대괄호([])를 사용하여 인덱스로 접근. | let arr = [1, 2, 3]; | |
| Function | 실행 가능한 코드 블록을 가지며, 기능을 반복해서 사용할 수 있음. | function sayHello() \{ alert('Hello!'); \} | |
| 특수 유형 | undefined | 변수가 선언되었으나 초기화되지 않았을 때의 값. | let x; console.log(x); // 출력: undefined |
| null | 값이 없음을 의미. 변수에 명시적으로 할당해 사용. | let y = null; console.log(y); // 출력: null |
2.3. 원시형
typeof : 자료형을 확인하는 단항 연산자인 typeof와 함께 알아보자
//number
let num1 = 1;
let num2 = 2;
let sum = num1 + num2;
console.log('sum:', sum, typeof sum);
//string
let str1 = '1';
let str2 = '2';
let para = str1 + str2;
console.log('para:', para, typeof para);
//boolean
let fact = true;
let lie = false;
console.log('fact:', fact, typeof fact);
//null
let temp = null;
console.log('temp:', temp, typeof temp);
//undefined
let noName;
console.log('noName:', noName, typeof noName);
2.4. 참조형
원시형과 참조형의 차이는 쉽게 아래처럼 값을 여러개 나누어 저장할수 있다는 것에 있다.
참조형을 생성해보자
//Object
let person = {
name: "mimi",
age: 20,
city: "seoul",
};
console.log(person); //Array
let zoo = ["koala", "cat", "dog"];
console.log(zoo[0]);
let arr = [1, 2, 3, 4, 5];
console.log(arr);
//function
function addNums(num1, num2) {
return num1 + num2;
}
console.log(addNums(5, 10));