JavaScript 엘리 드림 코딩 3강 정리

자바스크립트 스터디를 진행하면서 아래와 같이 정리 중이다.

3강 정리

• 변수선언 let
  • 자바스크립트에서 변수를 선언할때는 ES6 이후로이전에는 var 를 사용해서 변수를 선언했지만
  • var hoisting 문제가 발생하기에
  • let 하나만 존재한다
  • (hoisting promlem?)선언한 함수의 위치가 최상단이든 최하단이든실행되기전에 함수안에 필요한 변수값들을 모두 모아var 은 호이스팅이되는데
  • let 은 안된다 라고 알면될듯하다
  • 최상단에 선언하는것
  • (블록스코프제외)
  • 호이스팅이란?
  • ES6 에선 let 만 사용하기로 약속var 은 블록스코프가 적용이 안됩니다
  • 더이상 var 을 사용하지말라고 하네요 ㅎㅎ
  • 블록스코프란?{ } 안에서 선언한 변수를 호출하면var 은 호출이됩니다
  • 호출이 안되야하는데
  • { }안에 변수를 선언하고 { } 밖에서
  • Ecma Script 6 란 자바스크립트 표준화를 위한 약속들을 의미한다
• 예시 코드 
• // 2.variable // let ES6 에서 추가된 문법 let globalName = 'global name' { let name = 'jungwon' console.log(name) name = 'james' console.log(name) console.log(globalName) // 블록밖에서 선언한 변수는 출력안됨 } console.log(name) // 블록안에서 선언한 변수는 출력이 안된다 console.log(globalName)​

---

• 값이 변하지 않는 constants
  • 변하지 않는 데이터타입을 선언할때 사용선언한 변수의 데이터값을 변경할수있지만
  • let 같은경우 변수를 선언하고
  • const 로 선언하면 값을 변경하지못한다
  • const = immutable 하다
• 예시코드

  // 3. constants
  // 변하지않는 데이터 타입을 선언할때 사용
  // 장점에 대해 조사
  const notChangeData = 7;
  const maxNumber  = 10;
  console.log(notChangeData)
  console.log(maxNumber)
  
  notChangeData = 1
  maxNumber = 5
  console.log(notChangeData)
  console.log(maxNumber)​

---

• Variable Types
  • 변수의 타입들은 어떤언어든
  • primitive, object 타입들로 구분이된다
  • 자바스크립트의 경우 function 이라는 타입도 존재

---

• Number Type
  • 저는 c언어나 Java 를 경험해보지못햇지만각각의 타입마다 할당하는 bytes 의 값도 다르다고합니다그로인한 속도저하나 상승 이롭거나 해로운 점이 존재한다고합니다
  • bytes 값이 다를경우 메모리에 할당하는 데이터의 용량도 다르며
  • c, java 에서는 number 타입에도 여러가지가 있으며
  • 자바스크립트에선 위에서 언급한 내용과는달리정수, 소수점으로 이뤄진 정수 든 모두 다 Just Number 일뿐
  • 만약에 Ts 를 사용하던들 그냥 타입지정을 number 라고 해주면됩니다
  • number 타입 하나만 존재합니다
  • number type 의 결과중 무한한 수가 나올경우는 infinity 라는 값이 리턴되고 숫자가 아닌 값이 나올경우는 숫자가 아니라는 값 NaN 이 리턴
• 예시코드

  // number type
  const count = 10  // 정수
  const size = 10.1 // 소수점
  console.log(`value : ${count}, type : ${typeof count}`)
  console.log(`value : ${size}, type : ${typeof size}`)
  
  const infinity = 1 / 0  // 무한한값이 나올경우 
  const negativeInfinity = -1 / 0 // 음수인 무한한값 
  const nAn = 'not a number' / 2 // 숫자가아닌 타입을 나눌경우
  console.log(infinity)
  console.log(negativeInfinity)
  console.log(nAn)​

---

• String Type
  • 말그대로 문자열인 타입을 나타낼때 씁니다말그대로 문자열일뿐...
  • 추가적인 내용이없어서 MDN 에 들어가서 Refernce 할만한 자료들을 찾아봤지만
• 예시코드

  // string type
  const char = 'c'
  const jungwon = 'jungwon'
  const sayHi = 'hi' + jungwon
  console.log(`value : ${sayHi}, type : ${typeof sayHi}`)
  const sayHello = `hello ${jungwon}`
  console.log(`value : ${sayHello}, type : ${typeof sayHello}`)​

---

• Symbol Type
  • 심볼 타입은 let 과 동일하게 ES6 때 추가된 타입입니다
  • 예시코드에서는 특정 키값을 생성할때 사용했는데
  • 알고보면 심볼은 클래스나 객체타입에서만 사용가능합니다
  • 심볼은 자바스크립트 런타임환경내에서 Symbol()
  • 함수를 호출하여 생성할수있고 동적으로 익명의 고유한 키값을 만듭니다
  • 두개의 심볼을 같은함수로 호출해도
  • 런타임환경내에선 서로 값과 타입이 다르다고 말하고있습니다
  • symbol 은 new 연산자를 사용하지않습니다
  • .for 는 해당 키로 저장된 symbol 이 없으면 새로운 symbol 을 만들고.for 를 통해 생성된 symbol 은 키값이 존재
  • 그냥 symbol 을 사용해서 만든 symbol 은 키값이 존재하지않습니다
  • 저장된 symbol 이 있으면 해당 symbol 을 반환합니다
• 예시코드

  // Symbol
  {
      const symbol1 = Symbol('id')
      const symbol2 = Symbol('id')
      console.log(symbol1 === symbol2)
  		const symbol3 = Symbol.keyFor(symbol1)
  		console.log(symbol3) // undefined
  } // 블록스코프로 나타낸이유는 위아래 선언한변수명이 겹친다고해서
  	// 불가피하게 블록스코프로 설정
  
  const symbol1 = Symbol.for('id')
  const symbol2 = Symbol.for('id')
  console.log(symbol1 === symbol2)
  const symbol3 = Symbol.keyFor(symbol1)
  console.log(symbol3) // id
  console.log(`value : ${symbol1.description}, type : ${typeof symbol1}`)

---

• Dynamic Typing
  • 자바스크립트는 동적타입의 언어입니다 변수의 타입지정없이 (c 나 Java 처럼) 값이 할당되는 과정에서 자동으로 변수의 타입이 바뀌거나 결정됩니다 즉 변수는 고정된타입이 없습니다 같은변수에 여러타입의 값을 자유롭게 할당가능합니다
  • 이과정에서 error 가 발생할수도있습니다 이를 막기위해 Type Script 를 사용합니다
• 예시코드

  // 다이나믹 타이핑 타입스크립트를 사용하게된 계기랄까
  let text = 'hello'
  console.log(text.charAt(0))  // h 인덱스의 순서는 항상 0 부터 스트링이니깐 가장앞에꺼
  console.log(`value : ${text}, type : ${typeof text}`)
  text = 1
  console.log(`value : ${text}, type : ${typeof text}`)
  text = '7' + 5 // 스트링에 5를 더한다는걸 인지 그냥 스트링 + 스트링으로 바꾸버림
  console.log(`value : ${text}, type : ${typeof text}`)
  text = '8' / '2'  // 스트링 8에 스트링 2를 나눈다고? 아마 그럼 숫자를 나누겟지 하고 number타입으로 바꿔버림
  console.log(`value : ${text}, type : ${typeof text}`)
  // console.log(text.charAt(0)) // 중간에 number 타입으로 바뀌엇기에 인덱스 순서를 메길수없음​

---

• Object
  • Boolean, Number, BigInt, String, Symbol, Object 모두 다 모두 Objcet 타입의 인스턴스들이라고 합니다 null 과 undefined 는 인스턴스가 아니라고 합니다
  • 객체는 변수라고합니다 객체에는 많은값이 포함될수있습니다
  • 객체는 {} 표기로 만듭니다
  • 객체는 각각의 key/value 에 대한 정보를 나열합니다
  • key 는 문자열 또는 기호여야합니다
  • value 는 모든 유형이 가능합니다
  • 한쌍의 key/value 뒤에 ,(쉼표) 를 이용하여 그뒤에오는 key/value 와 구분해야합니다

객체는 사실상 엄청난 설명이 필요하지만 엘리님의 드림코딩에선

키밸류로 이뤄져있고 const 로 선언한 변수의 값은 변경못하지만

해당 변수의 key/value 의 값은 변경가능하다고 설명하는것같습니다

객체에 대해 더 궁금하신분은

밑에 Ref 자료 에서 확인하시면 좋을것같습니다

내용이 방대하여 못적습니다