[JS] 02. 자바스크립트 변수

1. 변수

1.1 변수란

• 컴퓨터는 수 많은 데이터를 처리하며, 데이터의 종류(데이터 타입) 또한 다양하다.
• 수 많은 데이터를 처리하기 위해서는 효율적으로 데이터를 기억하고 저장하는 방식이 필요하다.
• 데이터를 효율적으로 기억하고, 적절한 시점에 꺼내 활용하기 위해 변수를 사용한다.
• 다양한 데이터 값은 변수에 저장되어 사용된다.

1.2 변수의 선언과 할당

let myNumber = 100 (보통 선언과 할당을 함께 진행함)

const myDream = "being a good software developer";
console.log(myDream)

[STEP1] 이름을 '선언(Declare)'해주기

• 위에서 'let myNumber' 부분에 해당

[STEP2] 선언한 변수에 값을 '할당(Assign)'해주기

• myNumber=100 이라는 부분에 해당

1.3 변수 이름짓기

• 변수 이름을 지을 때 몇 가지 주의할 점이 있으며, 이러한 암묵적인 약속을 컨벤션(convention)이라 한다.
• 변수의 이름을 정할 때 주의해야 할 Naming Convention은 아래와 같다.
• 변수 이름 짓기 (Naming convention)
  • 한 파일에서 같은 변수 이름을 중복해서 사용할 수 없다.
  • 변수의 이름은 의미가 추측 가능하도록 짓는다.
  • 변수 이름은 대소문자를 구분한다. (myName과 MyName은 다른 변수입니다.)
  • 자바스크립트 변수는 주로 camelCase(카멜케이스) 방식으로 사용한다.

2. 데이터타입

2.1 데이터타입 종류

a) 기본타입(Primitive Type)

• Number(숫자), String(문자), Boolean(참거짓), Undefined, Null

[Number & String]

• 데이터가 숫자인 경우 하기와 같이 숫자간 사칙연산이 가능하다.

CASE1) 덧셈

• 하기 코드의 결과값은 '103'이 나온다.

let myNumber1 = 3
let myNumber2 = 100
console.log(myNumber1 + myNumber2);

CASE2) 나눗셈

• 나눗셈 진행 시 몫이 결과값으로 나오는데, 만약 나머지를 알고 싶다면 %를 이용해 나머지를 구하면 된다.
• 하기 코드의 결과값은 '0'이 나온다.

console.log(4 % 2);

CASE3) String과 Number의 덧셈

• console.log() 내 string과 number를 함께 혼합해서 사용할 수 있다.
• 하기 결과값은 300이 나온다.

let number1 = 100
let number1 = 200
console.log('100 plus 200 equals to', number1+number2);

CASE4) 문자간 덧셈, 변수간 덧셈

• 문자열간 문자를 합치고 싶다면 하기와 같이 표현할 수 있다.
• 하기 결과값 2개는 모두 Hello Code Yeo라는 결과값이 나온다.

let greeting = 'Hello'
let myName = 'Code Yeo'

console.log(
	'Hello world' + '' + 'Code Yeo'
)    
console.log (
	greeting + '' + myName
)    

CASE5) string 과 number를 합칠 경우

• string 데이터타입으로 변환된다.
• 하기 코드의 결과값은 22다.

console.log(
	2 +'2'
)    

CASE6) 문자열의 총 길이를 알고 싶은 경우

console.log(myString.length);

[Boolean]

• 참/거짓(True/False)를 의미하며, 참거짓 자체가 데이터의 값이 된다.

b) 참조타입(Reference Type)

• Object, Array, Function

[Array(배열)]

• 하나의 변수에 여러 값을 저장하는 유형
• 대괄호 안에 각기 다른 데이터가 들어가 있는데, 데이터들이 한곳에 모여있는 것을 배열이라고 한다.

let studentsName = [
	'Code Yeo'
]

[Object(객체)]

• 함수와 속성이 함께 포함된 유형
• 중괄호 안에 [키 : 값] 형태로 이루어졌다.

let studentsName = {
	name : 'Code Yeo',
    is developer : true
}

[Function(함수)]

• 함수 이름 + 소괄호 + 중괄호 안에 함수 기능을 기입한다.

function myFunction () {
	let name = 'Code Yeo'
    console.log(name)
    return name
}

3.null & undefined

3.1 null & undefined 차이

• null과 undefined는 모두 자바스크립트의 데이터 타입이다.
• 포괄적인 의미로 '값이 없다'는 점에서 null과 undefined가 비슷한 것 같지만, 엄밀히 말하자면 둘은 같지 않다.
• undefined는 선언은 됐지만 아직 value가 할당되지 않은 경우를 의미한다.
• 반면에 null은 '빈 값(blank)'을 의미하는데 사용자가 준 value로, undefined와 다르게 자바스크립트가 자동적으로 null 이란 값을 줄 수는 없다.
• null은 '값이 없음(blank)'을 의미하는 '할당된' value다.

let name;            // undefined
let name = null;     // null

console.log(null == undefined);   // true
console.log(null === undefined);  // false

• null과 undefined의 type은 어떤 타입일까? 타입을 알아보기 위해서 'typeof' 연산자를 사용해보자

console.log(typeof null);       // object로 나온다.
console.log(typeof undefined);  // undefined로 나온다.