deep js - 1일차

UTD 2024. 5. 17. 18:10

04 변수

4.1 변수란 무엇인가? 왜 필요한가?

변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 or 그 메모리 공간을 식별하기 위해 붙인 이름

-> 값을 가리키는 상징적인 이름

let result = 300

result = 변수이름(식별자)

300 = 변수 값

변수에 값을 저장하는 것 = 할당(대입, 저장)

변수에 저장된 값을 읽어 들이는 것 = 참조

4.2 식별자

식별자 = 어떤 값을 구별해서 식별할 수 있는 고유한 이름

식별자는 값이 아니라 메모리 주소를 기억

4.3 변수 선언

변수를 사용하려면 반드시 선언이 필요, 변수를 선언할 때는 var, let, const 키워드를 사용

var 키워드로 선언한 변수는 값을 할당하지 않아도 undefined로 초기화

선언하지 않은 식별자에 접근하면 ReferenceError(참조에러)가 발생

ReferenceError 식별자를 통해 값을 참조하려 했지만 자바스크립트 엔진이 등록된 식별자를 찾을 수 없을때 발생하는 예

4.4 변수 선언의 실행 시점과 변수 호이스팅

변수 호이스팅

ex) cosole.log(score) ; //undefined

var score ; // 변수 선언문

참조 에러 x , undefined 뜸

-> 변수 선언이 런타임 이전에 먼저 실행 되기 때문.

모든 식별자(변수,함수, 클래스 등)는 호이스팅 됨.

4.5 값의 할당

변수에 값을 할당(대입,저장)할 때는 할당 연산자 =를 사용

할당연산자는 우변의 값을 좌변의 변수에 할당.

var score; //변수 선언

socre = 80 ; // 값의 할당

변수 선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행

값의 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에 실행

4.6 값의 재할당

값을 재할당 할수 없어서 변수에 저장된 값을 변경 할수 없다면 변수 가 아닌 상수(const(반드시 상수만을 위해 사용x 뒤에 가면 이유 나옴 15.3절 const)

값의 재할당 이전 불필요한 값들은 가비지 콜렉터에 의해 메모리에서 자동 해제된다.

단, 메모리에서 언제 해제 될지는 예측 x

4.7 식별자 네이밍 규칙

식별자는 특수문자 제외한 문자, 숫자, 언더스코어(_), 달러 기호($)를 포함 할 수 있음

단, 식별자는 특수문자를 제외한 문자, 언더스코어(_), 달러 기호($)로 시작, 숫자로 시작하는 것은 허용 x

예약어는 식별자를 사용 할 수 없다.

예약어는 프르그래밍 언어에서 사용되고 있거나는 사용될 예정인 단어

ex) function,await ...

코드 전체의 가독성을 높이려면 카멜 케이스와 파스칼 케이스를 따르는 것이 유리.

05 표현식과 문

개념을 이해한다는 것은 바로 용어를 정확히 이해하고 설명할 수 있다는 것.

5.1 값

값은 식(표현식)이 평가되어 생성된 결과

ex) 10 + 20 ; // 30

변수에 할당 되는 것은 값

5.2 리터럴

리터럴 = 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 생성하는 표기법

ex) 3 // 숫자 리터럴 3

5.3 표현식

표현식은 값으로 평가될 수 있는 문

즉, 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조

즉, 값으로 평가될 수 있는 문은 모두 표현식이다.

-> 표현식과 값은 동치

5.4 문

문은 프로그램을 구성하는 기본 단위이자 최소 실행단위

var sum = 1+2 ; //전체가 문

문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있음

5.5 세미콜론과 세미콜론 자동 삽입기능

세미클론(;) 문의 종료를 나타냄/ 생략가능 => 자바스크립트 엔진이 세미콜론 자동 삽입 기능 암묵적으로 수행

5.6 표현식인 문과 표현

표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는 것.

표현식인 문은 값으로 평가되므로 변수에 할당 o

표현식이 아닌 문은 값으로 평가x 변수에 할당하면 에러가 생김

ex) var foo = var x ; // syntaxError; Unexpected token var

06 데이터 타입

es6는 7개 데이터 타입 제공 - > 원시 타입(숫자, 문자열, 불리언, undefined, null, 심벌)과 객체 타입(객체, 함수, 배열)으로 분류

6.1 숫자 타입

자바스크립트는 독특하게 하나의 숫자 타입만 존재

모든 수를 실수로 처리하며, 정수만 표현하기위한 데이터 타입이 별도로 존재 x

6.2 문자열 타입

문자열 타입은 텍스트 데이터를 나타내는 데 사용

0개 이상 16비트 유니코드 문자(UTF-16)의 집합으로 전 세계 대부분의 문자 표현 가능

6.3 템플릿 리터럴

템플릿 리터럴은 멀티라인 문자열, 표현식 삽입, 태그드 템플릿등 편리한 문자열 처리 기능을 제공

백틱 ` ` 이거

6.4 불리언 타입

참(true) & 거짓(false) 뿐

6.5 undefined 타입

undefined가 유일

var 변수 선언시 호이스팅으로 인해 undefined로 초기화 되는 것.

변수에 값이 없다는 것을 표현 하고 싶으면 null 을 사용.

변수는 선언, 함수는 정의로 표현됨.

6.6 null 타입

null은 유일

함수가 유요한 값을 반환 할 수 없는 경우에 명시적으로 null을 반환하기도 한다고 함.

6.7 심벌 타입

es6에서 추가됨 .

-> 변경 불가능한 원시 타입의 값 / 심벌 값은 다른 값과 중복되지 않는 유일무이한 값

->33장 심벌에서 자세히

6.8 객체 타입

자바스크립트를 이루고 있는 거의 모든 것이 객체.

6.9 데이터 타입의 필요성

변수에 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정되기 때문.

ECMAScript 사양은 문자열과 숫자 타입 외의 데이터 타입의 크기를 명시적으로 규정 x

-> 문자열, 숫자 타입을 제외한 자바스크립트 엔진 제조사의 구현에 따라 다를 수 있음

6.10 동적 타이핑

6.10.1 동적타입 언어와 정적 타입 언어

정적타입언어는 변수를 선언할 때 변수에 할당할 수 있는 값의 종류, 즉 데이터 타입을 사전에 선언

자바스크립트는 정적 타입 언어와 다르게 변수를 선언할 때 타입을 선언하지 않는다. 다만 var, let, const 키워드를 사용해 변수를 선언할 뿐임. 자바스크립트 변수는 어떠한 데이터 타입의 값이라도 자유롭게 할당 가능

foo = null;

console.log(typeof foo); // object

즉, 자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정(타입추론)된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다. 이러한 특징을 동적 타이핑 혹은 자바스크립트를 동적 타입 언어라고 함.

6.10.2 동적 타입 언어와 변수

변수를 사용할 때 주의할 사항

* 변수는 꼭 필요한 경우 제한적 사용

* 변수의 유효 범위(스코프)는 최대한 좁게 만들어 변수의 부작용을 억제

* 전역 변수는 최대한 사용하지 않도록

* 변수보다는 상수를 사용해 값의 변경을 억제

* 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍

&&가독성 좋은 코드가 좋은 코드.

7.1 산술 연산자

7.1.1 이항 산술 연산자

ex) +, -, *, /, %

7.1.2 단항 산술 연산자

ex) ++ , --, +, -

숫자 타입이 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환

+ = parseInt

7.1.3 문자열 연결 연산자

+ 연산자 사용 시 하나이상이 문자열인경우 문자열 연결 연산자로 동작

7.2 할당 연산자

할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당

ex) x +=5 // x = x+5 와 같음

7.3 비교 연산자

7.3.1 동등/일치 비교 연산자

동등 비교(==) 연산자는 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치 시킨 후 같은 값인지 비교

동등 비교 연산자는 타입변환으로 인한 예측하기 어려운 결과를 만들어내기 때문에

대신 일치 비교 ( ===) 연산자를 사용

일치 비교(===)연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환

일치 비교 연산자에서 주의할 것은 NaN

NaN은 자신과 일치하지 않는 유일한 값. 숫자가 NaN인지 조사하려면 Number.isNaN을 사용

7.4 삼항 조건 연산자

조건 ? 조건 true 일때 반환 값 : 조건 false 일때 반환 값;

삼항 조건 연산자 표현식은 값처럼 사용할 수 있지만 if...else 문은 값처럼 사용할 수 없다

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다

7.5 논리 연산자

||(논리합) , &&(논리곱), !(부정)

드 모르간 법칙 유용

! ( x || y) === ( ! x && !y)

7.6 쉼표 연산자

7.7 그룹 연산자

' ( )' 소괄호 먼저 평가.

7.8 typeof 연산자

typeof null // null이 아닌 ''object''를 반환한다는 것 주의

7.9 지수 연산자

** 이에이승

7.10 그외 연산자

?. 옵셔널 체이닝

?? null 병합연산자

delete

new

instanceof

7.11 연산자의 부수 효과

부수 효과가 있는 연산자는 할당 연산자(=), 증가/감소 연산자(++/--), delete 연산자

7.12 연산자 우선순위

1st가 ( ) 이것인 것만 알면 됨.