JavaScript 기초 - 10 가지 요약 (변수,자료형, alert, prompt, confirm, 형변환, 기본 연산자, 함수, 표현식, 객체, 매서드, 배열)
1. 변수
예약어는 사용할 수 없음
문자와 숫자, $와 _만 사용가능
첫글자는 숫자가 될 수 없다
가급적 상수는 대문자로 표현
문자열은 " " 로 감싸주고 정수형은 숫자를 적어주면 됌.
let , const : var과 차이점 = 한번 선언한 변수를 또 선언할 경우 에러가 발생
let 은 변수 선언후 값을 바뀔 수 있음
const 는 값을 바꿀 수 없음
2. 자료형
문자형
const name01 = "KIM";
const name02 = 'HONG';
const talk ='I\'m a good'
const message = "My name is ${name}";
숫자형
const age = 20;
const PI = 3.14;
const a = 1/0 => (Infinity) 무한대
const b = name/2 => NaN (Not a Number )
Boolean
const a = true;
const b = false;
null , undefined
null 은 존재하지 않음
undefined 는 값이 없음
typeof
변수의 자료형을 알아낼수 있음
3. alert, prompt, confirm
alert() : 알림
aler("환영합니다. ${name}님");
prompt() : 입력 - 입력한 값을 띄워주고 사용자의 입력값을 받음 , 입력하지 않고 취소를 누를경우 null 이 됌
const gender = prompt("당신의 성별을 입력하세요", "M/F");
ㄴ 띄워줄 내용 ㄴ 입력 default
confirm() : 확인 - 확인 누를시 true 취소 누를시 false
const isAdult = confirm("당신은 성인입니까?");
단점 : 알림이 나오면 스크립트 일시정지 , 스타일링이 불가능함
4. 형변환
prompt 입력 값은 무조건 문자형
만약 숫자를 받아서 더하면 90 + 80 이 아니라
"90" + "80" 이 되므로 9080 이 나옴
나누기 같은 표현식에선 자동 형변환도 가능하지만 원인을 찾기 힘든 에러를 발생시킬 수 있음
명시적 형변환이 더 좋음
문자형 형변환
var a = 1234;
String(3)
String(true)
String(a)
정수형 형변환
Number("1234");
Number(true) => 1
Number(false) => 0
Boolean 형
false
- 숫자 0
- 빈문자열 ""
- null
- undefined
- NaN
이것들은 모두 false 나머지는 모두 true 가 된다.
Boolean(0); => false
Boolean(""); => false
Boolean(1233) => true
Boolean("javascript"); => true
Boolean(NaN); => false
! 암기 !
Number(null) == 0
Number(undefined) == NaN
5. 기본연산자
덧셈 + , 뺄셈 - , 곱셈 *, 나누기 / , 나머지 %
증감 연선자 ++ , --
6. 함수
OR
function talk(name){
let newName = name || 'friend';
let msg = "hello, ${name}"
console.log(msg)
}
talk(); // --> Hello, friend
talk("KIM"); // --> Hello, KIM
defalut value
function talk(name = 'friend'){ // default 값
let msg = "hello, ${name}"
console.log(msg)
}
talk(); // --> Hello, friend
talk("KIM"); // --> Hello, KIM
7. 함수 표현식
들어가기전 호이스팅(hoisting) 이란 ?
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말한다.
함수 선언문은 어디서든 호출할 수 있음 (위에 적어놓은게 함수 선언문임)
java : Interpreted language 이고 javascript 는 hoisting 하여 함수를 먼저 모아놓고 코드를 실행하기 때문에
sayHello();
function sayHello(){
console.log("hello");
}
이처럼 함수 선언보다 먼저 함수를 실행한 것 처럼 보여도 잘 작동함.
하지만
함수 표현식은 코드에 도달하면 생성을 함 (hoisting X)
let sayHello = function sayHello(){
console.log("hello");
}
sayHello(); // 함수 표현식은 코드에 도달하면 함수를 생성함
화살표 함수
let add01 = function(num1, num2){
return num1+num2;
}
let add02 = (num1, num2) =>(
return num1+num2;
)
let add03 = (num1,num2) => num1+num2;
let myName = name => 'my name is ${name}';
8. 객체
const men = { // 오브젝트 생성
name : 'Kim',
age : 33
}
console.log(men.name); // 호출
console.log(men['age']);
men.gender = 'male'; // 추가
delete men.gender; // 삭제
단축 프로퍼티
const name = 'Kim';
const age = 33;
const men = {
name, // name : name
age, // age : age
gender : "male"
}
men.hihihi; // undefined
// in 을 통해 해당 프로퍼티 존재 여부 확인
'hihihi' in men // false
'age' in men // true
for in 반복문으로 객체 값 가져오기
for(let key in men){
console.log(key);
console.log(men[key]);
}
9. 매서드 (method)
객체 프로퍼티에 할당된 함수
const men = {
name : "kim",
age : 30,
sayHi : function(){
console.log("hi, I'm ${this.name});
}
}
화살표 함수에서 this 사용시 외부에서 값을 가져옴..
10. 배열
let students = ['철수','영희', .... ];
console.log(students[0]); -> 철수
students[0] = "맹구";
let test = [
'민수',
3,
false,
{
name: 'mike',
age : 20
},
function(){
console.log("hi");
}
] // 배열은 여러 형태를 넣을 수 있음
test.length(); // 배열의 길이를 구함
test.push("안녕"); // 제일 뒤에 추가
test.pop(); // 제일 뒤를 제거
test.unshift("1번","2번"); // 제일 앞에 추가
test.shift(); // 제일 앞 제거
for of 반복문
for(let day of days){
donsole.log(day);
}
요소를 돌면서 가져옴