[ 3D Web : Front_JavaScript ] 자바스크립트 기초 개념.
∇ 자바스크립트 기초 문법들.
목 차
1. 주석
2. 스타일 가이드
3. 예약어
4. 변수와 상수
5. 변수 선언 및 할당
6. 데이터 타입
1. 주석
- 자바스크립트에서는 코드 내에 주석을 추가하여 코드를 설명하거나,
코드 실행 주에 무시되어야 하는 부분을 가릴 수 있습니다.
- 주석은 코드를 읽기 쉽게 만들어주며, 코드 유지보수에 유용합니다.
한 줄 주석
// 이 줄은 주석입니다. 실행되지 않습니다.
console.log('실행됩니다.'); // 이 줄은 실행되며, 콘솔에 '실행됩니다.'가 출력됩니다.
여러 줄 주석
/*
여러 줄의 주석입니다.
이 줄은 실행되지 않습니다.
*/
console.log('실행됩니다.'); // 이 줄은 실행되며, 콘솔에 '실행됩니다.'가 출력됩니다.
2. 스타일 가이드
- 자바스크릡트 스타일 가이드는
개발자들이 일관된 코드 스타일을 사용하여 코드를 작성하도록 돕는 일련의 규칙입니다.
- 일관된 스타일을 사용하면 코드 가독성과 유지보수성을 높이는데 큰 도움이 됩니다.
○ 소스 파일의 이름은 알파벳 소문자, 하이픈(-) , 밑줄(_)로만 작성
○ 소스 파일의 확장자명은 .js
○ 소스 파일의 인코딩은 UTF_8
○ 코드는 보기 좋게 줄 바꿈을 합니다.
○ 세미콜론으로 문장을 구분 합니다.
○ 식별자의 첫 글자는, 영문자 , 언더스코어, $로 시작해야 합니다.
○ 단어와 단어를 연결하여, 식별자를 작성하는 경우 : 하이픈이나 언더바 사용, 카멜표기법으로 표기
○ '예약어'는 식별자로 사용 불가
○ 세미콜론을 빠뜨려도, JS 엔진이 자동으로 세미콜론을 추가.
3. 예약어
4. 변수와 상수
자바스크립트에서 "변수(Variable)"와 "상수(Constant)" 는 데이터를 저장하기 위한 역할을 합니다.
변수와 상수는 선언, 할당, 참조 등의 동작을 통해 사용됩니다.
변수의 선언은 var, const, let 키워드로 할 수 있으며,
ES6에서 const와 let이 추가 되었습니다.
※ 변수.
- 변수는 값을 저장하기 위한 메모리 공간을 할당 받아서 사용합니다.
- 변수는 let 키워드를 사용하여 선언합니다.
- 변수는 선언 후에 값을 변경할 수 있습니다.
let x = 10; // 변수 x를 선언하고, 10을 할당합니다.
x = 20; // 변수 x에 20을 할당합니다.
※ 상수.
- 상수는 변수와 유사하지만, 선언 후 값의 변경이 불가능합니다.
- 상수는 const 키워드를 사용하여 선언합니다.
const PI = 3.14; // 상수 PI를 선언하고, 3.14를 할당합니다.
PI = 3.14159; // 에러 발생: 상수는 값을 변경할 수 없습니다.
5. 변수 선언 및 할당.
☆ 변수 할당.
- 변수에 값을 할당 할 때에는 "할당 연산자(=)"를 사용합니다.
let name = 'Andamiro';
let identity = '3dartist';
let age = 31;
☆ var, let, const의 차이.
√ var.
- 변수 중복 선언이 가능하기 때문에, 예기치 못한 값이 반환되는 문제가 발생 가능.
- 함수 레벨 스코프로 인해서, 함수 외부(전역)에서 선언된 변수는 모두 전역 변수로 처리된다.
- 변수 선언문 이전에 변수를 참조하면, undefined가 반환
(호이스팅과 관련 - var는 초기화상태로만 호이스팅)
√ let
- 중복 선언이 불가하고, 재할당은 가능
- 블록 레벨 스코프 {}를 따릅니다.
√ const
- 선언과 동시에 초기값이 전달되어야 하고, 이후 재할당 불가 ( 다른 언어의 const와 동일 개념)
- 블록 레벨 스코프 {}를 따릅니다.
6. 데이터 타입.
- 데이터 타입은 프로그래밍 언어의 기본적인 구성요소입니다.
- 숫자나 문자열처럼 변수에 저장하는 데이터의 종류를 의미합니다.
-
※ 데이터 타입의 분류.
- 원시 타입에 속하지 않는 자바스크립트의 값은 '객체'라고 합니다.
- 객체는 변수 여러개가 모여서 만들어진 복합 데이터 타입 입니다.
-JS에서는 배열, 함수, 정규 표현식과 같은 다양한 요소들이 객체입니다.
'3D Web Developer > Front_End [JS, React,Three,R3F]' 카테고리의 다른 글
| [ 3D Web : Front_JavaScript ] JavaScript의 기본 개념을 빠르게 훑어보기. (2) | 2024.10.24 |
|---|---|
| [ 3D Web : Front_JavaScript ] 자바스크립트 개요. (2) | 2024.10.20 |
| [ 3D Web : Front_JavaScript ] JavaScript - 자스의 동작원리. (0) | 2024.10.19 |