[Day 1] 자바스크립트 주요 문법 (1)

 

JavaScript와 프론트엔드 개발

1. JavaScript 탄생 배경

최초의 브라우저 : Tim Berners-Lee 에 의해 개발

최초의 상용 브라우저 : 네비게이터 

- Brendan Eich에 의해 Mocha라는 이름의 언어 개발 -> LiveScirpt -> JavaScript

 

2. JavaScript로 무엇을 할 수 있을까?

서버 개발, 앱 개발, 프론트엔드 개발 

 

3. 브라우저 동작 원리

1) 통신 : 서버와의 통신 - 브라우저가 요청을 보내면 서버가 응답함

2)  렌더링 : Dom(트리구조)이란 객체를 화면에 그리는 것 

3) 스크립트 실행 : 자바스립트 실행

 

4. 프론트엔드 개발자의 역할

1) 역할

- 브라우저에서 동작하는 UI를 개발하는 것

- 디자이너와 백엔드 사이 일정을 잘 조율하는 것이 필요 

 

2) 핵심 역량

- 커뮤케이션, ui, 네트워크, 보안, 브라우저, 디자인

- 컴퓨터 과학(cs), css, 단순 코더 지양

 

 

변수, 상수, 자료형, 그리고 메모리

1. 변수 : 하나의 데이터를 저장할 때 쓰이는 저장소

1) var 

- es6이전의 키워드로 권장하지 않음

- 선언된 변수는 자동적으로 호이스팅 된다.

 

2) let

- es6 이후 변수 선언 방식

- 블록 스코프 지역 변수를 선언

 

2. 상수 : 변하지 않는 변수 

- const 키워드를 사용한다.

 

3. 자료형

1) 종류

✅ 원시 값 : 불변 데이터

ⓐ Number : -(2^53 − 1)부터 2^53 − 1까지의 수, +Infinity, -Infinity, NaN

> 42 / +0
Infinity
> 42 / -0
-Infinity

- BigInt : Number보다 큰 범위의 수 선언 가능 

* Number와 BigInt간 혼합하여 사용할 수 없다.

 

ⓑ String : 텍스트를 나타날 때 사용, "" / '' 를 이용하여 표현함

- C언어와 같은 일부 프로그래밍 언어와 달리 JavaScript 문자열은 불변함

* 따라서 원본 문자열을 이용하여 새로운 문자열을 생성하는 식으로 해야함

 

ⓒ Boolean : True, False

ⓓ Null : 존재하지 않거나 유효하지 않은 값

ⓔ undefind : 값을 할당하지 않은 변수가 갖는 값

ⓕ Symbol 

 

✅ 객체

ⓐ Object : 키-값 쌍으로 이루어진 형태 

* 키는 무조건 문자열이다.

ⓑ Array : 여러 값을 가질 수 있는 타입, 인덱스를 통합 값 접근가능

ⓒ Function 

 

4. 메모리

1) 과정 : 할당 ▶ 사용 ▶ 해제

- 변수를 생성하면 메모리 한 구역에 메모리가 할당되며, 사용 후 해제할 수 있다.

- Garbage Collector 를 통해 사용하지 메모리를 자동해제 가능하다.

 

메모리 심화

let a = 3;
let b = a;

- 변수를 선언하면 그 식별자로 메모리를 할당 받는다.

- 새로운 변수에 선언했던 변수를 할당하면 같은 메모리 주소를 갖게 된다. 

- 자바스크립트에서 원시타입은 변경이 불가하기에 기존 값을 변경하는 것은 새로운 메모리에 할당하는 것과 같음

 

1.  Virtual Machine 가상 머신

ⓐ Heap :  참조타입

ⓑ Call Stack : 원시타입 스택 형태로 쌓인다.

- 배열을 생성할 시, 힙에 배열 영역이 생성되고, 콜스택에 있는 배열 변수가 힙 영역의 배열 메모리 주소를 참조한다.

- 힙 영역은 동적으로 크기가 변할 수 있음, 배열에 요소를 추가할 시 힙 메모리 영역에 그대로 할당 

 

2. Garbage Collector

- 사용하지 않는 메모리 해제 

- 현대 브라우저에서의 가비지 컬랙터는 mark and sweep 알고리즘 사용함

* mark and sweep : 닿을 수 없는 주소를 더 이상 필요없는 주소로 정의하고 지우는 알고리즘 

 

표현식과 연산자

1. 표현식

- 어떠한 결과 값으로 평가되는 식

- 원시값을 포함하며 변수, 상수, 함수 호출 등으로 조합 가능하다.

 

2. 연산자

1) 할당 연산자 : =, +=, -=, *=, /=, %=, <<=, >>=

2) 비교 연산자 : ==, !=, ===, !==, >, >=, <, <=

* ==는 값만 비교, ===는 자료형 까지 비교

3) 산술 연산자 : +, -, *, /

4) 비트 연산자 : &, |, ^(xor), ~, << , >>

5) 논리 연산자 : &&, ||, !

6) 삼항 연산자 : (조건식 ? 참 : 거짓)

7) 관계 연산자 : in

8) typeof : 피연산자의 타입 반환

 

흐름제어 

1. Control Flow

- 조건이나 반복을 통해 상태를 제어 하는것 

1) Control flow : Goto, If/Then/Else, Switch, Case, For, While

 

2) Data flow : Stateless, Recursion, Pipe

- 함수형 프로그래밍방식에서 구현이 가능

 

배열과 객체

1. 배열

1) 의미 : 연관된 데이터를 연속적인 형태로 저장하는 데이터 구조

2) 선언

const arr1 = new Array();
const arr2 = [];
const arr3 = [1,2,3,4,5];
const arr4 = new Array(5);
const arr5 = new Array(5).fill(5);  // [5, 5, 5, 5, 5]
const arr6 = Array.from(Array(5), function(v, k) { 
  return k+1;  // [1, 2, 3, 4, 5]
});

3) 추가/삭제

// 뒤에서 추가, 삭제
arr.push(7);
arr.push(7,8,9);
arr.pop(); 

// 앞에서 추가, 삭제
arr.shift();
arr.unshift(3);

3) 주요 메서드

ⓐ length() : 배열의 길이 반환

* length로 배열 요소를 조작할 수 있지만 권장x

let arr = [1,2,3,4,5,6];
arr["key"] = "value";

console.log(arr.length); // 6이 출력된다.

 

ⓑ reverse() : 배열의 요소를 뒤집음

- 원본 배열을 뒤집는다.

 

ⓒ join(구분 문자열) : 배열 요소를 합친다.

const arr = [1,2,3,4,5];
console.log(arr.join(", ")); // 1, 2, 3, 4, 5

ⓓ concat(arr1, arr2) : 배열 두 개를 합친다.

ⓓ slice(start, end-1) : 배열을 자른다.

const arr = [1,2,3,4,5];
const arr2 = arr.slice(2, 5); // [3, 4]

ⓔ splice(start, end-1) : 배열을 자른다(원본 배열 변경)

const arr = [1,2,3,4,5];
const arr2 = arr.splice(2, 5);
// arr2 = [3, 4, 5];
// arr = [1, 2];

 

4) 배열 순회

for(let i=0;i<6;i++){
  console.log(arr[i]);
}

for(const item of arr){
  console.log(item);
}

 

 

2. 객체 

1) 의미 : 여러 값을 키-값 형태로 결합시킨 복합  형태

2) 선언

const obj1 = new Object();
const obj2 = {};
const obj = {name:"이선협", company: "Cobalt. Int."};

3) 요소 추가/삭제

obj['email'] = 'kciter@naver.com";';
obj.phone = "010393939";

delete obj.phone;

4) 키에 해당하는 값 출력

console.log('email' in obj);
console.log('phnoe' in obj);

5) 키/값 출력

Object.keys(obj);
Object.values(obj); // 배열형식으로 출력

 

for(const key in obj){
  console.log(key, obj[key]);
}

* of는 사용하지 못한다. (obj가 iterable 하지 않기때문에)

 

 

스코프와 클로저

1. 스코프 

- 유효 범위라고도 부르며 변수가 어느 범위까지 참조되는 지를 뜻한다.

1) global scope : 함수 외부에서 선언된 변수로, 프로그램 전체에서 접근할 수 있는 변수

 

2) local scope : 함수 내부에서 선언된 변수로, 함수가 실행되면 만들어지고 함수가 종료되면 소멸하는 변수

* var 사용시 호이스팅 되어 변수 선언이 상단으로 올라가 버린다.

 

2. 클로저 

- 함수가 선언된 환경의 스코프를 기억하여 함수가 스코프 밖에서 실행될때에도 기억한 스코프에 접근할 수 있게 함 

- 은닉화 : 클로저를 이용하여 내부 변수와 함수를 숨길 수 잇음 

* 잘 알아야하는 이유 : 알기 힘든 버그를 잘 찾을 수 있음

function counting() {
  let i = 0;
  for(i=0; i<5; i++){
    setTimeout(function (){
      console.log(i);
    }, i*100);
  }
};

counting();

 - 위 코드를 출력하면 5만 5번 출력한다.

- 그 이유는 setTimeout()에 인자로 넘긴 익명함수는 0.1초후에 호출되는데,

  이미 0.1초 동안 반복문은 모두 순회하여 i 가 5가 되버렸기에 이미 5가된 i를 출력하게 되는 것이다.

 

👉 해결방법 1 IIFE(즉시 실행 함수 표현)

function counting() {
  let i = 0;
  for(i=0; i<5; i++){
    (function (number) {
      setTimeout(function (){
        console.log(i);
      }, i*100);
    })(i);
  }
};

counting();

 

👉 해결방법 2 : 매 루프마다 클로저 생성하게 하기

function counting() {
  for(let i=0; i<5; i++){
    setTimeout(function (){
      console.log(i);
    }, i*100);
  }
};

counting();