프론트엔드 기초: JavaScript (1)

/date 24.10.21.

 

실습 환경 세팅하기

• 브라우저와 개발자 도구: 브라우저에서는 개발자 도구 제공. 여러 가지 탭을 통해 여러 기능 제공.

 

 

자바스크립트 훑어보기

• 자바스크립트 특징 - 인터프리터 언어: 컴파일 단계가 없음. 컴파일러 언어에 비해 실행 속도가 느림 : 모던 브라우저 내의 V8엔진에선 속도 개선됨

• 그 외 특징
  • 동적 타입 언어: 변수에 들어가는 값에 따라서 런타임에 타입이 추론됨
  • 함수는 일급 객체: 객체와 동일하게 사용되며, 함구는 값과 동일하게 취급
  • 프로토타입 기반 상속: 언어가 갖고 있는 프로토타입 체이닝 구조를 통하여 상속 가능
  • 다양한 프로그래밍 패러다임 지원: 명령형, 함수형, 객체지향형

• 자바스크립트의 탄생배경과 ECMAscript: 스크립트 언어를 표준화하고자 하는 필요성에서 출발

 

 

데이터와 변수

• 변수란?: 데이터를 처리하는 과정에서 데이터를 기억하기 위해 메모리를 활용. 위치를 찾기 위해서는 메모리의 주소값을 활용. 메모리 주소값을 대신할 식별자를 지정하고, 식별자를 통해서 데이터에 접근함. 여기서 말하는 식별자가 변수.

• 변수 생성 방법과 호이스팅: 변수는 선언 단계, 초기화 단계, 할당 단계를 거쳐 생성된다. 변수의 키워드별로 다르게 동작.
  • var ⇒ 코드 평가 단계에서 선언과 동시에 초기화 실행, 코드 실행 단계에서 할당 단계 거침
    → 단점: 키워드 생략 가능, 중복 선언 가능, 변수 호이스팅, 전역변수화(무분별한 변수 접근)
    → 때문에 사용 지양, const나 let 주로 써야 함
  • 호이스팅? 모든 선언문이 해당 scope의 선두로 옮겨진 것처럼 작동되는 것
  • const: 수정 불가. 무조건 값 할당. 상수 변수 선언.
  • let: 재할당 가능, 값을 할당하지 않아도 생성 가능

• 변수 네이밍 컨벤션: Camel Case(소문자로 시작, 대문자로) / Snake Case(언더바로 소문자 연결) / Pascal Case(대문자로 시작) / Constant Case(모든 글자 대문자, 언더바로 연결)

 

 

데이터와 형태

• 데이터의 종류 - 자료형: 자바스크립트는 원시 타입과 객체 타입을 제공.
  • 원시 타입: 총 7가지. 값은 변경 불가능, 값으로써 전달(not 참조)
  • 객체 타입: 원시 타입 제외 전부. 참조방식으로 전달됨. 속성을 변경할 수 있는 mutable 한 값

• Number, BigInt

Number: 모든 숫자를 실수로 처리. 정수 타입 없음. 실수를 연산할 때 근사값으로 처리됨. Infinity는 무한대를 나타내는 숫자, NaN은 숫자가 아닌 경우

 

• String Boolean

String: 텍스트 데이터 나타낼 때 사용. 각 요소가 string의 한 자리, 0번째 index부터 시작. 따옴표나 백틱으로 감싸서 표현

Boolean: 참 또는 거짓의 값만 갖는 논리적 표현

 

• undefined, null, symbol

undefined: 값을 할당하지 않은 경우

null: 값이 없다는 것을 의도적으로 표현할 때. 타입체크는 일치연산자(===)를 활용해야 함

symbol: 전용 객체의 키로 활용

 

• Reference Type

객체 타입이라고도 부름. 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조. 원시 타입의 값을 제외한 모든 것을 객체라고 함. mutable

 

• 동적 타입 언어

명시적 타입 변환: 원시 래퍼 객체를 활용하여 개발자가 의도적으로 타입을 변경할 수 있음

암묵적 타입 변환: +””, *1처럼 강제 타입 변환 일어나는 경우가 있음.. 많은 혼선을 일으키기도 함 → 불필요한 디버깅 시간이 발생하기도. type guard를 하거나 타입스크립트를 활용하는 것도 ㄱㅊ

 

 

데이터 처리: 연산자

• 단항 연산자, 산술 연산자

연산자는 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다

단항 연산자: 하나의 피연산자만 사용하는 연산. void, typeof, delete

산술 연산자: 단항 산술 연산자 = 1개의 피 연산자를 산술 연산하여 숫자값을 반환(++, —, +, - 등) / 이항 산술 연산자 = 2개의 피 연산자를 산술 연산하여 숫자값을 반환(덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 등)

• 관계 연산자, 비교 연산자

관계연산자: 피연산자를 비교, 결과가 참인지에 따라 boolean 값을 반환 (in, instanceof)

비교 연산자: 비교 → 결과가 참인지에 따라 booelan 값을 반환. (==, ===, !=, !==) 2, 4는 타입까지 체크. 부등호도 여기 포함됨

• 논리 연산자, 기타 연산자들

논리 연산자: 반환되는 값이 무조건 불리언은 아님. && || 가 여기 속함. 단축평가 논리 존재(첫 번째 식을 평가한 결과에 따라서 두 번째 식 평가 및 실행)

기타 연산자: 쉼표 연산자, 문자열 연산자, 옵셔널 연산자, 할당 연산자(+= 등), 삼항 연산자(조건 연산자에 따라 두 값 중 하나를 반환)

 

 

데이터 처리: 함수

• 재사용 처리기, 함수

함수: 소프트웨어에서 특정 동작을 수행하는 코드 일부분. 외부 코드가 호출할 수 있는 하위 프로그램이기도 함. 자바스크립트에서는 괄호를 사용하여 호출

자바스크립트의 함수: 일급객체(일반적으로 적용 가능한 연산을 모두 지원하는 객체 → 함수의 실제 매개변수가 될 수 있음, 반환값이 될 수 있음, 할당명령문의 대상이 될 수 있음, 동일비교의 대상이 될 수 있음)

• 함수의 생성과 사용 패턴

생성 방법: 함수 선언문(가장 자주 활용), 표현식,function , 화살표 함수