Javascript 변수, 상수 (공부

개발/Javascript

Javascript 변수, 상수 (공부_6)

kobeay 2024. 7. 31. 00:04

이번 시간에는 자바스크립트의 변수, 상수 선언 방법과 ES6 이전, 이후 문법에 대해 간단하게 공부를 했다.

그리고 스코프, 식별자 이름, 네이밍 규칙, 호이스팅, Strcit Mode에 대해 공부했다.

변수

let 이라는 예약어 (또는 키워드)로 변수 선언
예약어 : 프로그래밍 문법으로 사용하고 있는 키워드
let 키워드는 ES6에서 나왔고 ES6 이전에는 var 키워드만 사용

let teacher = '코비';
console.log(teacher);
teacher = '홍길동';
console.log(teacher);
// 변수값을 변경할 수 있고 똑같은 이름의 변수 선언 불가능

상수

const를 사용하여 상수 선언
한 번 할당한 값을 바꿀 수 없음
let 키워드와 똑같이 ES6에 새로 생김

const username = '홍길동';
console.log(username);

※ 팁 ※

---> 자바스크립트 프로그래밍시 성능에서 이점을 얻기 위해 let보다는 const를 사용하면 좋음

(단, 값이 바뀔 수 있는 경우에는 let 쓸 것!)

ES

ECMAScript의 약자
브라우저에서 동작하는 자바스크립트라는 언어를 만들 때 변수는 어떻게 선언하고 함수는 어떻게 선언하는지 브라우저에서 동작하는 자바스크립트 문법을 표준화하기 위해 만들어짐
ES6 이전에는 var 키워드를 사용했고 이후에는 let, const를 사용함

스코프 (Scope)

변수나 함수를 사용할 수 있는 영역

전역 스코프

자바스크립트 최상단에 선언한 변수의 영역
전역 스코프에 선언된 변수를 전역 변수라고 함

// 전역 스코프
let name = '홍길동';	// 전역 변수
let age = 45;	// 전역 변수

function printPerson() {
	console.log('name: ${name}, age: ${age}');
}

블록 스코프

블록 {} 으로 묶인 영역
블록 안에 선언된 변수는 블록 안에서만 접근 가능

{
  let a = '변수';
  console.log(a);
  {
    // 블록 안에 블록을 쓸 수 있음
    let c = 'c변수';
    let a = '변수2'; // 블록 안에서 다른 변수값으로 변경 가능
    console.log(c);
    console.log(a);
  }
}

식별자 이름

변수와 상수, 함수 이름을 식별자라고 부름
식별자는 반드시 글자나 달러 기호($), 밑줄(_)로 시작
예약어 사용 불가능

let 2number = 2;	// X - 식별자 맨 앞에 숫자가 올 수 없음
let $number = 2;	// O
let _number = 2;	// O
let number2 = 2;	// O

★ 중요 ★

---> 식별자 이름을 지을 때 의미 있는 이름을 명사로 짓기!!

네이밍 규칙

카멜 케이스 (Camel Case)
currentTempC, anldentifierName 등과 같이 중간중간 대문자가 있는 형식, 낙타의 혹처럼 보이는 것
스네이크 케이스 (Snake Case)
current_temp_c, an_identifier_name 등과 같은 것, 카멜 케이스보다 조금 덜 쓰임
케밥 케이스 (Kebab Case)
current-temp-c, an-identifier-name
파스칼 케이스 (Pascal Case)
CurrentTempC, AnIdentifierName

호이스팅 (hoisting)

브라우저에서 자바스크립트 코드가 실행되기 전에 변수나 함수의 선언이 파일의 최상단으로 끌어 올려짐
var, function을 쓸 경우 호이스팅 발생

console.log(sum(1, 2));
function sum(num1, num2) {
  return num1 + num2;
}
// 호이스팅에 의해 값이 3이 출력 됨

Strict Mode

암시적 전역 변수와 묵인했던 여러 가지 이상한 문법을 허용하지 않음

'use strict'; // strict를 사용해서 이상한 문법을 막음
number = 2; // 자바스크립트에서는 이렇게 선언하고 쓸 수 있음 (= 잘못된 방법)
console.log(nubmer);

정리

변수를 선언할 때 let 키워드 사용
상수를 선언할 때 const 키워드 사용
변수나 함수를 쓸 수 있는 영역을 스코프라 하고 전역 스코프, 블록 스코프 두 가지가 있음
var, function을 쓸 경우 호이스팅이 발생됨
Strict Mode를 사용해서 이상한 문법을 막을 수 있음