ES6
부족함을 느껴 다시 한 번 자바스크립트 공부를 했다. 일단 봐둬야 할 것들은
- 변수 var, let, const
- 조건문 if else
- 반복문 for
- 함수 function return
- 배열 array object
- 이벤트 addEventListener 이렇게 생각해놨다.
파라미터
function 알림창열기() {
document.getElementById('alert').style.display = 'block';
}
function 알림창닫기() {
document.getElementById('idName').style.display = 'none';
}
파라미터를 사용하여 ()안에 값을 입력하면
function 알림창열기('x'){
document.getElementById('alert').style.display = x;
}
파라미터 값이 'x'에 들어가게 된다.
알림창열기('block');
알림창열기('none');
두 줄로 위 두 개의 함수와 같은 역할을 수행할 수 있게 된다.
f(x) = x + 5 일 때, f(1) = 1 + 5, f(2) = 2 + 5 와 같이 파라미터가 x의 위치에 들어가는 것을 알 수 있다.
f(파라미터) = 파라미터 + 5 이런 식으로 되는 것 파라미터를 쓰려면 파라미터가 들어갈 위치만 있으면 된다.
기본값
함수의 파라미터의 인자에 기본 값을 설정하는 법
인자가 name 이라고 하면 인자에 (name = '기본값')을 작성하면 name의 기본값은 '기본값'이 된다.
함수 안에서 name이 할당되지 않으면 기본값이 사용된다.
파라미터? 아규먼트?
f(x)와 f(4) 가 있다고 하면
x 는 Parameter(파라미터)라고 하고 x에 들어가는 4는 들어가는 Arguement(아규먼트)라고 한다.
이는 파라미터의 값으로 아규먼트 4를 대입하였다. 라는 의미가 되겠다.
변수
let - 다른 값으로 변경이 가능함
const - 다른 값으로 변경이 불가능한 상수
- 변수는 문자와 숫자, $와 _만 사용한다.
- 첫글자는 숫자가 될 수 없다.
- 예약어는 사용할 수 없다.
- 가급적 상수는 대문자로 표기한다.
- 변수명은 읽기 쉽고 이해할 수 있게 작성.
- 먼저 const로 값을 주되, 변할 가능성이 있는 것들은 let으로 고쳐준다.
null과 undefined
null은 존재하지 않는 값으로, 객체 취급하지 않는다. (오류지만 하위 버전의 호환성 때문에 고치지 않는다고 한다.) undefiend는 값이 할당되지 않은 값
형변환
String() 괄호 안의 타입을 문자형으로 변환
Number() 괄호 안의 타입을 숫자형으로 변환
- Number(true) = 1
- Number(false) = 0
- Number() 안에 문자열이 들어가면 NaN(Not a number) 을 반환한다.
- Number(null) 0 을 반환한다.
- Number(undefined) NaN을 반환한다.
Boolean에서 false
- 숫자 0
- 빈 문자열 ''
- null
- undefined
- NaN
이 값들은 모두 false를 반환하고 이 외의 값들은 모두 true를 반환한다.
연산자
+ , - , * , / , %(나머지)
거듭제곱 **
증가연산자 let num = 10; let result = ++num; 증가 (num이 뒤에 있어 변경 O) let result = num++; 변동 없음 (num이 앞에 있어서 변경 X)
반복문
for
for (let i = 0; i < 10; i++){
코드
}
( 초기값 ; 조건 ; 코드 실행 후 작업 ) 세 부분으로 나뉜다.
초기 값 설정 후 조건이 true면 코드가 실행되고 i값을 증가시켜준다.
이를 반복하다가 조건이 false가 되면 반복문이 멈춘다.
while
let i = 0;
while (i<10) {
코드
i ++;
}
명확한 횟수가 정해져 있으면 for문을, 그렇지 않으면 while을 사용하자
반복문을 빠져나오는 방법
break : 멈추고 빠져나옴 continue : 멈추지만 빠져나오지 않고 다음 반복문 진행
Switch
if/else문과 원리가 비슷하다.
Switch(평가) {
Case A:
A일 때 코드
Case B:
B일 때 코드
}
둘 다 같은 코드
if(평가 == A) {
A일 때 코드
} else if (평가 == B) {
B일 때 코드
}
switch 문은 break가 없다면 계속 진행한다.
함수 선언문과 함수 표현식
함수 선언문
function sayHello() {
console.log('Hello');
}
sayHello();
위와 아래의 결과값은 같으나
함수 표현식
화살표 함수를 쓸 수 있다.
let sayHello = function() {
console.log('Hello')
}
sayHello();
But
함수 선언문은 어디서든 호출이 가능하다. 이는 호이스팅 때문이다.
sayHello(); 를 함수 위에서 써도 동작한다.
호이스팅 - 스코프 내부 어디서든 변수 선언은 최상위에 선언된 것 처럼 행동한다.
선언은 위에서 되는 반면 할당은 위에서 되지 않는다!
반면 함수 표현식은 코드에 도달하면 동작한다. 때문에 순차적으로 작성해야한다.
반면 함수 표현식은 코드에 도달하면 동작한다.
var name;
name = 'Mike'; (O)
let age;
age = 30; (O)
const gender;
gender = 'male' (X) > 에러
생성자 함수
function Item(title, price){
//this = {}; 빈 객체 생성 >> 생략되어 있음
this.title = title;
this.price = price;
// 메소드 생성
this.showPrice = function(){
console.log('가격은 ${price}원 입니다.');
}
//return this; >> 생략되어 있음 > 생략된 두 부분은 new로 호출하면 알고리즘에 의해 실행이 된다!
}
const Item1= new Item('인형' , 3000);
const Item2= new Item('가방' , 4000);
const Item3= new Item('필통' , 5000);
item3.showPrice();
showPrice 메소드에 의해 '가격은 5000원 입니다.' 가 출력된다
