- 연산자(==) & 일치 연산자(===)
null == undefined; // true
null === undefined; // false-연산자(==)와 일치 연산자(===)로 비교할 때, 결과값이 다름
같은 의미이지만 타입이 다르므로 일치하지 않음
- 객체(object)
-JS의 기본타입은 객체
-여러 프로퍼티(property)나 메소드(method)를 같은 이름으로 묶어놓은 일종의 집합체
var dog = { name: "해피", age: 3 }; // 객체의 생성
// 객체의 프로퍼티 참조
document.getElementById("result").innerHTML =
"강아지의 이름은 " + dog.name + "이고, 나이는 " + dog.age + "살 입니다.";-
innerHTML
-데이터 화면 출력
-HTML은 코딩한 것을 화면에 출력하는마크업언어
● document.write( )
: ()안에 것을 화면에 출력하라는 메서드
● window.alert()
: 경고창을 띄워 ()안의 것을 출력하라는 메서드
● innerHTML=" "
: 기존 값을 변경하여 출력하고 싶은 경우
예를 들어 HTML로 [홍길동]이라는 콘텐츠를 화면에 출력하였다.
이 HTML 요소에 접근하여 [홍길동]을 [이순신]으로 바꿔 출력하게 만들려면 이 속성을 사용해야 한다. 그리고 HTML 요소에 접근하려면 document.getElementById 메서드를 함께 사용한다. -
변수 선언
(1) var (function scope)
-한 변수에 다른 타입의 값을 여러 번 대입할 수 있지만,
한번 선언된 변수를 재선언할 수는 없습니다.
함수 유효범위
함수 유효범위는 어떤 함수 안에서 선언된 모든 변수는 그 함수 전체에 걸쳐 유효하다는 의미다. 이는 변수가 미처 선언되기 전에도 유효하다는 뜻이기도 하다.
Hoisting
JS 코드는 함수 안에 있는 모든 변수를 함수 맨 꼭대기로 끌어올린 것처럼 동작
var scope = “global”;
function f() {
console.log(scope); //"undefined"를 출력한다.(global이 아니다)
var scope = “local”;
console.log(scope); //"local"을 출력한다.
}
=> 실제로 실행되는 코드는 이렇다.
function f() {
var scope; //끌어올림(hoisting)이라고 한다.(대신, 정의만 끌어올려진다)
console.log(scope); // "undefined"가 저장되어 있다.
scope = "local"; // 초기화는 끌어올려지지 않는다.
console.log(scope);
}(2) let (block scope)
블록 유효 범위
변수가 선언된 블록, 구문 또는 표현식 내에서만 유효한 변수를 선언
이는 var 키워드가 블록 범위를 무시하고 전역 변수나 함수 지역 변수로 선언되는 것과는 다름
프로그램이나 함수의 최상위에서는 let과 var는 서로 다르게 행동한다.
var ) 전역 객체의 프로퍼티를 생성,
let ) 전역 객체의 속성 값을 생성하지 않음
hoisting되지 않습니다.
변수가 초기화(선언)되기 전에 참초할 경우 ReferenceError 발생
(3) const (block scope)
블록 범위의 상수 선언 (let과 같은 블록 유효범위)
상수의 값은 재할당할 수 없으며 다시 선언할 수도 없음
함수 hoisting
함수에서는 단지 함수 선언만 상단으로 끌어올려짐
전역변수
사실 global 객체의 속성(property)
웹 페이지에서 global 객체는 window이므로,
windows.variable 구문을 통해 전역 변수를 설정하고 접근할 수 있음
전역 변수를 선언하는 것은 전역 객테의 프로퍼티를 정의하는 것
JS 전역 변수는 전역 객체의 프로퍼티이고,
지역 변수는 규정된 것은 없지만,
변수를 각 함수 호출 (또는 블록)과 연관된 객체의 프로퍼티로 생각해도 됨(선언적 환경 기록)
JS는 this 키워드로 전역 객체를 참조할 수 있음
전역변수는 프로그램 전체에 걸쳐 유효하다
지역변수는 변수가 선언된 함수 전체(또는 블록)에 걸쳐 유효함
(그 안에 중첩된 함수 내에서도 유효함)
유효범위 체인
JS의 모든 코드 무더기는 그것과 연관된 유효범위 체인을 가지고 있음
이 유효범위 체인은 해당 코드 무더기의 '범위 안'에 있는 변수를 정의하는 객체의 체인=리스트
함수(또는 블록)가 정의될 때, 함수는 유효범위 체인을 저장함
함수가 호출될 때, 해당 함수의 지역 변수를 저장하기 위해 새로운 객체를 하나 생성하고,
해당 객체에 저장된 유효범위 체인에 추가
변수 해석
변수 x의 값을 얻어야 할 때, 처음 유효범위 체인에 있는 객체에서 x를 찾기 시작한다. 만약 이 객체가 x 프로퍼티를 가지고 있다면, 그대로 사용하고, 없다면, 유효범위 체인에 있는 다음 객체에서 x 프로퍼티를 찾는다.
두 번째 객체가 x 프로퍼티를 가지고 있지 않다면, 또 다음 객체에서 찾는다. 찾을 때까지 이런 식으로 체인을 탐색한다. 만약 x가 유효범위 체인 안에 있는 객체의 프로퍼티가 아니라면, x는 유효범위 안에 없기 때문에 ReferenceError가 발생한다.
개발자 도구
크롬 개발자 도구의 Sources탭에서 중단점을 설정하고, 로드하면, 오른쪽 하단 Scope 창에서 유효범위를 알아볼 수 있다.
4-1) 추가 설명
(1) var
-변수를 선언하거나 또는 변수 선언과 동시에 값을 저장할 수 있음
-블록 범위에서 사용이 가능한 변수 선언
e.x.) 함수에서 선언되었다면 함수 전체에서 사용이 가능한 범위를 말함
(2) let
-let 선언된 구역에서만 사용할 수 있는 변수 선언
-선언된 블록 범위에서 같은 변수 이름으로 선언하면 에러 발생
(3) const
-한번 값이 저장되면 값을 변경할 수 없는 변수 선언
-선언할 때 초기값을 지정해주어야 함
(4) 추가
-변수를 선언해주지 않으면 자동으로 var로 선언됨
(5) hoistiong (=변수 끌어올림)
-변수 선언이 어느 위치에 있든 맨 처음에 선언
-따라서 변수를 선언하지 않았다면 에러가 나지 않고 undefined가 출력됨
-다만 let, const 선언자는 호이스팅이 되지만
undefined로 초기화되지 않아 미리 변수를 사용하면 에러 발생
console.log(letTest); // -> Reference Error
let letTest = 1;
console.log(constTest); // -> Refernece Error
const constTest = 1;(6) 변수 중복 선언과 유효 범위
-var 선언자
=> 같은 이름으로 변수를 선언하면 마지막으로 지정된 값 저장
-let, const 선언자
=> 중복 불가능
블록 유효 범위 =블록은 {} 지칭-var로 선언된 변수는 블록 범위를 가지지 않음
따라서 var 변수는 함수 내부가 아닌 이사 어디든 사용 가능
+참고 링크
https://medium.com/@wainy254/%EB%B3%80%EC%88%98-%EC%84%A0%EC%96%B8-c696c3b9e787
