📕 변수와 상수
자바스크립트는 사용자나 서버로부터 입력받는 정보를 처리하는 방식으로 동작해 사용자의 정보나 메시지의 정보를 저장하는 변수가 필요하다.
📖 변수
- 데이터를 저장할 때 쓰이는 이름이 붙은 저장소이다. 상품이나 방문객등의 정보를 저장할 때 변수를 사용한다.
let이란 키워드를 사용해 변수를 생성할 수 있다.
📒 변수 선언 & 사용 방법
-
let이란 키워드를 사용해 변수를 선언한다. -
할당 연산자
=를 사용해 변수에 데이터를 저장할 수 있다.
//하나씩 선언하고 저장하기
let messge1;
messge1 = "Hello"- 선언과 데이터 저장을 한번에 할 수 있다.
//선언과 동시에 저장하기
let message2 = 'Hello!'- 변수를 한번에 여러개 선언할 수 있다.
가독성이 좋지 않기 때문에 추천하지는 않는다.
//여려변수 한번에 저장하고 선언하기
let n1="서경",n2 = "서현", n3 ="서아";
//이렇게도 쓸 수 있고
let user = 'John',
age = 25,
message = 'Hello';
//이렇게도 쓸 수 있음
let user = 'John'
, age = 25
, message = 'Hello';✍️ 활용코드
let messge;
messge = "Hello";
alert(messge);👉 실행화면
📒 변수 사용방법
당연히 변수이기 때문에 값 변경이 가능하다. (상수는 불가능함)
⚠️ 변수를 두 번 선언하면 에러가 난다.
📒 변수명
- 변수명에는 문자와 숫자, $와 _만 가능하다.
- 숫자로는 시작할 수 없다.
- 예약어는 사용할 수 없다.
- 대소문자를 구별한다. (
apple와AppLE은 서로 다른 변수다.) - 카멜표기법을 권장한다. ex)
userName
➕ 변수이름을 짓는 좋은 습관
변수명은 변수의 값의 특징을 설명하는 단어로 만든다.
예를 들어, 우리가 살고 있는 행성의 이름은 planet보다는 ourPlanetName이 적절하다.
현재 접속중인 사용자의 이름은 user보다는 currentUserName이 적절하다.
📖 상수
바꿀 수 없는 저장소로 const를 사용해 선언한다.
상수를 변경하려고 하면 에러가 발생한다.
const myBirthday = '12.27.1999';📒 상수명
코드 실행전에 이미 값을 알고 있는 상수의 경우 대문자와 밑줄_로 이름을 작성한다.
하지만 값을 모르는 상태인 상수는 일반적인 변수이름짓기 규칙을 사용한다.
🔍 대문자 상수와 일반문자 상수가 어떤 의미를 가질지 생각해보자.
👉 대문자 상수는 하드코딩한 값의 별칭에 적절하다.
📖 변수를 선언하는 또 다른 키워드 var
⚠️ var은 예전에 쓰이던 변수 선언 키워드이다. 따라서 오래전에 작성된 스크립트를 읽는데 필요하지, 새로운 코드를 작성할 때는 쓰지 않는다.
대부분의 경우에 let와var를 서로 바꿔도 큰 문제 없이 동작하지만, 동작 방식이 다르기 때문에 에러가 발생할 수 있다.
따라서 var의 특징을 알고 있어야한다.
📒 var은 블록 스코프가 없다.
➕ 함수 스코프
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다.
즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.➕ 블록 스코프
모든 코드 블록내에서 선언된 변수는 코드 블록 내에서만 유효하며
코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다.var
- 블록 스코프가 없고, 함수 스코프이거나 전역스코프이기 때문에 블록 밖에서도 선언이 가능하다. if문이나 for문의 코드 블록을 관통한다.
또한 함수내에서var을 이용해 변수를 선언했다면 함수레벨 스코프가 된다.
let
- 블록스코프가 존재하기 때문에 블록안에서 선언된 변수는 블록내에서만 선언이 가능하다.
✍️ var의 전역변수 예시코드
if (true) {
var test = true; // 'let' 대신 'var'를 사용했습니다.
}
alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)✍️ var의 함수 스코프 예시코드
function sayHi() {
if (true) {
var phrase = "Hello";
}
alert(phrase); // 제대로 출력됩니다.
}
sayHi();
alert(phrase); // Error: phrase is not defined✍️let의 블록스코프 예시코드
if (true) {
let test = true; // 'let'으로 변수를 선언함
}
alert(test); // Error: test is not defined
//이 경우에는 블록 외부에서 선언했기 때문에 변수 접근이 가능하다.
let phrase
if (true) {
phrase = "Hello";
}
alert(phrase); // 제대로 출력됩니다.📒 var은 변수 중복 선언을 허용한다.
let
- 한 스코프에서 같은 변수를
let으로 두 번 선언하면 에러가 발생한다.
let user;
let user; // SyntaxError: 'user' has already been declaredvar
- 같은 변수를 여러 번 중복으로 선언해도 에러가 나지 않지만 두번째 선언에서는 var이 무시된다.
var user = "Pete";
var user = "John"; // 이 "var 아무 역할을 수행하지 않음.
// ...에러 또한 발생하지 않습니다.
alert(user); // John으로 출력된다. 📒 var은 시작되는 시점에서 선언한다.
var 이 전역공간에서 선언된 경우 : 스크립트가 시작되는 시점에서 선언을 처리한다.
var 이 함수에서 선언된 경우 : 함수가 시작되는 시점에서 처리된다.
⚠️ 데이터 할당은 이루어지지 않고 문장 순서가 왔을 때 일어난다.
➕ var를 블록레벨 스코프로 만드는 방법:IIEE
(function() {
alert("함수를 괄호로 둘러싸기");
})();
(function() {
alert("전체를 괄호로 둘러싸기");
}());
!function() {
alert("표현식 앞에 비트 NOT 연산자 붙이기");
}();
+function() {
alert("표현식 앞에 단항 덧셈 연산자 붙이기");
}();🔥오늘의 느낀 점🔥
좋은 변수명을 사용하는 것이 중요하다고 느껴진다.