javascript #2

aksel26·2021년 4월 16일
0

JavaScript

목록 보기
9/16
post-thumbnail

변수

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 오류`

문제 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])  // 입니다손흥민안녕하세요 

}

profile
Jr. FE Dev

0개의 댓글