변수 선언
var, let: 재할당 가능
const : 재할당 불가
값이 할당되지 않으면 undefined이고 null은 의도적으로 null을 넣어줘야 한다.
var는 let과 같은 의미이지만 let과 const는 block레벨의 유효 범위인 반면 var는 함수레벨의 유효범위이기 때문에(더 큰 범위) let을 쓰는것이 권장된다.
let empty = null; -> null
let undf; -> undefinedobject vs array
object는 {}fh 묶이는 데이더
let user={
name:'name',
age:25,
};array는 []로 묶이는 데이더
let arr = ["a","b","c"]== & === 연산자
==은 값만 비교하지만 ===은 값과 타입을 같이 비교한다.
== (value와 value를 비교)
예: a=10, b=5라고 할 때, a==b는 true
===(value와 data type을 비교)
예 : a=10이라고 할 때, a === 10 은 true, a === "10"은 false
삼항 연산자
a? B() : C() 는 a가 true이면 B, false면 C를 실행하라는 뜻이다. 밑 코드와 동일한 뜻.
if(a){
B();
}else{
C();}String interpolation : 보간법
const el = document.querySelector('ul');
for (let i = 0; i <10 ; i+=1){
const liE = document.createElement('li');
liE.textContent = `순서-${i+1}`;
el.appendChild(liE);
}예시해석: ul 요소를 el에 담는다. for문으로 0부터 9까지 10번을 반복하며 li인 liE const를 만든다. liE에 문자 순서-{i+1}` 는 보간법으로서 back-tick 사이에 문자열과
${변수}를 넣어주었을때 변수에 할당되었던 값이 문자열에 들어가 대체된다.
이 방식을 사용했을 때 변수에 해당되는 값을 유동적으로 String에 넣을 수 있다는 장점이 있다.
함수 function
arguments
function arg(){
console.log(arguments)
}
arg(1,2); //0:1 1:2 가 출력된다arguments는 args[]와 같은 개념으로 받은 매개변수를 array 형식으로 저장한다.
화살표 함수
var foo = function () { console.log("foo") }; // 일반 함수
var bar = () => console.log("bar"); // 화살표 함수
// 매개변수가 없는 경우
var foo = () => console.log('bar');
foo(); // bar
// 매개변수가 하나인 경우
var foo = x => x;
foo('bar'); // bar
// 매개변수가 여려개인 경우
var foo = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
foo(1, 2); // 3
var foo = (a, b) => { return a + b };
foo(1, 2); // 3
var foo = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때
foo(1, 2); // undefined
var foo = (a, b) => { // 여러줄 썼을 때
var c = 3;
return a + b + c;
}화살표 함수는 함수의 단축형이고 이는 항상 익명이다.
"{}"를 사용하면 값을 반환할 때 return을 사용해야 한다.
화살표 함수를 사용하는 이유:
1. 코드의간결성
2. 콜백함수 this에 값을 참조시킬때 (this 값에 lexical scope를 참조시킬 때)
3. map 사용할 때 this를 넘격주어 코드를 더 쉽게 작성할 수 있음.
즉시실행 함수
function(){
return 0;
}//익명 함수기때문에 실핼 할 수 없음
(function(){
return 0;
})()//익명함수를 소괄호 안에 넣어주어() 를 붙여주면 바로 실행 할 수 있다. 즉시 실행 함수 전 statement는 ;으로 끝나야 실행 가능하다.
문법은 (익명함수)() 혹은 (익명함수())이다.
Hoisting 호이스팅
함수 선언부가 유효범위 최상단으로 끌어올려지는 현상.
-함수표현 cont func = function(){return 0;}
-함수선언 fuction func(){return 0;}
함수 표현인 경우에는 func의 함수표현이 나타나기 전까지 func을 사용 할 수 없지만 함수 선언인 경우에는 (호이스팅) 순서와 관계 없이 선언되는 줄 전에 func를 사용 할 수 있다.타이머 함수
- setTimeout(함수A, 시간): 일정 시간 후 함수 A 실행
- setInterval(함수A, 시간): 일정 시간 간격마다 함수 A 실행
- clearTimeout(): 설정된 Timeout함수를 종료한다.
- clearInterval(): 설정된 Interval 함수를 종료한다.
const timer = setTimeout(()=>{
console.log("나는 3초뒤에 출력된다")
},3000);
const hOne=document.querySelector('h1');
hOne.addEventListener('click',()=>{
clearTimeout(timer);
})예시 해석: 프로그램을 실행 시켰을때 3초(3000msec) 뒤에 콘솔로그가 출력된다. 단 3초가 되기 전에 h1 텍스트를 클릭하면 setTimeout 함수가 종료되어 콘솔로그가 실행되지 않는다.
콜백 함수
함수의 인수로 사용되는 함수로서 함수의 실행 위치를 보장해 준다.
function interval(cb){
setInterval(()=>{
console.log("3초 마다 출력된다");
cb();
},3000);
};
interval(()=>{
console.log('done');
})예시 해석:3초마다 console.log("3초 마다 출력된다");가 실행되고 interval이 실행 될때마다 console.log('done');이 실행된다.
☆ 생성자 함수
객체 데이터를 담는다.
function User(first, last){
this.firstName= first;
this.lastNmae=last;
}//생성자,prototype
user.prototype.getFullNmae=function(){
return `${this.firstName} ${this.lastName}`
}
const hayeon = new User('hayeon','u');//hayeon이라는 instance 생성
const anna = new User('anna','ryu');//anna라는 instanc 생성
console.log(hayeon.getFullNmae()); //hayeon u 출력됨this
-normal인 경우 함수 호출 방식에 따라 this가 동적으로 결정.
-arrow인 경우 함수가 선언될 때 this에 바인딩될 객체가 정적으로 결정되어 언제나 상위 scope의 this를 가리킨다.
const test={
name:"hayeon",
const normal: function(){//normal(){} 이렇게 선언 해도 동작한다.
console.log(this.name);
},
const arrow: ()=>{
console.log(this.name);
}
};
test.normal();//hayeon이 출력됨
test.arrow();//test안 name 말고 arrow 안에 name이 있어야 하지만 없어서 undefined 출력
