[JavaScript] 변수와 타입

변수

특정 데이터에 이름을 붙여서 사용할 수 있는 것입니다.

console.log를 사용하여 구구단 n단을 출력한다고 했을 때, 일일히 숫자를 바꿔주기가 너무 귀찮고 손이 많이 갑니다.

하지만 변수를 사용한다면 훨씬 편하게 출력할 수 있습니다.

let n;
// 변수 선언: 컴퓨터가 데이터를 기억할 수 있도록 메모리 공간을 확보하고
// 이름을 부여하는 것
n = 9;
// 값 할당: 메모리 공간에 특정한 값을 넣는 것

console.log(num * 1); // 5
console.log(num * 2); // 10
console.log(num * 3); // 15
console.log(num * 4); // 20
console.log(num * 5); // 25
console.log(num * 6); // 30
console.log(num * 7); // 35
console.log(num * 8); // 40
console.log(num * 9); // 45

값에 아무것도 할당하지 않으면 undefined가 자동으로 할당됩니다.

변수 앞에 let키워드를 사용하면 새로운 값을 다시 할당할 수 있습니다.

let name = 'kim';
console.log(name); // 'kim'
name = 'lee';
console.log(name); // 'lee'

하지만 const키워드를 사용하면 값을 다시 할당할 수 없습니다. 이를 상수(재할당이 불가능한 변수)라고 합니다.

const name = 'kim';
name = 'park';
// Uncaught TypeError: Assignment to constant variable.

 

변수의 네이밍 규칙

• 변수명으로 특수문자를 제외한 문자, 숫자, `_`, `$`를 포함할 수 있습니다.
• 하지만 숫자로 시작할 수는 없습니다.
• 프로그래밍 언어에서 사용되고있는 단어들은 사용할 수 없습니다.
  ex) `let`, `const`, `true`, `false` …
• 변수명은 변수의 목적을 명확히 알 수 있도록 정하는 것이 좋습니다.

 

템플릿 리터럴

문자열을 ``(백틱)으로 감싸서 사용하는 방법입니다.

이것은 문자열 내부에 변수를 삽입하여 사용할 수 있는 기능입니다.

const firstName = 'Kim';
const secondName = 'ChulSu';
console.log(`${firstName} ${secondName}`);
// 'Kim ChulSu'

+를 활용해서 문자열을 붙이는 것보다 가독성이 훨씬 우수합니다.

 

---

타입

Number

자바스크립트에서 숫자를 표현하기 위한 데이터 타입이며, 정수와 실수를 모두 표현할 수 있습니다.

같은 숫자 값 간에는 간단한 사칙연산을 할 수 있습니다.

 

산술 연산자 +, -, *, /

 

복잡한 연산을 하려면 `Math`라는 내장 객체를 사용해야합니다.

• Math.floor(): 괄호 안의 숫자를 내림하여 반환합니다.
• Math.ceil(): 괄호 안의 숫자를 올림하여 반환합니다.
• Math.round(): 괄호 안의 숫자를 반올림하여 반환합니다.
• Math.abs() : 괄호 안의 숫자의 절대값을 반환합니다.
• Math.sqrt(): 괄호 안의 숫자의 제곱근을 반환합니다.
• Math.pow(): 괄호 안의 첫 번째 숫자를 밑으로 하고 두 번째 숫자를 지수로 하여 계산한 숫자를 반환합니다.

 

String

자바스크립트에서 인간의 언어를 표현하기 위한 데이터 타입입니다.

따옴표(’), 쌍따옴표(”), 백틱(`)으로 원하는 글자를 감싸면 됩니다.

문자열끼리는 `+` 를 활용하여 이어 붙일 수 있습니다.

그런데 문자열과 다른 타입을 이어붙이면 모두 문자열로 변하기 때문에 주의해야합니다.

"Hello " + "world!"; // Hello world!
123 + "1"; // 1231

문자열에는 length속성이 있습니다. 이 length속성을 활용하면 문자열의 길이를 알 수 있습니다.

console.log("abc".length); // 3
console.log("abc defg".length); // 8

문자열을 순서를 셀 수 있습니다. 주의해야할 점은 순서가 1부터 시작하는 것이 아니라 0부터 시작하는 것입니다.

let name = 'kim';
console.log(name[0]); // 'k'

 

주요 메서드

• toLowerCase(): 문자열 모두를 소문자로 변환합니다.
• toUpperCase(): 문자열 모두를 대문자로 변환합니다.
• concat(): 문자열을 이어붙입니다.
• slice(): 문자열을 자를 수 있습니다.
• indexOf(): 문자열에서 괄호 안에 있는 문자의 위치를 찾아 인덱스를 반환하고 없다면 -1을 반환합니다.
• includes(): 문자열에서 괄호 안에 있는 문자가 포함되어있는지 확인합니다.

'ABC'.toLowerCase(); // 'abc'
'abc'.toUpperCase(); // 'ABC'
'ABC'.concat('abc'); // 'ABCabc'
'abcdefg'.slice(0, 3); // 'abc'

'abcde'.indexOf('a'); // 0
'abcde'.indexOf('z'); // -1

'abcde'.includes('a') // true
'abcde'.includes('z') // false

 

Boolean

자바스크립트에서 사실 관계를 확인하기 위한 데이터 타입입니다.

true거나 false입니다.

 

undefined

변수에 값이 할당되지 않았을 때, 자바스크립트 엔진이 암묵적으로 초기화하는 값입니다.
타입과 값이 모두 undefined입니다.

const value;
console.log(value); // undefined
console.log(typeof value); // undefined

 

null

의도적으로 값이 없다는 것을 명시하기 위해서 사용합니다.
그런데 null타입의 typeof결과는 object가 나오므로 주의해야합니다.

const value = null;
console.log(value); // null
console.log(typeof value); // object

 

Symbol

ES6에서 새로 추가된 타입으로 변경이 불가능한 원시 타입의 값입니다.

 

falsy

boolean타입은 아니지만 false로 여겨지는 값입니다.

false, 0, "", null, undefined, NaN 등

 

비교연산자

엄격한 동치 연산자 ===,!==

값과 타입이 같으면 \`true\`, 다르면 \`false\`를 반환합니다. 값이 같아도 타입이 다르다면 false가 됩니다. 

123 === 123 // true  
123 === '123' // false

느슨한 동치 연산자 ==, !=

보통 타입이 달라도 값이 같으면 true 다르면 false를 반환합니다.  

123 === '123' // true

크기 비교 연산자 >, <, >=, <=

 

논리연산자

- && (논리합 OR): 두 값 중 하나만 true여도 true입니다.
- ||(논리곱 AND): 두 값이 모두 true면 true입니다.
- ! (부정 NOT): 사실 관계를 반대로 표현합니다.