1.JS 핵심 - window, dom, type, hoisting, scope, let, const, 형변환

0. window, document

 

0.1. window

• window : JS는 browser에서 사용하는 언어로 브라우저에서 사용하는 모든 기능을 window라는 객체에 저장 했다.
• scope
  • 전역 : window 객체 영역
  • 지역 : function이나 객체 내부 영역
    1. block scope: 객체의 { } 내부에서만 유효
    2. function scope : 해당 method 내부에서만 유효
• scope 큰 흐름
  • JavaScript 파일을 여러 개 가지고 있을 때, 각 파일마다 자신의 전역 스코프 존재
  • 즉, 각 파일마다 window 객체에 해당하는 전역 객체가 있고, 그 안에서 변수와 함수가 정의
  • 그러나 여러 개의 JavaScript 파일이 웹 페이지에서 로드되어 하나의 페이지에서 실행될 때, 각 파일의 전역 객체가 하나의 전역 스코프에서 합쳐진다. 이 때, 변수와 함수 이름이 중복되어 충돌이 생긴다.
    
    
  • 충돌 방지
    • 여러 개의 JavaScript 파일을 작성할 때에는 변수와 함수 이름의 중복을 피하기 위해 네임스페이스(namespace)를 사용하거나 모듈 시스템을 사용
    • 네임스페이스: 각 파일에서 정의된 변수와 함수 이름을 해당 네임스페이스 안에서만 사용할 수 있도록 분리할 수 있다.
    • 모듈 시스템: 각 파일에서 정의된 변수와 함수를 외부에서 직접 접근하지 않고, 필요할 때만 불러와 사용할 수 있도록 분리할 수 있다.

 

 

0.2. document

• document : 해당 browser가 열고 있는 html 파일을 의미한다.
  • js가 html에 접근 할 수 있는 이유
    • JavaScript는 웹 브라우저에서 실행되는 클라이언트 측 스크립트 언어
    • 웹 브라우저는 HTML 문서를 렌더링할 때 DOM(Document Object Model) 트리를 생성
      DOM: HTML 문서를 트리 구조로 표현하는 방법
      
      
    • JavaScript는 이 DOM 트리에 접근하여 HTML 문서의 요소에 접근하고 수정
    • DOM은 모든 HTML 요소를 객체로 나타내며, 이러한 객체를 JavaScript에서 사용.
    • JavaScript는 이러한 객체들에 접근하여 html 요소의 속성, 스타일 등을 변경하거나 이벤트를 처리
      
      
    • html을 dom이라는 객체로 변경 -> 객체 이름이 document
    • js는 document라는 객체에 접근 == html에 접근
    • 객체 내부 속성을 변경 == html 변경
    • html 객체 접근 방법 예시
      1. document.getElementsByTagName
      2. document.getElementsByID
      3. document.getElementsByClassName

 

window {
 // 변수 저장
 // 객체 저장 - 객체는 function, 배열, 객체 
}

window // window 객체 조회
window.alert // 어떤 함수인지 조회

document

document.get...

 

 

1. 출력과 입력

• 출력
  • window.alert() // 경고창 출력
  • console.log() // console창에 출력
  • document.write() // html page에 출력
  • 태그이름.innerHTML = '출력할 내용' // 내용 내부에 tag 존재시 해당 tag로 변경
  • 태그이름.textContent = '출력할 내용' // 내용 내부에 tag 존재시 string으로 판단
    
    

window.alert("oh!");
console.log("hi");
document.write("work");

document.getElementsByTagName("h1")[0].innerHTML = "innerHTML";
document.getElementsByTagName("h1")[0].innerHTML = "<span> innerHTML </span>"; // h1 내부에 span 적용

document.getElementsByTagName("h1")[0].textContent = "textContent";
document.getElementsByTagName("h1")[0].textContent = "<span> textContent </span>";

 

 

• 입력
  • window.confirm(메시지) // 확인창 나옴
    1. 확인 : true 반환
    2. 취소 : false 반환
  • window.prompt("제목", "내용") // 입력한 내용을 문자열로 반환, "내용" 생략 가능
    1. 내용 입력 - 해당 내용 string으로 나옴
    2. 내용 입력 없이 확인 버튼 - "" 빈문자열 입력
    3. 내용 입력 없이 취소 버튼 - null 반환

 

var a = window.confirm("hi"); // 확인 true, 취소 false
console.log(a)

var a = window.prompt("oh!"); // 3가지 존재
var a = window.prompt("oh!", "내용작성"); // 3가지 존재
console.log(a);

 

2. 자료형

• typeof : 변수나 리터럴의 타입 확인 가능
• instanceof : 객체들끼리 비교시 사용
  
  
• type 종류
  1. number = double
  2. string
  3. boolean
  4. null / undefined
  5. object : 배열, 함수, 객체
  6. function : 함수는 함수 타입이 또 따로 존재
  7. symbol : enum 같은 거 

 

• true, false 평가
  • !! 를 통해서 확인 : !! 이 true면 true, !! false 면 false
  • 대표 예
    1. true: false아닌 나머지 전부
    2. false: 0, -0, "", null, false, NaN, undefined

 

console.log(typeof "literal"); //string

var a;
console.log(typeof a); // undefied : 어떤 type인지 조차 모를 경우. 참조형일 경우 null

console.log(typeof {}); // object
console.log(typeof []); // object

console.log(typeof function () {}); // function

console.log(!!0); // false
console.log(!!""); // false
console.log(!!a); // false
console.log(!!NaN); // false
console.log(!!undefined); // false

 

 

3. 동적 타입

• JS는 compile이 되지 않는 언어기 때문에 runtime때 type이 변경이 가능하다.

// 동적 타입
var x;
console.log(typeof x); // undefined

x = 10;
console.log(typeof x); // number

x = "string";
console.log(typeof x); //string

 

 

4. 호이스팅

• 변수나 함수의 선언이 해당 범위(scope)에서 최상단으로 옮겨진다.
• JS는 위에서부터 바로 읽지 않고 한번 script를 읽고 변수, 함수를 먼저 선언 후 수행하기 때문
• 주의: 선언은 위로 올리지 초기화 값을 같이 올린다고는 하지 않았다.

 

num = 6;
console.log(num); // 6
console.log(num2); // undefined

var num;
var num2 = 10; // var num2만 최상단으로 올라간다. num2 = 10; 만 남음
console.log(num2); // 10

catName("maro"); // catName is maro
catName2("maro"); // error

// function(){}도 최상단으로 올라간다.
function catName(name) {
  console.log("catName is " + name);
}

// 변수 선언 function은 변수 선언만 최상단으로 올라간다.
var a = function catName2(name) {
    console.log("catName is " + name);
}

 

 

5. 변수의 범위(scope)

 

• 변수
  • JS에서는 type과 상관없이 변수에 할당된 주소가 연결이 되고 해당 주소의 공간에 값이 저장된다.

 

 

• scope 범위
  1. 전역 : window 객체 영역
  2. 지역 : function이나 객체 내부 영역
     for, try-catch, while, if 등등 다 지역 스코프
     
     1. block scope: 객체의 { } 내부에서만 유효
     2. function scope : 해당 method 내부에서만 유효

 

 

• 함수 레벨 스코프
  • var은 함수를 제외한 지역 스코프 영역을 지역 스코프로 인정하지 않는다. -> 전역변수로 저장해버린다.
  • let, const는 모든 지역 변수에서 block 처리를 한다. - 함수 레벨 스코프가 아니다.

 

 

• 참고
  • JS는 변수 keyword 처리를 하지 않아도 작동을 하는 것은 default로 window 객체에 넣어버리기 때문이다.
    var이 자동으로 붙는다고 생각해도 무방하다.
  • 하지만 위와 같은 방식은 안좋으니깐 사용 안하는 것을 추천한다.

 

 

 

2. 함수 레벨 스코프로 인한 전역 변수

// 함수 level 스코프
var c = 1;
if (true) {
  var c = 2;
}
console.log(c); // 2

var a = 3;
function myfunction() {
  var a = 7;
}
myfunction(); // 함수 호출
console.log(a); // 3

var b = 3;
function myfunction() {
  b = 7; // 전역 변수를 사용한다는 뜻
}
myfunction();
console.log(b); // 7


// let 일 경우
let a = 1

if (true) {
  let a = 5
}

console.log(a) // output: 1

 

 

• var, const, let
  • var : 변수 중복 선언 O, 값 변경 O
  • let : 변수 중복 선언 X, 값 변경 O
  • const: 변수 중복 선언 X, 값 변경 X - 객체일 경우는 가능

 

• var 단점
  1. 변수 중복 선언
  2. 함수 레벨 스코프로 인한 전역 변수 -> 바로 위의 예시에 작성
  3. 변수 선언 이전 호출시 항상 undefined 반환

 

 

1. 변수 중복 선언

// var은 자기 멋대로 다되서 생략

let name2; // 선언과 초기화 분리 가능
// let name2; // 변수 중복 선언 불가
name2 = 12;
name2 = 21;

const name3 = 21;
// const name3; // 선언과 초기화 분리 불가
// const name3 = 21; // 변수 중복 선언 불가
// name3 = 12; // 변수 할당 값 변경 불가

// 객체일 때 해당 block 내부는 변경 가능
const name1 = {
  eng: "woowee",
};
name1.eng = "weewoo";

console.log(name1);

 

 

3. 변수 이전 호출

console.log(c); // 무지성 undefiend 반환
var c = "woowee";

console.log(a); // 변수는 선언되었지만 초기화가 안된 에러
let a = "woowee";

console.log(b); // 선언과 초기화가 둘다 안된 에러 - const는 2개 동시 진행되야 하므로
const b = "woowee";

 

 

참고 블로그 :https://www.howdy-mj.me/javascript/var-let-const

var, let, const의 차이 ⏤ 변수 선언 및 할당, 호이스팅, 스코프

 

 

6. 형변환

• 숫자로 변환
  • Number()
  • parseInt()
  • parseFloat()
    
    
• 문자열로 변환
  • String()
    
    
• boolean으로 변환
  • Boolean()
  • !!