- 글에 적은 내용 중 잘못된 부분은 댓글로 적어주시면 감사하겠습니다!
🔜 동적 타이핑 언어
자바스크립트는 동적 타이핑 언어다. 자바나 C언어와 달리 엄격하게 변수의 타입을 정하고 컴파일 되는 것이 아니라, 변수라는 것만 지정해두고 인터프리터가 해석할 때 타입이 결정된다!
이런 이유 때문에 위와 같이 정수로 선언했다고 생각한 변수가 유리수가 될 수도 있는 것이다. 숫자 타입의 Number뿐 아니라 문자열 타입의 String으로도 변환이 가능하니, 정신 못차리면 변수의 타입이 훅훅 바뀌는 것을 볼 수 있다.
🧐 자바스크립트의 변수
자바스크립트에서 변수도 다른 프로그래밍 언어와 마찬가지로 메모리에 있는 값을 가리키는 주소의 이름이다. 위에 나온 것처럼 a라는 변수에 10이라는 숫자 값을 넣고, b라는 변수에 '안녕'이라는 문자열 값을 넣으면 알아서 주소를 할당해준다.
자바스크립트는 C언어처럼 포인터로 이 주소값을 직접 제어할 수 없다. 그렇기 때문에 한 번 정의된 변수의 주소값은 프로그램이 종료될 때까지 계속 유지된다고 보면 된다.
1. 변수 선언
변수를 선언하는 방법은 크게 세 가지가 있는데, 각각 var, let, const이다. 기존에는 주로 var을 사용하다가 ECMAScript6에 와서 let과 const가 추가되었다. 세 가지 선언 방법 모두 타입을 따로 명시하지 않기 때문에, 인터프리터가 해석할 때 데이터 타입이 결정된다.
1) var
// 변수 선언
var test1;
console.log(test1); // undefined 출력
// 변수 선언 및 할당
test1 = 'Hello';
var int1 = 1;
var double1 = 2.5;
var char1 = 'c';
var string1 = 'Hi';
// 연산식에 대입
console.log(test1); // Hello 출력
console.log(int1 + double1); // 3.5 출력
console.log(char1 + string1); // cHi 출력var 뒤에 이름을 지정하면 var타입 변수명이 된다.
변수명만 선언하고 값 할당은 나중에 해도 되는데, 할당을 따로 하지 않으면 undefined 타입으로 된다. 상수와 변수 따로 구분하지 않기 때문에 한 편으로는 개발자가 맘대로 지정할 수 있어 편하지만 무턱대고 사용했다간 스크립트가 뒤죽박죽 꼬일수도 있다. 다른 변수와 어떤 차이가 있는지는 뒤에 다시 설명한다.
2) let
// 변수 선언
let test1;
console.log(test1); // undefined 출력
// 변수 선언 및 할당
test1 = 'Hello';
let int1 = 1;
let double1 = 2.5;
let char1 = 'c';
let string1 = 'Hi';
// 값 변경
int1 = 10;
char1 = 'd';
// 연산식에 대입
console.log(test1); // Hello 출력
console.log(int1 + double1); // 12.5 출력
console.log(char1 + string1); // dHi 출력var가 사용 방법은 동일하다. 값 변경 부분은 var에서도 똑같이 적용된다.
3) const
// 변수 선언
const test1; // 문법 에러!
// 변수 선언 및 할당
const int1 = 1;
const double1 = 2.5;
const char1 = 'c';
const string1 = 'Hi';
// 연산식에 대입
console.log(int1 + double1); // 3.5 출력
console.log(char1 + string1); // cHi 출력
// 값 변경 불가
int1 = 10; // 문법 에러!
char1 = 'd'; // 문법 에러!C언에서 봤던 그 const와 동일하다. 상수를 선언함으로써 할당 이후로 값을 변경하지 못하게 한다. var, let과 다르게 처음부터 값을 바로 할당하는 초기화 작업이 필요하다.
2. VAR vs LET, CONST
값을 변경할 수 없는 const빼고 var과 let은 비슷해 보이는데 왜 따로 사용하는걸까? 앞서 얘기했듯이 let과 const는 ES6(2015년)부터 지원이됐다. 그 말은 이전에 쓰던 var에서 문제점과 불편함이 때문이다.
1) 상수의 부재
var은 let처럼 값을 재할당 할 수도 있지만, const처럼 상수로 만들 수 없다. 때로는 특정 값이 변하지 않는 상수가 필요한데, 이를 위해서 상수로 변수 선언이 필요했다.
2) 스코프
자바스크립트에서 스코프란 접근할 수 있는 범위를 의미한다. 나중에 다시 다룰건데, 쉽게 말하면 변수와 멀리 떨어진 곳에서도 var 변수를 사용할 수 있었다.
var은 함수 스코프나 전역 스코프를 갖는 반면 let과 const는 블록 스코프를 갖는다.
// var과 let의 스코프 차이
if (true) {
var test1 = true;
let test2 = true;
}
console.log(test1); // true 출력. if문 내에 선언한 변수임에도 if문 밖에서 접근 가능
console.log(test2); // 에러! 변수 접근 불가3) 호이스팅
이것도 나중에 다룰 주제인데, 자바스크립트는 다른 프로그래밍 언어와 달리 호이스팅을 지원한다. 호이스팅은 프로그램을 실행하기 전 변수나 함수 코드를 최상위단으로 끌고와서 사용할 수 있게 메모리에 저장하는 것이다.
호이스팅의 장점도 있지만, 단점은 사용되지 말아야 할 위치에서 변수나 함수 호이스팅으로 사용된 경우가 발생할 수 있다.
// 호이스팅 출력
console.log(test1); // true 출력
console.log(test2); // 에러! const는 호이스팅 안됨
var test1 = true;
const test2 = true;🔚 주석과 줄바꿈
주석과 줄바꿈을 끝으로 오늘 내용을 정리한다. 주석과 줄바꿈은 다행히도 다른 언어와 매우 유사하다. 주석으로 묶어두면 IDE(통합 개발 환경)에 따라 함수나 변수위에 마우스 포인터를 올려놓았을 때 정보가 뜨기도 한다.
1. 주석
// 이게 주석입니다
// 꼭 슬래쉬(/)를 두 번 입력해야 합니다
/*
이건 전체 주석처리입니다.
여러 줄을 주석처리 할 때 용이합니다.
*/주석을 이용해서 변수나 함수에 용도 혹은 기능을 자주 입력하는 습관을 갖자!
2. 줄바꿈
자바스크립트에서 줄바꿈은 해당 문장의 명렁을 실행하라는 의미다. 즉 줄바꿈이 없으면 기계는 어느 부분이 명령어이고, 변수인지 구분할 수 없다.
그리고 보통 소스 코드를 작성할 때 마지막에 세미콜론(;)을 넣는데, 이 세미콜론은 기계가 해석할 때 줄바꿈으로 인식한다. 줄바꿈만 하고 세미콜론을 넣지 않아도 정상 인식은 되나, 가급적 문법의 통일을 위해 세미콜론을 붙여주자[1]
// 줄바꿈없이 연달아 입력할 경우
let a = 1let b = 2 // 문법 에러!
// 줄바꿈 시 정상인식
let a = 1
let b = 1
// 줄바꿈하지 않고 세미콜론을 삽입해도 정상인식
let c = 1; let d = 2;& 자바스크립트 참고 강의 링크
주석
[1] : 이 부분은 아직 논란이 있다. 세미콜론을 안 붙이는게 트렌드인지, 그대로 붙여서 사용하는게 트렌드인지는 두고봐야 한다.
