JS 튜토리얼

제이에스 홈 JS 소개 JS 어디로 JS 출력 JS 문 JS 구문 JS 코멘트 JS 변수 제이에스렛 JS 상수 JS 연산자 JS 산술 JS 할당 JS 데이터 유형 JS 함수 JS 객체 JS 이벤트 JS 문자열 JS 문자열 메서드 JS 문자열 검색 JS 문자열 템플릿 JS 번호 JS 숫자 메서드 JS 배열 JS 배열 메서드 JS 배열 정렬 JS 배열 반복 JS 배열 상수 JS 날짜 JS 날짜 형식 JS 날짜 가져오기 메서드 JS 날짜 설정 방법 JS 수학 JS 랜덤 JS 부울 JS 비교 JS 조건 JS 스위치 JS 루프 In에 대한 JS 루프 의 JS 루프 JS 루프 동안 JS 브레이크 JS 이터러블 JS 세트 JS 맵 JS 유형 JS 유형 변환 JS 비트와이즈 JS 정규 표현식 JS 오류 JS 범위 JS 호이스팅 JS 엄격 모드 JS 이 키워드 JS 화살표 함수 JS 클래스 JS JSON JS 디버깅 JS 스타일 가이드 JS 모범 사례 JS 실수 JS 성능 JS 예약어

JS 버전

JS 버전 JS 2009(ES5) JS 2015(ES6) JS 2016 JS 2017 JS 2018 JS IE / 엣지 JS 연혁

JS 객체

객체 정의 개체 속성 개체 메서드 개체 표시 개체 접근자 객체 생성자 개체 프로토타입 객체 반복 가능 객체 세트 객체 맵 개체 참조

JS 함수

기능 정의 기능 매개변수 함수 호출 함수 호출 기능 적용 함수 클로저

JS 클래스

수업 소개 클래스 상속 클래스 정적

JS 비동기

JS 콜백 JS 비동기 JS 약속 JS 비동기/대기

JS HTML DOM

DOM 소개 DOM 메서드 DOM 문서 DOM 요소 DOM HTML DOM 양식 DOM CSS DOM 애니메이션 DOM 이벤트 DOM 이벤트 리스너 DOM 탐색 DOM 노드 DOM 컬렉션 DOM 노드 목록

JS 브라우저 BOM

JS 창 JS 화면 JS 위치 JS 연혁 JS 네비게이터 JS 팝업 경고 JS 타이밍 JS 쿠키

JS 웹 API

웹 API 소개 웹 양식 API 웹 기록 API 웹 스토리지 API 웹 작업자 API 웹 가져오기 API 웹 지리적 위치 API

JS 아약스

AJAX 소개 AJAX XMLHttp AJAX 요청 AJAX 응답 AJAX XML 파일 AJAX PHP AJAX ASP AJAX 데이터베이스 AJAX 애플리케이션 AJAX 예제

JS JSON

JSON 소개 JSON 구문 JSON 대 XML JSON 데이터 유형 JSON 구문 분석 JSON 문자열화 JSON 객체 JSON 배열 JSON 서버 JSON PHP JSON HTML JSON JSONP

JS 대 jQuery

jQuery 선택기 제이쿼리 HTML 제이쿼리 CSS 제이쿼리 DOM

JS 그래픽

JS 그래픽 JS 캔버스 JS 플로틀리 JS 차트.js JS 구글 차트 JS D3.js

JS 예제

JS 예제 JS HTML DOM JS HTML 입력 JS HTML 객체 JS HTML 이벤트 JS 브라우저 JS 편집기 JS 연습 JS 퀴즈 JS 인증서

JS 참조

자바스크립트 객체 HTML DOM 객체


자바스크립트 범위

범위는 변수의 접근성(가시성)을 결정합니다.

JavaScript에는 3가지 유형의 범위가 있습니다.

  • 차단 범위
  • 기능 범위
  • 글로벌 범위

블록 범위

ES6(2015) 이전에는 JavaScript에 전역 범위함수 범위 만 있었습니다 .

ES6에는 두 가지 중요한 새 JavaScript 키워드인 let및 가 도입되었습니다 const.

이 두 키워드는 JavaScript에서 블록 범위 를 제공합니다.

{ } 블록 내부에 선언된 변수는 블록 외부에서 액세스할 수 없습니다.

예시

{
  let x = 2;
}
// x can NOT be used here

키워드 로 선언된 변수 var는 블록 범위를 가질 수 없습니다.

{ } 블록 내부에 선언된 변수는 블록 외부에서 액세스할 수 있습니다.

예시

{
  var x = 2;
}
// x CAN be used here

로컬 범위

JavaScript 함수 내에서 선언된 변수는 함수에 대해 LOCAL 이 됩니다.

예시

// code here can NOT use carName

function myFunction() {
  let carName = "Volvo";
  // code here CAN use carName
}

// code here can NOT use carName

지역 변수에는 함수 범위 가 있습니다 .

함수 내에서만 액세스할 수 있습니다.

지역 변수는 함수 내에서만 인식되기 때문에 같은 이름의 변수를 다른 함수에서 사용할 수 있습니다.

지역 변수는 함수가 시작될 때 생성되고 함수가 완료되면 삭제됩니다.


기능 범위

JavaScript에는 함수 범위가 있습니다. 각 함수는 새 범위를 만듭니다.

함수 내부에 정의된 변수는 함수 외부에서 액세스(표시)할 수 없습니다.

var, let 및 로 선언된 변수는 const함수 내부에서 선언할 때 매우 유사합니다.

모두 기능 범위 가 있습니다 .

function myFunction() {
  var carName = "Volvo";   // Function Scope
}
function myFunction() {
  let carName = "Volvo";   // Function Scope
}
function myFunction() {
  const carName = "Volvo";   // Function Scope
}

전역 JavaScript 변수

함수 외부에서 선언된 변수는 GLOBAL 이 됩니다.

예시

let carName = "Volvo";
// code here can use carName

function myFunction() {
// code here can also use carName
}

전역 변수에는 전역 범위 가 있습니다 .

웹 페이지의 모든 스크립트와 기능에서 액세스할 수 있습니다. 


글로벌 범위

전역으로 선언된 변수 (함수 외부)에는 전역 범위 가 있습니다.

전역 변수는 JavaScript 프로그램의 어디에서나 액세스할 수 있습니다.

var, let 및 로 선언된 변수는 const블록 외부에서 선언될 때 매우 유사합니다.

모두 글로벌 범위 가 있습니다 .

var x = 2;       // Global scope
let x = 2;       // Global scope
const x = 2;       // Global scope

자바스크립트 변수

JavaScript에서 객체와 함수도 변수입니다.

범위는 코드의 다른 부분에서 변수, 개체 및 함수의 액세스 가능성을 결정합니다.



자동으로 전역

선언되지 않은 변수에 값을 할당하면 자동으로 GLOBAL 변수가 됩니다.

이 코드 예제는 carName값이 함수 내부에 할당된 경우에도 전역 변수를 선언합니다.

예시

myFunction();

// code here can use carName

function myFunction() {
  carName = "Volvo";
}

엄격한 모드

모든 최신 브라우저는 "엄격한 모드"에서 JavaScript 실행을 지원합니다.

이 튜토리얼의 뒷부분에서 엄격 모드를 사용하는 방법에 대해 자세히 알아볼 것입니다.

"Strict Mode"에서 선언되지 않은 변수는 자동으로 전역적이지 않습니다.


HTML의 전역 변수

JavaScript에서 전역 범위는 JavaScript 환경입니다.

HTML에서 전역 범위는 창 개체입니다.

키워드 로 정의된 전역 변수 var는 창 개체에 속합니다.

예시

var carName = "Volvo";
// code here can use window.carName

키워드 로 정의된 전역 변수 let는 창 개체에 속하지 않습니다.

예시

let carName = "Volvo";
// code here can not use window.carName

경고

의도하지 않는 한 전역 변수를 생성하지 마십시오.

전역 변수(또는 함수)는 창 변수(또는 함수)를 덮어쓸 수 있습니다.
창 개체를 포함한 모든 함수는 전역 변수와 함수를 덮어쓸 수 있습니다.


JavaScript 변수의 수명

JavaScript 변수의 수명은 선언될 때 시작됩니다.

함수(로컬) 변수는 함수가 완료되면 삭제됩니다.

웹 브라우저에서는 브라우저 창(또는 탭)을 닫으면 전역 변수가 삭제됩니다.


함수 인수

함수 인수(매개변수)는 함수 내에서 지역 변수로 작동합니다.