[JS] 자바스크립트의 기초 개념

 

 

1. 자바스크립트 실행 원리

- Javascript

: 웹 페이지에 생동감을 불어넣기 위해 만들어진 언어

: Javascript를 실행하려면 Javascript 엔진이 필요

: Javascript 엔진은 브라우저에 내장

 

cf.) 모든 브라우저의 Javascript 엔진은 ECMAScript 표준을 따른다

 

 

- 인터프리터 vs 컴파일

	인터프리터	컴파일
예시	Javascript	Java, C
번역 단위	한 줄씩 (바로 번역, 실행)	전체 (컴파일 → 실행)
번역 속도	빠름	느림
실행 속도	느림	빠름

 

 

- 자바스크립트 엔진 메모리 구조

• Code 영역 : 코드가 저장되는 영역
• Data 영역 : 변수가 저장되는 영역
• Heap 영역 : 객체, 함수, 배열, ... 저장되는 영역
• Stack 영역 : 함수를 호출하는 순서를 보관하는 영역 (= Call Stack)

 

 

 

2. 원시 타입 변수

- 변수

: input 데이터를 저장하는 공간

 

 

- 변수 이름 규칙

• 다른 변수와 이름 중복X
• 대소문자 구분O (age Age 서로 다름)
• 특수문자X (_, $ 제외)
• 띄어쓰기X (대신 camelCase(소문자+대문자) 사용 = myName)
• 예약어X
• 숫자로 시작X

 

 

- 변수 종류

• let : 변수(변할 수 있는 값) / 값의 재할당이 가능(값 변경이 가능)
• const : 상수(고정된 값) / 초기값 변경 불가능(값 변경이 불가능)
• var : 쓰지 않는 것을 추천

let, const	var
변수 선언 시 키워드 필요	변수 선언 시 키워드 없어도 에러 발생 X
변수 이름 중복 허용 X	변수 이름 중복 허용해도 에러 발생 X
블록 스코프 영역 지원 (지역, 전역 변수 구분 O)	함수 스코프 영역 지원 (지역, 전역 변수 구분 X)

 

 

- 변수 데이터 타입 종류

: 원시 타입 = 단일 데이터 저장 (boolean, null, undefined, number, string ...)

: 참조 타입(객체타입) = 복합 데이터 저장 (array, object, function ...)

 

 

 

3. 참조 타입 변수의 배열과 객체

- 참조 타입 (객체 타입)

: 원시 타입 제외한 다른 모든 타입

: 메모리 공간이 동적으로 변하는 데이터 타입

: 원시 타입과 다른 메모리 공간에 값 할당

: 식별자는 다른 메모리 공간에 있는 값의 주소 값을 할당

 

 

- 배열 (Array)

: 순서있는(index로 접근) 여러 개의 데이터가 들어가있는 데이터 타입

: 배열에서 사용할 수 있는 메서드

• push() : 배열 끝에 추가
• pop() : 배열 끝에 제거
• shift() : 배열 앞에 제거
• unshift() : 배열 앞에 추가
• fill() : ()안에 있는 것으로 배열 채우기
• flat() : 배열 여러 개를 → 1개로 펼치기
• reverse() : 배열 안의 요소들을 거꾸로
• sort() : 배열 안의 요소들 오름차순으로 정렬
• length() : 배열의 길이

 

 

- 객체 (Object)

: 여러 개의 key, value로 이루어진 데이터 타입 (연관 있는 데이터 타입 한 개로 묶어주기 위함)

: {key : value} → key+value = 속성(프로퍼티)

: 프로퍼티의 집합

: 객체에서 사용할 수 있는 메서드

• Object.freeze() : 속성 변경 막음
• Object.assign() : 객체 합치기
• ... (=spread) : 펼치기

 

 

- 함수 (Function)

: 함수 호출 O → stack에 메모리 공간 생성 / 함수 호출 X → stack에서 메모리 공간 삭제

 

 

 

- 얕은 복사 vs 깊은 복사

• 얕은 복사

: 기존 주소값을 복사

: 객체 타입

//[단순 이해용 예시]

let num1 = 1
let num2 = num1

// num2 == num1

• 깊은 복사

: 값 자체가 복사 (비효율적)

: 원시 타입

//[단순 이해용 예시]

let num1 = 1
let num2 = num1

// num2 == 1

 

 

- 스코프 (Scope)

: 변수 이름에 접근할 수 있는 유효한 범위

: 식별자를 참조할 수 있는 범위

• 블록 스코프 : {}이 붙어있는 것 → if문, for문 ...
• 함수 스코프 : function() {}
• 전역 스코프 : 최상위 스코프 (global)

 

 

 

4. 연산자

- 연산자 종류

• 할당 연산자 : =
• 산술 연산자 : +, -, *, /, %, **
• 증감 연산자 : ++, --
• 비교 연산자: <, >, <=, >=, ==, ===, !=, !==
• 논리 연산자 : &&, ||, !!

cf.) 연산자 우선순위 중요!

 

 

 

5. 제어문

- 조건문

: if (조건식) {코드블록};

: if (조건식) {코드블록} else {코드블록};

: if (조건식) {코드블록} else if (조건식) {코드블록} else {코드블록};

: 조건식은 boolean 값이 들어와야 함 (비교 연산자, 논리 연산자, boolean 자체 ... 사용)

 

 

- 삼항 연산자

: 미니 if 문이라고 생각하면 쉽다

: (조건식) ? 코드1 : 코드2;

: 조건이 true → 코드1 실행 / 조건이 false → 코드2 실행

 

 

- 반복문

: for문 / while문 사용

 

 

- break 와 continue

: break = 반복문 안의 코드 실행문에서 break 만나면 바로 반복문 종료

: continue = 반복문 안의 코드 실행문에서 continue 만나면 바로 반복문 맨 처음으로 돌아감

 

 

- 무한 반복문

: for문

for( ; ; ) {
    if(조건식){break;}
}

: while문

while(true){
    if(조건식){break;}
}

 

 

 

6. 함수

- 함수의 종류

• 함수 선언문 : function 함수이름() {코드};
• 무명 함수 (익명 함수) : function () {코드};
• 함수 표현식 : let 변수이름 = function () {코드};
• 화살표 함수 : let 변수 이름 = () => {코드};
• 생성자 함수 : let 변수 이름 = new 함수 이름();

 

 

- 화살표 함수

: 함수 표현식 보다 단순하고 간결한 문법으로 함수를 만들 수 있음

: 함수 안의 내용이 한 줄이면 {} 중괄호 생략 가능

: {} 중괄호 사용 시, return 값으로 값 반환 필요

: 보통 화살표 함수는 콜백 함수 안에서 많이 사용된다

 

 

- 콜백(Callback) 함수

: 어떤 이벤트 발생 → 시스템에서 호출하는 함수

: 다른 함수가 이 함수를 실행시킨다 라고 생각하면 쉽다

: 보통 익명함수 많이 사용 (함수 내부에서 1번만 사용되기 때문)