변수
var,
let
const
var : 재선언 O, 재할당 O, 범위 function
재선언 ?
var 이름 = 'KIm';
var 이름 = 'John';let : 재선언 X,
const : 재선언 X
var 이름 = 'KIm';
let 이름 = 'John'; // ( X )
const 이름 = 'Park' // ( X )재할당
var 이름 = 'kim'
이름 = 'john' ( O )
let 이름 = 'kim'
이름 = 'john' ( O )
const 이름 = 'kim'
이름 = 'john' ( X )객체 엘리먼트에서는 ?
const 사람= {이름 ; 'Kim'}
사람.이름 = 'Park' // 재할당
오브젝트 내부 값 변경해도 에러 안남 (const변수 자체를 변경한 것이 아니기 때문)
완전 변경 불가하게 만드려면 ? freeze()
const 사람= {이름 ; 'Kim'}
Object.freeze(사람);
사람.이름='Park' //에러는 안나지만 변경 안됨. 에러 나오게하려면 'use strict' 선언하면 됨
범위
var : function
let, const : { }
var 이름 ='Kim';
function 함수(){
var 이름 = 'Kim'; //function 안에서만 존재하게 된다.
이름;
}
// 이름;(X : not defined)
function 함수(){
var 이름 = 'Kim'; //function 안에서만 존재하게 된다.
이름;
}
if(true){
let 이름 = 'Park';
}
for(let v = 1; ~~~~~ ){ //v 는 for 안에서만 존재함
let
}Hoisting
변수의 선언을 변수 범위 맨 위로 끌고오는 현상
var 이름 ='Kim';
function 함수(){
var 이름 = 'Kim';
}
if(true){
let 이름 = 'Park';
}
var 나이 = 30;
*******hoisting 과정*******
// 변수를 만나면 선언부분을 강제로 맨위로 끌어올림 (js언어 자체가 그러함)
var 나이; //맨 위로 끌고와서 선언하고
var 이름 ='Kim';
function 함수(){
var 이름 = 'Kim';
}
if(true){
let 이름 = 'Park';
}
나이 = 30; // 할당한다.
console.log(나이) //undefined .에러는 나지 않음
var 나이 = 30;
console.log(나이 // 30
// 이유 ?
var 나이;
console.log(나이)
나이 = 30;
console.log(나이)
함수선언도 Hoisting이 일어남
변수 동시에 여러개 만들기
var 나이, 이름, 성별;전역변수
모든 곳에서 쓸수 있는변수
var 나이 = 20 ; // 전역변수
function 함수(){
console.log(나이)
}
함수();
function 함수(){
var 이름 = 'kim' // 지역변수
}
전역변수를 만드는 다른 방법 (better)
: window.이름 = 'Kim';
//window는 자바스크립트 기본 함수를 담온 {오브젝트}
이름; //Kim
window.function(){
}
예제
if(true){
let a = 1;
var b = 2;
if(true){
let b = 3;
}
console.log(b);
}문제1.
함수();
function 함수() {
console.log(안녕);
let 안녕 = 'Hello!';
} let,const는 hoisting될때, 자동으로 undefined가 할당되지 않는다.- temporal dead zone오류 발생
문제2.
함수();
var 함수 = function() {
console.log(안녕);
var 안녕 = 'Hello!';
} - 함수 선언 방법 2가지 중 var변수를 통해 함수를 정의 할 경우,
- hoisting될때,
var 함수형태로만 hoisting된다. - 즉, 함수가 아닌 단순 변수로 hoisting되기 때문에
함수();의 결과는함수 is not a function오류`
- hoisting될때,
문제 3.
let a = 1;
var b = 2;
window.a = 3;
window.b = 4;
console.log(a + b);- var변수는 전역변수 할당으로 4가 된다.
- let변수는 나랑 가장 가까운 범위가 사용된다.
- 답은 5
문제4.
var 버튼들 = document.querySelectorAll('button');
var 모달창들 = document.querySelectorAll('div');
for (var i = 0; i < 3; i++){
버튼들[i].addEventListener('click', function(){
모달창들[i].style.display = 'block';
});
}-
찰나의 순간에 반복문은 3까지 다 돌고 이미 i는 3이 되버린 상황.
콜백 함수는 나중에 실행된다. -
반복문에서 i값은 var로 만든 전역변수
-
이때, 클릭 함수를 클릭해서 모달창들 display를 하려고할때 이미 i 는 3이 되버렸으므로 해당되는 요소가 없다.
-
중괄호가 범위인 let으로 바꾸면된다.
Template literals (backtick) + tagged literal
이용하면 enter키를 사용할 수 있다.
중간중간 변수넣기가 쉽다.
var 문자 = '손흥민';
var 문자 = `손흥
민`
var 변수 = '손흥민';
var 문자 = '안녕하세요 저는 ' + 변수;
console.log(문자)
var 문자 = '안녕하세요'+ 변수 + '저는'; // before
var 문자 = `안녕하세요 ${변수} 저는 `; // after
html코드 입력할 때 유용하다.
var 템플릿 = `<div>
${변수}
</div>`
함수와 같이 사용
************** tagged literal **************
var 변수 = '손흥민';
var 문자 = `안녕하세요 ${변수} 입니다`
function 함수(){
return 10
}
함수`안녕하세요 ${변수} 입니다`
******* 유용한 경우 *********
function 해체분석기(문자들,변수들){
console.log(문자들)
console.log(변수들)
}
// 결과
// (2) ["안녕하세요 ", " 입니다", raw: Array(2)]
// 손흥민
문자를 해체 분석할 수 있다.
단어 순서를 변경하거나
단어를 제거하고거나
${변수} 위치를 옮길때 쉽다.
${} 기준으로 왼쪽 오른쪽들을 Array화 해준다.
순서 변경하고자 할 때
function 해체분석기(문자들,변수들){
console.log(문자들[1] + 문자들[0]) // 입니다안녕하세요
console.log(문자들[1] + 변수들 + 문자들[0]) // 입니다손흥민안녕하세요
}
Jr. FE Dev