→ 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것이다.
→ 변수 선언에 의해 확보된 메모리 공간은 릴리즈되기 전까지는 누구도 확보된 메모리 공간을 사용할 수 없도록 보호되므로 안전하게 사용할 수 있다.
자바스크립트에서 변수 선언하기
변수를 선언할 때는 let, const, var 키워드 중 하나를 사용한다
// let을 사용한 변수 선언
let myVariable = 'Hello';
console.log(myVariable); // 출력: Hello
// const를 사용한 변수 선언
const myConstant = 123;
console.log(myConstant); // 출력: 123
// var를 사용한 변수 선언
var myVar = true;
console.log(myVar); // 출력: true
let은 값을 변경할 수 있는 변수를 생성할 때 사용한다. const는 값을 변경할 수 없는 상수를 생성할 때 사용한니다. var는 ES6 이전에 사용하던 변수 선언 방식으로, 현재는 let과 비슷한 용도로 사용된다.
💡 Es5 vs Es6- var 키워드는 여러 단점이 있다. var 키워드의 여러 단점 중에서 가장 대표적인 것이 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다는 것이다. 이로 인해 의도치 않게 전역 변수가 선언되어 심각한 부작용이 발생하기도 한다
Es6 에서 let 과 const 키워드를 도입한 이유 : var키워드의 여러 단점을 보완하기 위해서이다. 따라서 let과 const 키워드가 도입된 이유를 정확히 파악하려면 var 키워드의 단점부터 이해해야 한다.
→ 스코프와 같은 자바스크립트의 핵심 개념을 먼저 살펴봐야 함
다음 코드를 살펴보자. Var 키워드는 뒤에 오는 변수 이름으로 새로운 변수를 선언할 것을 지시하는 키워드이다
var score;
💡 키워드는 자바스크립트 코드를 해석하고 실행하는 자바스크립트 엔진이 수행할 동작을 규정한 일종의 명령어이다. 자바스크립트 엔진은 키워드를 만나면 자신이 수행해야 할 약속된 동작을 수행한다. 예를 들어, Var 키워드를 만나면 자바스크립트 엔진은 뒤에 오는 변수 이름으로 새로운 변수를 선언한다
변수를 선언한 이후, 아직 변수에 값을 할당하지 않았다
→ 변수 선언에 확보된 메모리 공간은 비어 있을 것으로 생각하나 확보된 메모리 공간에는 자바스크립트 엔진에 의해 Undefinedf라는 값이 암묵적으로 할당되어 초기화된다
💡 undefined : 자바스크립트에서 제공하는 원시 타입의 값이다. 변수를 선언하면 해당 변수에 값이 할당되기 전까지는 undefined로 초기화된다. undefined는 변수가 생성되었지만 값이 할당되지 않은 상태를 나타내며, null과는 다른 개념이다.
초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 Undefined를 할당해 초기화한다
💡 변수 이름은 어디에 등록되는가? 변수 이름을 비롯한 모든 식별자는 실행 컨텍스트에 등록된다. 실행 컨텍스트는 자바스크립트 엔진이 소스코드를 평가하고 실행하기 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 영역이다. 자바스크립트 엔진은 실행 컨텍스트를 통해 식별자와 스코프를 관리한다. 변수 이름과 변수 값은 실행 컨텍스트 내 키값형식인 객체로 등록되어 관리된다. 자바스크립트 엔진이 변수를 관리하는 메커니즘은 추후에 자세히 살펴볼 것이다. 지금은 단순이 자바스크립트 엔진이 변수를 관리할 수 있도록 변수의 존재를 알린다는 정도만 알아두자
var score; 는 선언 단계를 통해 변수 이름 score를 등록하고, 초기화 단계를 통해 score 변수에 암묵적으로 undefined를 할당해 초기화한다.
초기화란?
→ 변수가 선언된 이후 최초로 값을 할당하는 것
→ var 키워드로 선언한 변수는 Undefined라는 값으로 자동 초기화가 진행된다.
→ var키워드로 선언한 변수는 어떠한 값도 할당하지 않아도 undifined라는 값을 갖는다
if 초기화 단계를 거치지 않으면 확보된 메모리 공간에는 이전에 다른 애플리케이션이 사용했던 값이 남아있을 수 있다. 이러한 값을 쓰레기 값(garbage value : 가베지 밸류) 라고 한다. 따라서 메모리 공간을 확부한 다음, 값을 할당하지 않은 상태에서 곧바로 변수 값을 참조하면 쓰레기 값이 나올 수 있다.
→ Var 키워드는 암묵적으로 초기화를 수행하므로 이러한 위험으로부터 안전하다
변수를 사용하려면 반드시 선언이 필요하다.
→ 만약 선언하지 않은 식별자에 접근하면 ReferenceError가 발생한다.
→ ReferenceError는 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을 때 발생하는 에러이다
<meta charset="UTF-8">
<title>Home</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="main-background">
<h4 class="main-title">
Our lifes<br>
are<br>
beautiful
</h4>
<P class="main-content"> everyday with you must be beatiful <br> the world's not perfect but it's not that bad <br>
if we got each other that's all we have<br> i'll be your lover and i'll hold your hand <br> you should know i'll be there for you </P>
<a href="https://insidepixce.tistory.com" class="tstory">do anything</a>
<image src="source/kitchyroom.png" class="sub-image"></image>
</div>
</div>
</body>
</html>
투명도 조절도 같이 해주었다. 원래 다른 분들은 rgba 를 사용 많이 하시던데 나는 opacity 를 사용했다. oppacity 같은 경우에는 자식 태그에까지 전부 상속되는 태그라 전체가 다 투명해질수도 있는데 나는 이 div박스 하나만 투명하게 하면 되는거라서 괜찮았다.
<html>
<head>
<meta charset="UTF-8">
<title>Home</title>
<link href="css/main.css" rel="stylesheet">
</head>
<body>
<div class="main-background">
<h4 class="main-title">
Our lifes<br>
are<br>
beautiful
</h4>
<P class="main-content"> everyday with you must be beatiful <br> the world's not perfect but it's not that bad <br>
if we got each other that's all we have<br> i'll be your lover and i'll hold your hand <br> you should know i'll be there for you </P>
<a href="https://insidepixce.tistory.com" class="tstory">do anything</a>
<img src="source/kitchyroom.png" class="sub-image"></image>
<div class="brightning"> </div>
<div class="explain-box">
</div>
</div>
</div>
</body>
</html>
