JavaScript란? JS의 기본 사용법. var,let,const 차이점은?

우진·2023년 5월 1일
1

JavaScript

목록 보기
1/2
post-thumbnail

JavaScript는 JAVA와 전혀 다른 언어다. 이름이 같다고 같은 언어라고 헷갈리지 말자.
줄여서 JS라고 부른다.
JS는 JAVA에서와는 다르게 자료형을 따로 선언해줄 필요가 없다.

var / let / const 이렇게 3개를 쓰는데

var는 요즘 안 쓴다. 이유는 아래에 써놓았다.

var 는 let과 비슷하지만 전역 범위 또는 함수 범위이다. (아래에서 자세히 설명함.)
let 은 값이 변경 가능하다.
const 는 값이 변경될 수 없다. (상수)

1. var

var: 예상하는 값의 범위를 넘어갈 우려가 있음. 추후에 아주 큰 오류가 발생할 가능성이 있기 때문에 쓰지 않는다.

console.log(b); // 변수를 선언 전에 미리 출력하면?
var b = 10;
console.log(b);

var b = 100;
console.log(b);

{
var c = 10000;
}

console.log(c);

// let으로 하면 콘솔에 1,2,3,4 만 나온다

for(let i = 0; i<5; i++){
console.log(i);
}
console.log(i);

for문에서의 문제점


// var 로 하면 콘솔에 1,2,3,4,5 까지 나온다.
for(var i = 0; i<5; i++){
console.log(i);
}
console.log(i);

// let으로 하면 콘솔에 1,2,3,4 만 나온다(정상)
// var 로 하면 콘솔에 1,2,3,4,5 까지 나온다.(비정상)
이런 게 가능한 이유는 for문이 종료된 후에도 접근이 가능하기 때문이다.
즉, for 문 안에서 지역 변수로 쓰고 사라지는 게 아니라 for문에서 선언되었다고 하더라도 전역변수로 생성되어서 그 값이 남게 되는 것이다. 그래서 for문을 탈출하고 나서도 값이 남게 된다.

하지만

function test(){
	var a = 1; // 함수 안에서는 지역변수로 작용.
}

console.log(a); // 실행 안 됨.

이럴 경우는 지역변수로 선언된다.
함수가 아닌 다른 지역에서는 전역 변수로 등록이 되는 걸까?

이런 차이점들이 있다. 그래서 var는 잘 사용하지 않는다.

2. let

let은 값이 변경이 가능하다. 자료형 타입은 자동으로 맞춰준다.

3. const (상수)

constant는 사전적의미로 '상수' 를 의미한다.
const는 Immutable(불변)이라는 특성이 있다.

호이스팅 혹은 호스팅 이라고 부른다.(면접에서 많이 나오니 기억 해놓을 것)
호이스팅이란 var 로 선언된 변수들을 미리 메모리 공간에 올린다. java에서는 static 과 비슷한 것 같다.

조금 더 쉽게 표현하자면

var로 선언된 변수는 블록 스코프를 가지지 않는다.
따라서 for문에서 변수를 선언하더라도 변수가 전역으로 끌어올려지는(hoisting) 현상이 일어난다.
for 문의 변수는 실제로는 함수의 최상위 레벨에 선언된 것으로 간주되며, for문이 종료된 후에도 전역 변수로서 접근할 수 있다.

하지만 let은?

let키워드로 선언된 변수는 블록스코프를 가지며, 변수의 유효 범위는 변수가 선언된 블록 내로 제한된다.
따라서 let으로 선언된 변수는 for 문의 블록 내에서만 유효하며, for문이 종료되면 변수는 사라지므로 외부에서 접근할 수 없다. 이는 더욱 예측 가능하고 안전한 변수의 사용을 가능하게 한다.

함수 스코프와 블록 스코프의 차이로 인해 var와 let의 동작이 달라지게 되는 것이다.
var는 함수 스코프의 변수로서 함수 내에서 선언된 변수는 함수 전체에서 유효하며,
let은 블록 스코프 변수로서 블록 내에서 선언된 변수는 해당 블록 내에서만 유효하다.
이러한 스코프 규칙을 이해하고 변수를 적절하게 사용하면 의도치 않은 동작이 발생하는 상황을 방지할 수 있다.

console.log(b);
var b = 10;
console.log(b);

이렇게 작성할 경우 undefined 가 나온다. 이것이 호이스팅.
기존 자바에서는 변수 선언 전에 미리 출력을 해버리면 오류가 났는데 자바스크립트에서는 다르다.

undefined 란 변수는 있는데 초기화하지 않았다 라는 의미다.

콘솔창에 뜨는 내용에는 아래의 내용들이 있다.

undefined: 해당 변수가 비어있는 상태를 의미함.
null: 값 자체가 없다는 의미가 아니라, 값이긴 한데 어떠한 유효값도 아니라는 것을 의미함.
NaN(Not a Number): number 타입이며, '숫자가 아님'을 의미한다.
Infinity: number 타입이며, '무한대'를 의미하는 숫자.

var의 문제점
1. 호이스팅 / 호스팅
2. 중복 선언이 가능하고 초기화가 가능하다는 점.
3. 범위 구별이 없다. (전역변수와 지역변수의 구별이 없다는 뜻)

전역변수: 프로그램 전체에서 사용이 가능한 변수.

지역변수: {} 안에 선언된 것.
지역변수를 사용하기 위해선 지역변수가 선언되어 있는 구현부{} 안에서만 사용할 수 있다.

*{} 안의 내용들을 구현부라고 한다.

자바 스크립트에서는 정수와 실수를 구분하지 않는다.
숫자 = number
문자 = String

배열

배열은 모든 자료형들을 한 번에 다 집어넣을 수는 있지만, 가독성과 유지보수성을 위해 하나의 타입만 넣는 것이 국룰이다.

지갑으로 예를 들면 지갑의 용도는 계산을 하기 위한 화폐를 넣어서 가지고 다니는 용도다.
따라서 지폐랑 동전 카드 같은 것들만 있어야 하는데 연관이 없는 색종이나 다른 나라의 화폐가 들어있다면 계산할 때 우리 나라의 화폐를 찾느라 시간이 쓸데없이 소요될 것이다. 그러므로 용도가 정해진 곳에는 그에 맞는 내용물을 넣어 두는 게 효율적이다.

profile
지니입니다

2개의 댓글

comment-user-thumbnail
2023년 6월 24일

요즘에 자바스크립트 하면서 다시보는데 내용이 완전 알차네용 잘보고갑니당!

1개의 답글