JavaScript와 프론트엔드 개발
- html : 정적 언어, 동적 기능을 하지 못함
- 프로그래밍 언어를 브라우저에 내장하여 동적으로 기능하게 하기 위해 JavaScript 등장
- 브라우저 동작 원리
ㄴ 통신 : 브라우저와 서버 사이의 통신
ㄴ 렌더링 : 객체 DOM을 화면에 그리는 것 (*DOM : 브라우저가 통신을 통해 받은 html을 읽어 생성, 트리구조, <html><head>...)
ㄴ 스크립트 실행 : 브라우저가 js를 실행
- 프론트엔드는 특히 협업이 중요 ! : 디자이너에게 디자인을 받고, 백엔드 개발자에게 데이터를 받아 작업
- 프론트엔드 개발자가 필요한 소양 : 커뮤니케이션, UI, 네트워크 & 보안, 다양한 브라우저 대응, 디자인
변수, 상수, 자료형 그리고 메모리
- 변수
: var는 ES6이후로 권장하지 않음(호이스팅이라는 js기능 때문에), 대신 let를 권장
- 상수
: const
- 자료형
: Number(정수, 실수, Nan, 무한대), String, Boolean, Object, Array, Function, Undefined(값이 정의되지 않을 때), Null(값임)
- 메모리
: 할당 > 사용 > 해제
: js엔진은 garbage collector로 사용하지 않는, 즉 참조되지 않는 메모리를 알아서 해제해줌,
(* garbage collector : 자동 메모리 관리 알고리즘으로 만들어진 객체
Mark and Sweep Algorithm : 닿을 수 없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘!!)
메모리 심화
- 변수를 선언할 때 js에서 일어나는 일
=> 변수에 고유식별자를 생성하고 메모리에 있는 주소를 할당
- 한 변수(이하 변수2)의 값으로 기존의 다른 변수(이하 변수1)를 할당한다면?
=> 둘 다 변수1의 주소를 가리킴
- 변수1의 값을 변경한다면?
=> 변수1은 새로운 주소를 가리키고(즉, 메모리가 새로 할당), 변수2는 이전의 변수1 주소였던 곳을 여전히 가리킴
=> js에서 원시타입은 변경이 불가능하기 때문에 새로운 주소를 가리키는 것임
- 자바스크립트는 가상머신으로 구성되어 있음
<가상머신>
- 힙 영역 : 참조 타입이 들어감(동적으로 크기 변경o)
- 콜 스택 영역 : 원시타입이 들어감([변수 = 주소, 값] 형태)
* 배열 같은 경우에는, 콜 스택의 값으로 힙 영역에 있는 배열의 주소가 들어가고, 힙 영역에서는 배열 주소와 배열 값들이 들어감
따라서 배열을 const 상수로 할당했다고 해도 push 등으로 조작 가능한 것이다!!
표현식과 연산자
- 자바스크립트는 표현식(Expressions)과 문장(Statements)으로 이루어짐
- 표현식 : 어떠한 결과 값으로 평가되는 식. 원시값(숫자, 문자열, 논리값), 변수, 상수, 함수 호출 등으로 조합할 수 있음
- 연산자 : 할당 연산자(=), 비교 연산자(true/false 반환), 산술 연산자(사칙연산..), 비트 연산자, 논리 연산자(조건문), 삼항 연산자(? : ), 관계 연산자(객체에 속성이 있는지 확인위함 / in), typeof
흐름 제어
- Control Flow
: 흐름을 제어하는 방법, 조건이나 반복으로 흐름을 제어하는 방법(cf. Data Flow)
- if
: 조건문에 false, undefined, null, 0, NaN, '' 는 거짓 조건이 됨
배열과 객체
배열
- new Array()
=> 매개변수로 1개의 숫자원소 : 배열의 길이, 초기화 되지 않은 undefined가 값으로 생성됨
=> 매개변수로 2개 이상의 원소 : 그 원소들로 이루어진 배열이 생성됨
<편의성 함수>
- fill
=> new Array(3).fill(n) 의 형태로 사용
=> 해당 배열의 모든 원소의 값을 n으로
- from
=> Array.from(Array(3), function(val, idx) {return }) 의 형태로 사용
=> 리턴되는 값으로 배열을 구성
- length
: arr.length=3 처럼 조작할 수 있지만 권장 x
- join
: arr.join(",") 의 형태로 사용
- reverse
: arr.reverse() 형태로 사용
* 기존 배열(여기서는 arr)에도 영향이 감에 주의
- concat
: arr.concat(brr)
<배열 추가/삭제>
- push
- pop
~ 맨 앞 원소의 추가/삭제 ~
- shift
- unshift
<배열의 부분원소>
- slice
: 배열의 부분 배열
: arr.slice(1,3) => arr의 1,2번째 원소로 이루어진 배열을 반환
* 원본 배열은 변경되지 않는다
- splice
: 배열의 부분 삭제
: arr.splice(2, 2) => 2번 인덱스부터 2개의 원소를 삭제한다
* 원본 배열을 변경하는 것임
<배열의 원소 순회>
- for of : for(val of arr) {} 형태로 사용
- 사실 배열의 타입은 객체이다
=> 그래서 arr[key] = value 형태로 값을 추가할 수 있다.
하지만 배열의 length는 변화하지 않는다(배열의 길이는 따로 관리되고 있기 때문), 그리고 이 방법은 권장하지 않는다.
객체
- new Object()
- 객체의 요소 추가 방법 => (1) obj[key] = value (2)obj.key = value
- 객체의 요소 삭제 => delete obj.key
- 객체의 요소 확인 => value in obj
- key 집합 확인 => Object.keys(obj)
- value 집합 확인 => Object.values(obj)
- 객체 순회 => for (key in obj)
스코프와 클로저
스코프
: 변수가 어디 범위까지 참조되는 지를 뜻함(= 유효 범위)
- 전역 scope, 지역 scope
- var는 함수 수준의 scope, const와 let은 블록 수준의 scope이다.
클로저
: 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될 때에도 기억한 스코프에 접근할 수 있게 함
- ex. 함수 내에 있는 지역 scope의 변수는 실행시점, 즉 함수 밖에서도 클로저를 통해 접근할 수 있다
- 클로저를 이용하여 내부 변수화 함수를 숨길 수 있다. (ex. 함수안의 변수를 밖에서 바로 사용하지 않고, 함수의 return문의 멤버의 값으로 할당한 뒤 밖에서 사용하는 방식)
'FrontEnd > Javascript' 카테고리의 다른 글
| TIL | JavaScript 주요 문법 (3) | 데브코스 5기 Day3 (0) | 2023.09.22 |
|---|
Comment