💻 JavaScirpt 주요 문법
변수
변하는 데이터를 저장하는 메모리 공간 또는 공간 자체를 식별하기 위해 붙인 이름
- 변수의 값을 저장하는 것 : 할당(assignment, 대입, 저장)
- 변수에 저장된 값을 읽어 들이는 것 : 참조(reference)
- 변수명을 자바스크립트 엔진에 알리는 것 : 선언(declaration)
변수의 선언은 var, let 키워드로 가능하다.
- 자바스크립트에서 변수선언은 선언->초기화 단계를 거친다.
- ES6에서 let 이 추가 되었다.
var 보다 let 사용이 권장되는데 이유는 호이스팅 때문
😮 자바스크립트 엔진은 소스코드를 한 줄씩 순차적으로 실행하기 앞서, 변수 선언을
포함한 모든 선언문을 찾아내 먼저 실행한다. 즉 변수선언이 어디에 있든 상관없이 다른 코드 보다 먼저 실행되는 특징을 호이스팅 이라고 한다.
상수
변화하지 않는 변수를 선언할 땐, let 대신 const를 사용 (const 로 선언한 변수를 '상수' 라고 한다.)
대문자 상수란?
- 기억하기 힘든 값을 변수에 할당해 별칭으로 사용하는 것
장점 : 기억하기 쉬움, 오타 확률 낮아짐, 코드 가독성 증가
자료형
원시 타입
- 문자형(String)
- 숫자형(Number)
- 논리형(Boolean)
- null & undefined 데이터
참조 타입
- 객체(Object)
- 배열(Array)
- 함수(Function)
원시 타입과 참조 타입 차이?
- 원시 타입은 값 자체를 복사
- 참조 타입은 참조(주소)값을 복사
😮 자바스크립트에서는 원시 타입을 제외한 모든 값은 객체(참조) 타입이다.
메모리
JS 의 주소 공간
- Code Area : 실행 할 js 코드를 저장한다.
- Call Stack : 실행 중인 함수를 추적하며 계산을 수행, 지역 변수를 저장.
- Heap : 참조 타입들이 할당되는 곳, LIFO 정책을 따르지 않고 랜덤하게 배치된다.
메모리의 생명 주기
- 필요한 메모리 할당
- 메모리 사용
- 필요 없어진 메모리 제거
Garbage Collection
자동 메모리 관리 방법(변수의 필요유무를 판단하고 메모리에서 제거하는 것)이 Garbage Collection 이다.
- 참조
가비지 콜렉션 알고리즘의 핵심 개념
- 참조-세기(Reference-counting)
이 알고리즘은 "더 이상 필요없는 오브젝트"를 "어떤 다른 오브젝트도 참조하지 않는 오브젝트"라고 정의
-표시하고-쓸기(Mark-and-sweep)
- 이 알고리즘은 "더 이상 필요없는 오브젝트"를 "닿을 수 없는 오브젝트"로 정의
- root 라는 오브젝트의 집합을 가지고 있다.
- Reference-counting 알고리즘 보다 효율적이다.
표현식
Expression
- 값을 산출해내는 코드. 값이 도출되기 때문에 함수의 인자로 들어갈 수 있다.
Statement
- 특정 액션을 수행하는 코드. 값을 도출할 수 있으며 이를 Expression Statement라고 칭한다.
- 모든 Expression 은 Statement 지만, 모든 Statement 가 Expression 은 아니다.
연산자
- 할당 연산자
- 비교 연산자
- 산술 연산자
- 비트 연산자
- 논리 연산자
- 문자열 연산자
- 조건(삼항) 연산자
- 쉼표 연산자
- 단항 연산자
- 관계 연산자
typeof 연산자
변수의 데이터 타입을 반환하는 연산자
흐름 제어
Control Flow
- 제어문은 조건에 따른 명령 실행(조건문)이나 반복 실행(반복문)이 필요할 때 사용된다.
- 조건문은 주어진 조건식이 참(true)인지 거짓(false)인지에 따라 실행되어질 구문들의 집합
- 반복문은 주어진 조건식이 참 인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 검사하여 조건식이 거짓일 때까지 반복 한다.
조건문
if 문
주어진 조건식을 평가하여 논리적 참, 거짓을 구별if (조건식) { // 조건식이 참이면 이 블록이 실행. } else { // 조건식이 거짓이면 이 블록이 실행. }switch 문
switch 변수의 값과 일치되는 case 문으로 실행 순서가 이동하게 된다. switch 변수의 값과 일치되는 case 문이 없다면 실행 순서는 default 로 이동한다.
반복문
- for 문
가장 일반적으로 사용되는 반복문. 일정 횟수만큼 반복 실행하여야 할 때 사용한다.- while 문
반복 횟수를 정확히 알지 못할 때 사용.- do while 문
While문과 매우 유사하나 코드블록은 최소 1회 이상 실행.- break
반복문을 탈출할 때 사용하는 키워드이다. break문을 감싸는 반복문 하나를 탈출한다.- continue
continue문 이후의 구문은 실행 생략하고 반복문의 조건검사 위치로 이동.
👌평가(Evaluating)
흐름제어를 위해서는 조건식을 평가하여 논리적 참, 거짓을 구별한 후 결과에 따라 의사결정을 하는 것이 일반적이다.
배열과 객체
배열 선언 방법
let arr = []; // 빈 배열 선언
arr = [1, 3, 5, 7, 9]; // 배열에 값 할당
console.log(arr); // --> [1, 3, 5, 7, 9]배열 요소 추가
- push (배열 요소 1개 추가)
- concat (배열 요소 다수 추가)
- unshift (배열의 요소 첫번째 인덱스부터 다수 추가)
- splice (배열의 요소를 지정인덱스에 다수 추가 및 삭제)
배열 요소 제거 및 정렬
- shift (배열의 첫번째 요소 제거)
- pop(배열의 마지막 요소 제거)
- sort(); (정렬)
- reverse(역정렬)
배열 순환
for ...of
for of 반복문은 ES6에 추가된 새로운 컬렉션 전용 반복 구문
var arr = [1, 2, 3];
for (var item of arr) {
console.log(item); // 1, 2, 3
}객체 선언 방법
let user = {}; // 빈 객체 선언
user = {
name: "Tae",
email: "Tae@gmail.com",
city: "Seoul"
} // 객체에 값 할당
console.log(user); // --> {name: "Tae", email: "Tae@gmail.com", city: "Seoul"}객체 순환
for …in
for in 반복문은 객체의 속성들을 반복하여 작업을 수행할 수 있다. 모든 객체에서 사용이 가능
var obj = {
a: 1,
b: 2,
c: 3
};
for (var item in obj) {
console.log(item) // a, b, c
}스코프와 클로저
스코프(Scope)
코드의 사용범위를 의미하며 세부적으로 파악하면 변수의 유효범위를 뜻한다.
- 전역 스코프
변수가 함수 바깥이나 중괄호 바깥에 선언되었다면 전역스코프.
전역 변수를 선언한다면 모든 곳에서 해당 변수를 사용할 수 있다. - 지역 스코프
코드의 특정 부분에서만 사용할 수 있는 변수는 지역 스코프에 있다고 할 수 있다
- 함수 스코프
함수 내부에서 변수를 선언하면 그 변수는 선언한 변수 내부에서만 접근할 수 있다.
- 블록 스코프
중괄호 내부에서 const 또는 let으로 변수를 선언하면 그 변수들은 중괄호 블록 내부에서만 접근할 수 있다.
- 함수 스코프
클로저👻
- 내부에 작성된 함수를 클로저라고 부른다.
- 클로저는 나중에 외부 함수의 변수를 사용할 수 있기 때문에 보통 반환하여 사용한다
따라서 클로저는 외부 함수의 변수에 접근할 수 있기 때문에 사이드 이펙트를 제어하거나 private 변수를 생성하기 위해 사용된다.
회고🥲
기초가 부족하다는 생각이 다시 한번 들었다...
직장에 다녔을 때 필요한 부분만 찾아보고 대충 넘어가는 부분들이 많았는데
업보처럼 하나도 기억이 안 나서 역시 하나하나 제대로 알아보며 찾아보는 것도 엄청난 노력이고
이렇게 공부하며 꾸준히 기록한다면 더욱 더 성장할 수 있는 기반이 될 거라 생각이 든다. 화이팅!
참고
- https://www.howdy-mj.me/javascript/var-let-const/
- https://ko.javascript.info/variables
- https://developer.mozilla.org/ko/docs/Web/JavaScript/Memory_Management
- https://m.blog.naver.com/PostView.naver?isHttpsRedirect=true&blogId=jdub7138&logNo=221028032624
- https://ddhun.tistory.com/17
- Do it 자바스크립트 + 제이쿼리 입문
정리가 섹시하네요