오늘은 자바스크립트의 완전 기초 중의 기초, 기본 문법을 공부해본다. 지금 리액트를 하면서 무슨 자바스크립트 기초 중의 기초를 쓰는거지? 생각할 수도 있겠지만, 공부를 하면 할수록 자바스크립트 기초 지식을 탄탄하게 쌓아둬야 한다는 것을 느끼고 있다. 그리고 일단 머릿속에만 있는 것을 글로 정리해보는 것도 중요한 것 같다. 글로 정리하면 머릿속에 있는 지식이 더 선명해지니까! 계속 많은 것들을 정리해나갈 예정이다.
Syntax Basic 1: "변수"와 "값"
변수
변수는 값이 '저장'되는 곳으로, 값이 저장된 메모리 공간의 주소를 나타내는 식별자이다.
전에는 쉽게 지나쳐 버렸는데, 짧지만 굉장히 중요한 문장이었다. '저장된다는 것'은 메모리에 데이터가 담긴다는 뜻이다. 그러니까 한번 쓰고 말 값이 아니라 여러번 자주 사용하는 값을 변수로 지정해야 한다는 뜻이다. 예전에 완전 갓 코딩에 입문했을 때 잘 몰라서 그냥 좀만 변수로 만들 수 있는 것이 있으면 다 변수로 만들었던 기억이 난다 ㅎㅎ
let lemon = "🍋"lemon이라는 식별자 이름을 가진 메모리에 값 🍋이 저장되었다!
프로그래밍에서 '값'은 조작될 수 있는 대상으로 정의된다.
- 변수나 상수 개념은 여기서 다루지 않는다. 여긴 기초용어정리를 하기 위한 포스트!
Syntax Basic 2: "리터럴"
모두들 자바스크립트의 데이터 타입에 대해서는 잘 알고 있을 것 같다. 데이터 타입은 프로그래밍 언어에서 사용할 수 있는 값의 종류이다. 그런데, 위에서 말했듯이 값은 조작될 수 있는 대상이다. 그리고 이를 리터럴 표기법을 통해 다양한 타입으로 생성할 수 있다.
그러니까 원하는 데이터 타입의 값을 생성하려면 리터럴 표기법을 이용하면 되는 것이다.
리터럴(literal)
소스코드 안에서 직접 만들어 낸 상수 값 자체를 말하며 값을 구성하는 최소 단위
//만약 숫자 타입의 값을 얻고 싶다면, 아래와 같은 숫자 리터럴을
1
1000
1000000
//문자열 타입의 값을 얻고 싶다면
'Hello World'
'JavaScript'
//불리언 타입의 값을 얻고 싶다면,
true
false
//null 타입의 값을 얻고 싶다면,
null
//undefined 타입의 값을 얻고 싶다면,
undefined
//객체 타입의 값을 얻고 싶다면,
{name: 'Ellie', gender: 'female'}
//배열 타입의 값을 얻고 싶다면,
[orange, apple, banana]
//또한 추가로, 데이터 타입값 이외에도 정규표현식이나 함수리터럴도 있다. Syntax Basic 3: "연산자"
산술, 할당, 비교, 논리, 타입 연산등을 수행해 하나의 값을 만든다.
- 산술 연산자
*+-/%(나머지 연산자)**(거듭제곱) - 문자열 연결 연산자
'My name is ' + 'ellie';- ES2015 이후부터는 템플릿 리터럴을 더 많이 쓰긴 쓴다.
- 할당 연산자
=*= - 비교 연산자
==
<><=>=
===- 동등 연산자(
==)는 다른 값끼기 비교할 때 피연산자의 자료형을 숫자형으로 바꾼 후 비교를 진행한다.
- 동등 연산자(
- 논리 연산자
&&||! - 타입 연산자
typeof - 조건부 연산자
? - 인스턴스 생성 연산자
const today = new Date();
피연산자의 타입은 자바스크립트의 암묵적 타입 강제 변환으로 반드시 일치할 필요는 없지만 그래도 맞추는 것으로 습관을 들이는 것이 좋다.
Syntax Basic 4: "표현식"
표현식
표현식은 하나의 값으로 평가되는 식을 말한다.
리터럴, 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 연산자 조합 등은 모두 표현식의 일종이며, 하나의 값으로 평가되는 것을 뜻한다.
문과 표현식의 비교
표현식은 문을 구성하는 요소이며, 그 자체로 하나의 문이 되기도 한다.
//선언문
let result = 4 * 5; //표현식은 result = 4 * 5이며 이를 문이 포함한다.
//할당문
result = 100; //표현식이면서 또한 완전한 문표현식은 값을 만들어낼 수 있지만 그 이상의 행위는 하지 못한다고 보면 된다.
Syntax Basic 5: "함수"
함수는 바로 필요한 문들의 집합체이다.
function score(number) {
return number * 30;
}
score(number);이외에도 더 다양한 용어들이 많을 것이다. 객체나 배열이라든지, 스코프나 프로토타입이라든지 등등 굉장히 많지만 이후를 위해 일단은 간과하기 쉬운 기초 용어만 그 개요를 간단히 정리해 보았다! 그럼 다음 TIL에서 계속!
공부한 레퍼런스
https://poiemaweb.com/js-syntax-basics
https://ko.javascript.info/javascript-specials
