[JS] JavaScript 기초, 변수 var let const, 배열, 객체, 함수, 메서드, 각종 연산Web_Frontend/javascript2023. 12. 24. 23:34@Yanako

Table of Contents

오늘 수강한 강의 : 【한글자막】 100일 코딩 챌린지 - Web Development 부트캠프

오늘의 강의 정리 📗

자바스크립트 기초 이해하기

자바스크립트란?

웹 페이지에서 복잡한 기능을 구현 할 수 있는 스크립팅 또는 프로그래밍 언어.
보통 스크립트 언어 혹은 인터프리터 언어로 분류됨.
JavaScript 코드는 JavaScript엔진에 의해 해석(기본 기계어로 직접 변환)됨.
- JavaScript 엔진 : JavaScript 코드를 실행하는 컴퓨터 프로그램.
  - (최초 JS엔진) 단순한 인터프리터 -> JIT(Just-In-Time)또는 런타임 컴파일을 통해 성능 향상
- 클라이언트 측 JS : JS 가 브라우저에서 작동하는 방식을 나타냄.
  - 이 경우 JS 엔진은 브라우저 코드 내부에 위치.
    - 모든 주요 브라우저에는 JS 엔진이 내장되어 있음.
- 서버 측 JS : 백엔드 서버 로직에서 코딩언어로 JS를 사용함.
  - 이 경우 JS 엔진은 서버에 직접 위치.
  - 서버측 JS함수는 데이터 베이스에 엑세스 하고, 논리작업을 수행하는 등의 작업 수행
    - 장점 : 요구 사항, 액세스 권한 및 웹 사이트의 정보 요청에 따라 웹 사이트 응답을 쉽게 사용자 지정할 수 있음.
웹 브라우저에서 JS 가 동작하는 방식
1. 웹 페이지 방문 시 브라우저가 웹 페이지 로드
2. 로드하는 동안 브라우저는 버튼, 레이블, 드롭다운 박스와 같은 페이지 및 모든 요소를 문서 객체 모델(DOM)이라는 데이터 구조로 변환함.
3. 브라우저의 JS 엔진은 JS 코드를 바이트 코드로 변환시킴.
4. 버튼에 대한 마우스 클릭과 같은 다양한 이벤트는 연결된 JS 코드 블록의 실행을 트리거함.
  - 이후 JS 엔진은 바이트 코드를 해석해서 DOM을 변경함.
5. 브라우저에 새 DOM이 표시됨.
서버에서의 JS (Node.js)
- 브라우저 외부에서 JavaScript 코드를 실행하는 서버 측 오픈 소스 JavaScript 프레임워크
- 확장 가능하고 빠르며 안정적인 네트워크 기반의 서버 측 애플리케이션을 구축
- HTTP 요청 및 데이터 스트림을 처리하고, 파일 시스템을 지원하며, 여러 백엔드 프로세스를 동시에 관리

HTML : (마크업 언어)문단, 제목, 데이터 표를 정의하거나 페이지에 이미지와 동영상을 삽입하는 등 웹 콘텐츠를 구성하고 의미를 부여

CSS : (스타일 규칙 언어)배경색과 글꼴을 설정하고 콘텐츠를 여러 열에 배치하는 등 HTML 콘텐츠에 스타일을 적용하는 데 사용

Javascript : (스크립팅 언어)동적으로 변경되는 콘텐츠를 만들고, 멀티미디어를 제어하고, 이미지에 애니메이션을 적용하는 등 거의 모든 작업을 수행

HTML 요소 - script

Script 태그 내 인라인 스크립트 작성

<head>
	<script>
		//수행할 작업
	</srcipt>
</head>

외부에서 정의한 JS 적용

<head>
	<script scr="파일경로+파일명.js">//절대 아무 내용도 넣지 마시오</srcipt>
</head>

CF) 빠른 렌더링과 UX(User Experience)를 위한 JS, CSS 호출 위치

1) 브라우저 렌더링 과정

브라우저는 HTML, CSS, JS, 이미지, 폰트 파일 등 렌더링에 필요한 리소스를 요청하고 서버로부터 응답을 받음
브라우저의 렌더링 엔진은 서버로부터 응단된 HTML, CSS를 파싱하여 DOM과 CSSOM을 생성하고 이들을 결합해 렌더 트리 생성
브라우저의 자바스크립트 엔진은 서버로부터 응답된 자바스크립트를 파싱하여 AST를 생성하고 바이트코드로 변환해 실행. 자바스크립트는 DOM API를 통해 DOM이나 CSSOM을 변경할 수 있음. 변경된 DOM과 CSSOM은 다시 렌더 트리로 결합
렌터 트리를 기반으로 HTML 요소의 레이아웃(위치와 크기)을 계산하고 브라우저 화면에 HTML 요소를 페인팅
* 이 때 HTML 문서 파싱 중 CSS 요소 혹은 Script요소가 있다면 브라우저 엔진은 HTML 파싱을 멈추고 해당 요소를 먼저 읽게 됨.

2) 적절한 stylesheet, script 위치

CSS : 늦게 호출 될 경우 사용자는 스타일이 적용되지 않은 화면을 볼 수 있음.
- 따라서, stylesheet의 호출은 head요소에 있는것이 좋은
JS : Script 파일이 head 요소이고 용량이 크다면 body 요소의 실행이 늦어지게 됨.
- 따라서, 사용자가 빈 화면만 보면서 대기하는 불상사를 막기 위해 body 태그의 최하단에 두는 편.

변수(variable) : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

자바스크립트는 매니지드 언어(managed language)
- 개발자가 직접 메모리를 제어하지 못함.
- 개발자가 직접 메모리 주소를 통해 값을 저장하고 참조할 필요가 없음.
- 변수를 통해 안전하게 값에 접근이 가능.
변수에 값을 저장하는 것을 할당(assignment, 대입, 저장)이라 하며 변수에 저장된 값을 읽어 들이는 것을 참조(reference)라고 함.
변수의 선언 : var, const, let 키워드로 할 수 있으며, ES6에서 const와 let이 추가됨.
- 자바스크립트에서 변수 선언은 선언 → 초기화 단계를 거쳐 수행
  - 선언 단계: 변수명을 등록하여 자바스크립트 엔진에 변수의 존재를 알림.
  - 초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화
변수의 할당 : 할당 연산자(=)를 사용

var, let, const

var의 문제점

변수 중복 선언 가능하여, 예기치 못한 값을 반환할 수 있음
함수 레벨 스코프로 인해 함수 외부에서 선언한 변수는 모두 전역 변수로 됨
변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환

let : 변수 중복 선언 불가

변수 중복 선언이 불가하지만, 재할당은 가능

let name = 'kmj'
console.log(name) // output: kmj

let name = 'howdy' // output: Uncaught SyntaxError: Identifier 'name' has already been declared

name = 'howdy'
console.log(name) // output: howdy

const(상수) : 반드시 선언과 초기화를 동시에 진행

재선언 불가하며, 재할당도 불가
- 재할당의 경우, 원시 값은 불가능하지만, 객체는 가능
- 재할당을 금지할 뿐, '불변’을 의미하지 않음

const name; // output: Uncaught SyntaxError: Missing initializer in const declaration
const name = 'kmj'
// 원시값의 재할당
const name = 'kmj'
name = 'howdy' // output: Uncaught TypeError: Assignment to constant variable.

// 객체의 재할당
const name = {
  eng: 'kmj',
}
name.eng = 'howdy'

console.log(name) // output: { eng: "howdy" }

호이스팅

인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 이동시키는 과정
- var 변수는 호이스팅 지원(파일 어디에서 선언을 하고 할당을 하건 상관없이 사용 가능)
- let 변수는 호이스팅 미지원(상단에서 선언 및 할당이 완료되어야 아래에서 사용 가능)

자료형

원시 자료형 : 한번에 하나의 값만 가질 수 있는 자료형

하나의 고정된 저장 공간을 이용합니다.
종류 :
- null
- undefined
- boolean
- string
- number
- bigint
- symbol

참조 자료형 : 한번에 여러 개의 값을 가질 수 있는 자료형

여러 개의 고정되지 않은 동적 공간을 사용합니다.
종류 :
- Object
- Array
- Function

객체 : 모든 값이 속성으로 저장되는 관련 값의 그룹

객체의 선언

여러개의 관계된 변수를 선언 할 때 아래와 같이 작성 가능

let jobtTitle = 'Developer'; 
let jobPlace = 'New York'; 
let jobSalary = 50000;

아래와 같이 객체로 선언 가능

let job = { 
	title: 'Developer', 
	place: 'New York', 
	salary: 50000 
};

객체의 사용

그룹명.요소명 형태로 사용

let job = { 
	title: 'Developer', 
	place: 'New York', 
	salary: 50000
}; 
alert(job.title);

전역 객체

브라우저 환경 : window
Node.js : global

배열

배열의 선언

let hobbies = ["coding", "karaoke", "reading", 1, 2];

배열의 사용(인덱싱)

hobbies[0];

함수(function)

함수의 선언과 사용

선언 : function 함수명 ( 매개변수 )
사용 : 함수명(매개변수
return을 활용해 활용성을 높일 수 있음

let age = 26; 
let adultYears; 

function calcualteAdultYears(){ 
	adultYears = age - 18; 
} 

calcualteAdultYears(); 
alert(adultYears); 

age = 45; 
calcualteAdultYears(); 
alert(adultYears);

콜백함수

const checkMood = (mood, goodCallback, badCallback)  
{  
    if (mood === "good") goodCallback();  
    else badCallback();  
}  
  
const cry = () => console.log("ACTION :: CRY");  
const sing = () => console.log("ACTION :: SING");  
const dance = () => console.log("ACTION :: DANCE");  
  
checkMood("sad", sing, cry);

메서드(method) : 객체의 원소로 들어간 함수를 메서드라 지칭

cf) 메서드가 아닌 원소들 : property

// 객체 및 메서드 선언부 
let person = { 
	name: "Justin", 
	// 메서드 정의시 function 키워드를 붙이지 않음
	greet() { 
		alert("Hello!"); 
	} 
} 
// 호출부 
person.greet();

console.log

정보 출력을 위해 사용
브라우저의 개발자 모드 콘솔 창을 통해 확인 가능

수학 연산 & 다양한 종류의 값 작업

//수학 연산
console.log(10+4); 
console.log(10-4); 
console.log(10*4); 
console.log(10/4); 
console.log(10%4);

// 증감연산
let result = 10; 
result++; 
console.log(result); 
result--; 
console.log(result); 
result+=5; 
console.log(result);

//문자열 연산
console.log('java'+'script'); 
console.log('javascript'-'java');
let userName = 'Max'; 
console.log(userName.length); 
console.log(userName.toUpperCase());

//배열 작업
let hobbies =['Sports', 'Cooking']; 
console.log(hobbies.length);

'Web_Frontend > javascript' 카테고리의 다른 글

[JS] 모듈 import, export, null과 undefined, 화살표 함수(Arrow Function), 클래스, 배열, 구조 분해 할당(destructuring), 스프레드 연산자(전개 구문) (1)	2023.12.31
[JS] 제어구조(조건문, 비교연산, 논리연산, 일치연산, truthy, falsy, 반복문, for of, for in, foreach, while, do while, break, continue, label)와 패키지작업 (0)	2023.12.31

@Yanako :: Yana's coding story였는데요, 우당탕탕 개발일지가 맞는것같

야나의 코딩 일기장 :) #코딩블로그 #기술블로그 #코딩 #조금씩,꾸준히

포스팅이 좋았다면 "좋아요❤️" 또는 "구독👍🏻" 해주세요!