자바스크립트란?
자바스크립트(JavaScript)는 객체(object) 기반의 스크립트 언어이다.
HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다. 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력이라고 볼 수 있다.
자바스크립트의 특징
- 개체 기반의 스크립트 언어입니다.
- 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어입니다.
- 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있습니다.
☞ 인터프리터 언어는 컴파일 작업을 거치지 않고, 소스 코드를 바로 실행할 수 있는 언어를 의미합니다.
자바스크립트는 웹 브라우저에 포함된 자바스크립트 인터프리터가 소스 코드를 직접 해석하여 바로 실행해 줍니다.
*컴파일: 어떤 언어의 코드 전체를 다른 언어로 바꿔주는 과정
자바스크립트 선언문
<script>
// 자바스크립트 실행문
</ script>
주석
// 한줄 설명글인 경우
/* 여러줄 설명글인경우 */* 여러 줄 주석은 절대로 중첩해서 사용할 수 없습니다.
식별자(identifier)
식별자는 변수나 함수의 이름을 작성할 때 사용하는 이름을 의미.
영문자(대소문자), 숫자, 언더스코어(_) 또는 달러($)만을 사용.
- 숫자와 구별을 빠르게 할 수 있도록 숫자로는 시작할 수 없다.
- 유니코드(unicode) 문자셋을 사용.
식별자 작성 방식
- Camel Case 방식 (단어 사이의 첫 문자를 대문자로 작성)
- UnderscoreCase 방식 (단어를 _ 로 연결) - 주로 사용됨.
* 하이픈(-)은 뺄셈을 위한 예약 키워드로, 사용할 수 없음.
키워드 (keyword)
몇몇 단어들은 특별한 용도로 사용하기 위해 미리 예약하고 있습니다. 이렇게 미리 예약된 단어들을 키워드 또는 예약어라고 합니다. 이러한 키워드들은 프로그램 내에서 식별자로 사용할 수 없습니다.
자바스크립트 적용
1. 내부 자바스크립트 코드로 적용
- <script> 태그를 사용하여 HTML 문서 안에 삽입 (<head> 태그나 <body> 태그 양쪽 모두에 위치할 수 있음)
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script>
function printDate() {
document.getElementById("date").innerHTML = Date();
}
</script>
</head>2. 외부 자바스크립트 파일로 적용
- 자바스크립트 파일은 .js 확장자를 사용하여 저장
<head>
<meta charset="UTF-8">
<title>JavaScript Apply</title>
<script src="../js/example.js"></script>
</head>html문서 내부에서 외부로 분리하는 주된 목적은 관리를 위해서.
분리하게 되면 코드를 각각 읽기도 편해지고, 유지 보수도 쉬워집니다.
타입
기본 타입
타입 (data type) 이란 프로그램에서 다룰 수 있는 값의 종류를 의미.
원시 타입 (primitive type) - 바로 값을 그대로 할당한다
- 숫자 (number) - 모든 수를 실수 하나로 표현. (e 표기법 사용 10e6 = 10000000)
- 문자열 (string) - ("")나 ('')로 둘러싸인 문자의 집합
- 불리언 (boolean) - 참(true)과 거짓(false)을 표편.
- 심볼 (symbol) - ES6 부터 제공. 심볼은 유일하고 변경할 수 없는 타입
- undefined - 아직 '타입'이 정해지지 않은 것. 초기화되지 않은 변수나 존재하지 않는 값에 접근할 때 반환
- null - object 타입이며, 아직 '값'이 정해지지 않은 것을 의미
- BigInt - 길이 제한이 없는 정수. 정수 뒤에 n을 붙이거나 BigInt()를 호출해 생성
참조형 - 값이 저장된 주소값을 할당(참조)한다
- 배열
- 예) 'Apple' 같은 데이터를 배열의 아이템(Item) 혹은 요소(Element)라고 부릅니다.
let fruits = ['Apple', 'Banana', 'Cherry']- 객체 (object)
- 자바스크립트의 기본 타입은 객체(object) 입니다.
- 객체란 실생활에서 우리가 인식할 수 있는 사물로 이해할 수 있습니다.
- 객체는 여러 프로퍼티 (property)나 메소드(method)를 같은 이름으로 묶어놓는 일종의 집합체입니다.
let dog = { name: "해피", age: 3 }; // 객체의 생성- 함수
- 자바스크립트에서 함수(function)는 1급 객체(First-class object)로,
하나의 값으로 변수나 인수 혹은 반환이 가능합니다.
- 자바스크립트에서 함수(function)는 1급 객체(First-class object)로,
변수(variable)
변수란 변하는 값을 저장하는 공간.
변수 선언 방법
1. var (function scope) 사용X
2. let (block scope) 재할당 시에 사용
3. const (block scope) 주로 사용 O
* 자바스크립트의 변수 선언은 var로만 가능했으나, ES6부터 let과 const가 추가 되었다.
# var, let, const 차이점
1. 중복선언 가능 여부 - var : 가능
- let, const : 불가능
2. 재할당
- var, let : 가능
- const : 불가능, 처음 선언할 때 반드시 초기화(값 할당)를 해주어야 한다.
3. 스코프 (Scope) : 스코프란 유효한 참조 범위.
- var : 함수 내부에 선언된 변수만 지역변수로 한정하며, 나머지는 모두 전역변수로 간주.
- let, const : 함수 내부는 물론, if문이나 for문 등의 코드 블럭{...} 에서 선언된 변수 지역변수 로 취급.
4. 호이스팅 : '변수 선언문'을 미리 실행두기 때문에 뒤에서 선언된 변수도 앞의 코드에 참조할 수 있게 되는 것.
- var : 변수 호이스팅이 발생.
- let, const : 발생 하지만, 값을 참조할 수 없음.
5. 전역객체 프로퍼티 여부
- var : var로 선언된 변수는 전역객체의 프로퍼티다.
- let, const : 저녁객체 프로펕치가 아니다.
Use const and let
Declare all local variables with either const or let.
Use const by default, unless a variable needs to be reassigned.
The var keyword must not be used.
구글 자바스크립트 스타일 가이드 : https://google.github.io/styleguide/jsguide.html#features-use-const-and-let
ref
http://www.tcpschool.com/javascript/intro
코딩교육 티씨피스쿨
4차산업혁명, 코딩교육, 소프트웨어교육, 코딩기초, SW코딩, 기초코딩부터 자바 파이썬 등
tcpschool.com
'javascript' 카테고리의 다른 글
| while문의 이해(반복문) (0) | 2023.02.15 |
|---|---|
| 반복문 for문 (0) | 2023.02.08 |
| javascript 조건문 if와 switch문 (0) | 2023.02.01 |
| javascript 연산자 (0) | 2023.01.16 |
| javascript 형 변환 (0) | 2023.01.11 |