기본정리 - Javascript(1)

given·2024년 10월 21일

FE-기본

목록 보기

6/14

Javascript

자바스트립트(javascript)는 웹 개발에서 중요한 역할을 하는 프로그래밍 언어. 초기에는 웹페이지의 동적 요소를 추가하기 위해 개발되었지만, 현재는 매우 다양한 용도로 사용.

자바스크립트란?

Ecma International의 프로토타입 기반의 프로그래밍 언어로, 스크립트 언어에 해당된다. 특수한 목적이 아닌 이상 모든 웹 브라우저에 인터프리터가 내장되어 있다. 오늘날 HTML, CSS와 함께 웹을 구성하는 요소 중 하나다. HTML이 웹 페이지의 기본 구조를 담당하고, CSS가 디자인을 담당한다면 JavaScript는 클라이언트 단에서 웹 페이지가 동작하는 것을 담당한다.[1] 웹 페이지를 자동차에 비유하자면, HTML은 자동차의 뼈대, CSS는 자동차의 외관, JavaScript는 자동차의 동력원인 엔진이라고 볼 수 있다.

1. 자바스크립트 코드 작성 방법 & 실행 방법

1. 내부 스크립트

<!-- 내부 스크립트 -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      console.log("Hello, Javascript 1");
      console.log("Hello, Javascript 2");
      console.log("Hello, Javascript 3");
      console.log("Hello, Javascript 4");
    </script>
  </body>
</html>

2. 외부 스크립트

// <!-- 외부 스크립트 -->
			// script.js
			console.log("Hello, Javascript 1");
		  console.log("Hello, Javascript 2");
      console.log("Hello, Javascript 3");
      console.log("Hello, Javascript 4");

<script src="script.js"></scrip>

2. 스크립트 작성 위치

head 태그 안에 사용하는 경우
body 태그 안에 사용하는 경우
1. body 태그의 첫 번째에서 작성
2. body 태그의 중간 번째에서 작성
3. body 태그의 마지막 번째에서 작성

⚠️ 주의: 브라우저는 javascript를 다운로드하고 실행 시 브라우저는 HTML 파싱을 멈춘다. 그래서 보통 script는 body 마지막 부분에 넣어주는 것이 관례이다.

async defer

새로운 문법 async 와 defer 의 등장

HTML DOM 요소를 다루는 게 아니라면 async가 빠를 수 있다.

주석

한줄 주석
```
// 주석
```

여러줄 주석

/* 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, 
when an unknown printer took a galley of type and scrambled it to make a type specimen book. 
It has survived not only five centuries, but also the leap into electronic typesetting, 
remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset 
sheets containing Lorem Ipsum passages, and more recently with desktop publishing software 
like Aldus PageMaker including versions of Lorem Ipsum.
*/

3. 변수

1. 변수

변할 수 있는 수

키워드(keyword) - 특별한 목적을 가지고 설계된 예약 단어
1. var
  
  고질적인 문제. 호이스팅, 중복 선언, 초기화
2. let (ES6) - 2015
  
  중복된 식별자를 가지고 있는 변수를 만들수 없는 특징, 재할당은 됨
3. const (ES6) - 2015 ← 제일 안전
  
  선언과 할당을 분리할 수 없다. (무조건 초기화)
  
  중복도 안되고, 재할당도 안됨
```
let num // 선언
num = 20 // 할당
// 초기화
let num2 = 10 
```

2. 상수

재할당이 불가능한 수 - 변하지 않는 수

4. 키워드, 식별자, 연산자, 표현식, 값, 세미콜론

대괄호 []
중괄호 {}
소괄호 ()
백틱 ```
쌍따옴표(곁따옴표) "
홑따옴표 '
콜론 :
세미콜론 ;

5. 식별자 명명 규칙

(절대적 규칙)

키워드는 사용할 수 없다(var, let, const, function, for, while, if, else)
공백 포함 불가 var my School = 1 ← X
첫글자는 영문 소문자, _, $ 만 사용

(관용적인 규칙)

식별자는 영문으로만 작성 (한글 비추)
식별자는 의미있게
식별자 표기법 → 카멜(mySchool) or 파스칼(MySchool)
1. 거의 모두 카멜케이스
2. 파스칼케이스는 클래스 식별자, 생성자 함수
3. 가끔 스네이크(상수) MAX_LEVEL

ps.

프론트엔드 개발자가 MAC os 사용하면 좋은 이유

node 버젼 관리에 용이함, 개발적인 편이성

google search에 “n 패키지” 검색

6. 데이터 타입(Data Type) - 자료형

1. 기본 자료형

문자(strinng), 숫자(number), 논리(boolean), undefind, null ,symbol

문자(string): 큰따옴표(”) 또는 작은 따옴표(’)로 둘러 쌓여진 값

const string = "Hello, World";
const str = '큰따옴표 표함(")';
const str2 = "작은따옴표 포함(')";
const str3 = "큰 따옴표(\") 작은따옴펴(\') 포함"; // \<- 이스케이프 문자

// 템플릿 문자열(ES6)
const str4 = `큰 따옴표(") 작은따옴펴(') 백틱(\`) 포함`;
const str5 = `123412341234 + 1234123412341 = ${123412341234 + 1234123412341}`; // <- 표현식 추가 가능

// 문자열 연결 연산자 ( + ) - * / % **
const combineStr = "A" + "B";

숫자(number): 일반적인 수 (양수, 0, 음수, 지수, 16진수)

const num1 = 0; // 0
const num2 = 10; // 양수
const num3 = -10; // 음수
const num4 = 0xff; // 16진수
const num5 = 1.5e3; //지수

// 특수상황
console.log(0.1 + 0.2); //부동소수점 방식으로 숫자를 계산하기
// 출력: 0.30000000000000004
console.log((0.1 + 0.2).toFixed(1)); // 해결1
console.log((0.1 * 10 + 0.2 * 10) / 10); // 해결2

논리(boolean): 참(true)와 거짓(false)을 표현하는 데이터
undefined - 정의되지 않음(특수자료형)
null - 의도적으로 값을 비워둘 때(특수자료형)

심볼(Symbol) - ES6

const sym1 = Symbol("unique key");
console.log(sym1);

2. 참조 자료형

객체, 배열, 함수

배열: 데이터의 집합 (복수의 데이터를 정의할 때 )

const arr = []; // 빈 배열
const arr2 = [10]; // 숫자형 배열
const arr3 = [10, "A", true, undefined, null, Symbol(), {}, function(){},[]]; // 복합형 배열
console.log(arr3[0]); // 10, 대괄호 연산자

단점 → 특정 요소에 대한 식별자가 부족함

객체: 키(식별자)와 값으로 구성된 속성의 집합

const scoreObj = {[key]: value}; // key: value <- 속성(프로퍼티)

const obj = { korea: 90, english: 70, math: 80 };
console.log(obj["korea"]);
console.log(obj.korea);

// 하나의 자료형 -> 다른 자료형으로 바꾸는 것을 [형변환]
// 암시적(암묵적) 형변화
// 명시적 형변환
const obj = { 0: 90, 1: 70, 2: 80 };
console.log(obj[0]);
console.log(Object.keys(obj)); //['0','1','2'] <- 객체의 key 값은 문자열로 작성한다.

기본 자료형 vs 참조 자료형

// 깊은 복사
let a = 10;
let b = a;

a = 20;

console.log(a, b); //20 10

// 얕은 복사
const arr1 = [10];
const arr2 = arr1;
arr1.push(20);
arr2.pop()
console.log(arr1, arr2); //[ 10, 20 ] [ 10, 20 ]

참조 자료형은 메모리 주소값이 복사된다.

given

osanThor⚡️블로그 이전했습니다. https://blog.given-log.com

이전 포스트

기본 정리 - CSS(2)

다음 포스트