1.변수란?
값을 저장할 수 있는 공간, 이름이 주어진 기억장소
App을 실행하게 되면 입력, 처리, 출력이 일어난다.
그중에서도 처리(process)를 하기 위해서는 데이터를 임시적으로 저장할 수 있는 변수가 필요하다.
한마디로, 물건을 잠시 보관할 수 있는 상자 같은 역할이 바로 변수이다.
변수를 선언할때는
let, const를 사용해 선언할 수 있다.
let b; (변수선언)
let b = 0; (변수선언과 값의 할당)
b=1; (값의 재할당)
내가 let b=0; 이라고 변수를 선언과 동시에 값을 할당하면 b라는 이름을 주어진 메모리 공간에 0이 할당이 된다. 왜? b라는 이름을 사용을 할까? 메모리 주소가 너무 길고 외우기 어려워서 변수명을 정해주는 것이다. 그래서 b는 변수이름 또는 식별자라고 부른다. 또한 b의 재할당도 할 수 있다.
2.변수명을 정할 때
저장된 값을 잘 나타낼 수 있는 의미있는 이름 (구체적일 수록 좋다)
- 한국어 x 예약어 x
- 첫 글자가 숫자이면 안됨
- 특수문자 x (_ $ 두가지는 가능)
- 대소문자로 구별(camelCase)
- 라틴문자(0-9, a-z, A-Z) 가능
- 이모지 X
- 여러개 변수를 1, 2, 3로 숫자로 구분하는 것은 안좋다. (구체적으로 작성해라)
나쁜예제
의미가 없는 변수이름을 가지면 안좋다. 예를 들어,
let number = 25; (무엇을 나타내는 숫자??)
let myAge = 25; (내 나이라는 변수명을 주어 구체적으로 쓰는 것이 좋다)
나쁜예제
변수이름을 1, 2로 구분하는것도 안좋다
예를 들어,
let audio1; (1은 뭐길래?? 의미가 없다)
let audio2; (2는 뭐길래?? 의미가 없다)
let audioBackground; let audioWind; (이렇게 어떤 오디오인지 구체적으로 작성하는 것이 좋다) !!공통적인 변수명을 가지면 맨 앞에 공통단어를 먼저 작으면 코드 짤때 편하다
3.숫자형 타입
let integer = 123; //정수
let negative = -123; //음수
let double = 1.23; //실수(소수점이 있는 숫자)
let binary = 0b1111011; //2진수
let octal = 0o173; //8진수
let hex = 0x7b; //16진수
console.log(binary); //123
console.log(octal); //123
console.log(hex); //123
아무숫자나 할당할 수 있다주의해야하는 경우!
숫자를 나눌때 console.log(0 / 123); //0 console.log(123 / 0); //infinity console.log(123 / -0); //-infinity console.log(123 / 'text'); //NaN (Not a number)
- 특정한 숫자를 0으로 나눌때
infinity가 나올수 있으니 주의해야한다.문자열을 숫자로 나누면 오류가 발생한다.(NaN)- 큰 숫자를 표현할때는
bigInt를 사용한다.
BigInt란?정수 리터럴 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있다.
참고:mdnlet bigInt = 1234567891324567890132156498879n; console.log(bigInt); //출력하고 연산할 수 있다
- 스크립트의 연산은 정확하지 않다. (부동소수점때문에)
4.문자열 타입(string)
let string = '반가워요';
string = '반가워!';
console.log(string);4-1.특수문자 출력법
string = '"반가워!"';
console.log(string);
string = '반가워!\n사자야!\t잘가!'
console.log(string); // 반가워!
// 사자야! 잘가!이스케이프
| 코드 | 출력 |
|---|---|
| /n | 줄바꿈 |
| /t | 탭 |
4-2.템플릿 리터럴 (Template Literal)
`` 백틱을 사용하여 표현한다
let id = '멋쟁이사자';
let message = "'안녕!," + id + "\n오늘도 즐거운 코딩!'";
console.log(message); // '안녕!,
//오늘도 즐거운 코딩!'
//백틱 사용예시
message = `'안녕!, ${id}
오늘도 즐거운 코딩!`
console.log(message); // '안녕!,멋쟁이사자
//오늘도 즐거운 코딩!'- 백틱 사용시 엔터를 쳐서
줄바꿈이 바로 가능하다. - 모든 공백도 있는 그대로 적용된다.
${}사이에 변수나 연산 등을 삽입할 수 있다.${}문자열로 자동 변환이 된다.
let name = `사과`
let price = 2000
let num = 2;
console.log(name + "의 가격은 " + (price * num) + "원 입니다"); //+연산자 사용
console.log(`${name}의 가격은 ${price * num}원 입니다`); //백틱, ${}사용
4-3.예시
let txt = 'ABCDEFGHIJKLMNABC';
let number = '100';
console.log(parseInt(number) + parseInt(number)); //200
console.log(`txt.length : ${txt.length}`); //txt.length : 17
console.log(`txt[1] : ${txt[1]}`); //txt[1] : B
console.log(`txt.slice(0, 3) : ${txt.slice(0, 3)}`); //txt.slice(0, 3) : ABC
console.log(`txt.replace('ABC', 'hojun') : ${txt.replace('ABC', 'lion')}`);
- parseInt? 전달받은 문자열을 숫자형으로 변환한다.
- slice(시작인덱스, 종료인덱스) : 시작인덱스부터 종료인덱스 - 1까지 반환합니다.
- replace? 자바스크립트 내장함수이다. text.replace("찾을 문자열", "변경할 문자열")
5.불리언 타입(boolean)
let 참 = true;
let 거짓 = false;
console.log(참);
console.log(거짓);5-1.is형용사
is다음에 형용사를 붙여 사용할 수 있다.
let isFree = true; //이거 공짜니?
let isBroken = false; //이거 고장났니?
console.log(isBroken); //flase5-2.참과 거짓인 값
느낌표두개(!!)는 다른 타입의 데이터를 boolean 타입으로 명시적으로 형 변환하여 true와 false로 값을 리턴해준다.
| 값이 텅텅비어있으면 false | |
|---|---|
| console.log(!!0); | flase |
| console.log(!!-0); | flase |
| console.log(!!''); | flase |
| console.log(!!null); | flase |
| console.log(!!undefined); | flase |
| console.log(!!NaN); | flase |
| true | |
|---|---|
| console.log(!!1); | true |
| console.log(!!-1); | true |
| console.log(!!'text'); | true |
| console.log(!!{}); | true |
| console.log(!!Infinity); | true |
5-3.예시
let value1 = 30;
let value2 = 50;
console.log(value1 > value2); //flase
console.log(value1 >= value2); //false
console.log(value1 < value2); //true
console.log(value1 <= value2); //true
console.log(value1 == value2); //false
console.log('----------');
value1 = 30;
value2 = '30';
console.log(value1 == value2); //value1과 value2의 값이 같은가?true
console.log(value1 === value2); //value1과 value2의 값과 타입이 같은가?false
console.log('----------');
console.log(value1 != value2); //value1과 value2의 값이 다른가? false
console.log(value1 !== value2); //value1과 value2의 값과 타입이 다른가? true
console.log('----------');
value1 = true;
value2 = false;
console.log(!value1); //false
console.log(!!value2); // false 강조!! 정말 많이 사용합니다.
6.null, undefined (텅텅비어있는)
null은 비어있다는 것. (명시적으로 변수에 값이 없다는 의미)
undefined 정의되지 않는 상태.(변수의 실체가 없는 상태)
let treasure;
console.log(treasure); //undefined (변수값이 있는지 없는지 모른다~)
let treasure = 'money';
treasure = null; //변수값이 없는 상태로 만들어 버렸다.7.객체타입(object)
여러가지 데이터를 한꺼번에 묶어놓은 것을 복합데이터라고 하며 객체라고 한다.
{key : value}
value에는 원시타입 또는 객체 타입을 사용할 수 있다.
7-1.객체의 리터럴 표현은 {}
리터럴이란? 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법.
7-2.예시
1.예시
let person = {
//key: value
name: '라이언',
age: 8,
height : 30,
weight : 40,
treasure : {'첫번째보물' : '고기', '두번째보물' : '돈'},
}console.log(`제 이름은 ${person.name}입니다`);
console.log(`제 이름은 ${person['name']}입니다`);
console.log(`제 첫번째 보물은 ${person.treasure.첫번째보물}입니다`);
console.log(`제 첫번째 보물은 ${person['treasure']['첫번째보물']}입니다`);
//제 첫번째 보물은 고기입니다${person.name} ${person['name']} 어떤 차이가 있는가??
2.예시
let 라이언상세정보 = {
이력 : {
'첫번째 직장': {
'회사이름': '샘성',
'부서': '경영지원',
'직책': '대표',
},
'두번째 직장': {
'회사이름': '러슁',
'부서': '경영지원',
'직책': '대표',
},
'세번째 직장': {
'회사이름': '넥스',
'부서': '경영지원',
'직책': {
'첫번째직책':'사원',
'두번째직책':'대표',
},
},
},
}
console.log(라이언상세정보.이력['세번째 직장'].직책.두번째직책); //대표8.타입을 확인하는 법
자바스크립트는 인터프리터(런타임시 코드를 한줄씩 번역해서 실행) 언어이다. -> dynamic 동적타입
할당된 값에 따라서 데이터 타입이 결정된다.
type of:데이터 타입을 확인
참고:https://ifuwanna.tistory.com/278
드림코딩, 모던자바스크립트
