23-07-04 회고록

🚩 변수와 상수

변수(variable)를 사용하는 이유

• 코드의 유지보수에 좋습니다.
• 성능 이슈를 위해 사용 합니다.

선언방법

1. let
2. const
3. var

 

선언부와 할당부
let name = ‘hello’;

let name: 선언부

=            : 대입(할당) 연산자

'hello'     : 할당부

 

let user = 'John', age = 25, message = 'Hello';

위와 같이 한 줄에 여러 변수를 선언하는 것도 가능하지만

가독성을 위해 아래와 같이 한줄에 하나의 변수를 작성하는 것이 좋습니다.

let user = 'John';
let age = 25;
let message = 'Hello';

이 외에도 let은 하나만 사용하고 나머지 변수를 ,(쉼표)를 통해 선언하는 방식인

Single let pattern 을 사용 하는 개발자 분들도 있습니다.🙊

EX)
let user = 'John',
  age = 25,
  message = 'Hello';

현업으로 뛰어들게 되면 여러 사람과 함께 협업을 해야 하기 때문에

여러 방법들을 알아두고 익혀두는 것이 좋을것 같습니다.👀

 

변수를 두 번 선언하면 에러⛔가 발생합니다.

변수는 한 번만 선언해야 합니다.

같은 변수를 여러 번 선언하면 에러가 발생합니다.

let message = "This";

// 'let'을 반복하면 에러가 발생합니다.
let message = "That"; // SyntaxError: 'message' has already been declared

하지만❗ var는 여러번 선언해도 에러가 발생하지 않습니다.

---

🚩 변수 명명 규칙

1. 문자와 숫자, 기호 $와 _만 사용가능 합니다.
2. 첫 글자는 숫자가 올 수 없습니다.
3. CamelCase 를 주로 사용합니다.(ex. myVeryLongName)
4. 대소문자 구별이 중요합니다. (box와 Box와 BOX는 서로 다른 변수)
5. 예약어는 변수명으로 사용할 수 없습니다. (ex. continue, break, count, let..)

let userName;
let test123;

// 잘못된 변수
let 1a;
let my-name;

---

🚩 상수, 대문자 상수(찐상수)

const(constant) : 변하지 않는 변수 선언 / const 로 선언한 변수 = 상수❗ 

소소한 팁(?)

변수는 덮어쓰기가 가능하기 때문에 협업에 불리할 수도 있습니다. 그래서 상수를 권장 한다는 말을 들었습니다.

 

대문자 상수 = 찐상수 (런타임 전에 이미 알고 있는 상수: 하드코딩한 값)

• 런타임 - 자바스크립트가 웹브라우저 엔진에 의해 해석되는 시간을 말합니다.

아래의 코드중 바뀔 수 있는 값들을 let으로 선언 하였습니다.

바뀌지 않고 고정적인 값들은 const로 선언해 보았습니다. 

// - 구매 제품 가격의 총 합
let totalProductPrice;

// - 구매 결제 내역
let paymentHistory;

// - 구매 결제 여부 ( 했어 안했어 / 있어 없어 )
let isPayment = true;
let hasClassName = false;

// - 1년 기준 일(day)자 수
const DAYS_PER_YEAR = 365;

// - 브랜드 접두사
const BRAND_PREFIX = 'NIKE';

---

🚩 엄격 모드(Strict Mode)

모던 자바스크립트를 사용하기 위해 엄격모드를 사용합니다.

 

☝"use strict"는 반드시 최상단에 위치시켜야 스크립트 전체가 “모던한” 방식으로 동작합니다.

👀그렇지 않으면 엄격 모드가 활성화되지 않을 수도 있습니다.

alert("some code");
// 하단에 위치한 "use strict"는 스크립트 상단에 위치하지 않으므로 무시됩니다.

"use strict";
// 엄격 모드가 활성화되지 않습니다.

---

🚩 전역 객체(Global This)

window	브라우저 전역객체
global	node 전역객체

 

브라우저 환경에선 전역 객체를 window

Node.js 환경에선 global라고 부르지만 각 호스트 환경마다 부르는 이름은 다릅니다.

 

표준은globalThis 로 부릅니다

---

🚩오래된 var

var는 블록 스코프가 없습니다.

var로 선언한 변수의 스코프는 함수 스코프이거나 전역 스코프입니다.

블록 기준으로 스코프가 생기지 않기 때문에 블록 밖에서 접근 가능합니다.

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

코드 블록이 함수 안에 있다면, var는 함수 레벨 변수가 됩니다.

 

var, let, const → 함수 밖으로는 나가지 못해서 에러가 발생합니다.🙊⛔

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

 

함수 스코프 : function a { }

블록 스코프 : { }

scope - 변수의 사용 범위

블록({ } 안)과 함수 스코프가 있음

---

🚩 데이터 타입 ( Data Types )

소소한 꿀팁(?)

array, function은 자료형이 아니라 객체입니다.

 

숫자형

정수, 부동 소수점 숫자 등의 숫자를 나타냅니다. Infinity ( 무한대 ), -Infinity,NaN ( Not a Number )

let n = 123;
n = 12.345;

문자형

자바스크립트에선 문자열(string)을 따옴표로 묶습니다.

let str = "Hello";
let str2 = 'Single quotes are ok too';
let phrase = `can embed another ${str}`;



let name = "John";

// 변수를 문자열 중간에 삽입
alert( `Hello, ${name}!` ); // Hello, John!

// 표현식을 문자열 중간에 삽입
alert( `the result is ${1 + 2}` ); // the result

따옴표는 세 종류가 있습니다.

1. 큰따옴표: "Hello"
2. 작은따옴표: 'Hello'
3. 역 따옴표(백틱, backtick): `Hello`

불린형

불린형(논리 타입)은 true와 false 두 가지 값밖에 없는 자료형입니다.

let nameFieldChecked = true; // 네, name field가 확인되었습니다(checked).
let ageFieldChecked = false; // 아니요, age field를 확인하지 않았습니다(not checked)

null

null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값입니다.

 

undefined

undefined는 '값이 할당되지 않은 상태’를 나타낼 때 사용합니다.

변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당됩니다.

객체형

객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있습니다.

심볼형

객체의 고유한 식별자(unique identifier)를 만들 때 사용됩니다. 

BigInt

BigInt형은 표준으로 채택된 지 얼마 안 된 자료형으로, 길이에 상관없이 정수를 나타낼 수 있습니다.

BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있습니다.

// 끝에 'n'이 붙으면 BigInt형 자료입니다.
const bigInt = 1234567890123456789012345678901234567890n;

소소한 꿀팁(?)

1. 2**53 - 1 - 가장 큰 안전한 정수(MAX_SAFE_INTEGER)

Number.MAX_SAFE_INTEGER

 

2. null직접 할당할 때 사용합니다.

undefined는 할당되지 않은 변수의 초기값입니다.'

 

typeof 연산자

typeof undefined // "undefined"

typeof 0 // "number"

typeof 10n // "bigint"

typeof true // "boolean"

typeof "foo" // "string"

typeof Symbol("id") // "symbol"

typeof Math // "object"  (1)

typeof null // "object"  (2) : null 대신에 obje오류, 하위 호환성 때문에 남겨둠.

typeof alert // "function"  (3) : 오류, object에 호환. 하위 호환성

typeof 는 사칙 연산자보다 우선순위가 높음

typeof 1 + 2  => “number” + 2  => 결과:“number2”

 

💯한줄평

오래된 var 부분에서 전역변수와 지역변수의 개념을 이해하는데에 어려움이 있었다. 하지만 정리를 통해 이해를 하게 되어서 다행이다.