[URECA] DAY 5 | JavaScript(2)

⭐ var, let 그리고 const 차이점 ⭐

범위	재선언	재할당	호이스팅	this 바인딩
var	x	o	o	o
let	o	x	o	x
const	o	x	x	x

 

뭐가 좋냐? 봄이 좋냐?

let과 const는 블록 스코프를 갖는다. (해당 블록안에서만 유효하다.)

let과 const는 재선언 불가능하다.

let과 const는 선언 전에 사용할 수 없다.

let과 const는 this에 바인딩되지 않는다. (객체의 this 키워드와 연결되지 않는다.)

let과 const는 호이스팅되지 않는다.

바로 선언한 블록은 글로벌 스퍽을 갖는다?

 

스코프

{
  // 글로벌 변수로 선언됨됨
  var aa = 100;
}

// 소괄호를 갖으면 전부 function이다.  {}<-코드 블록을 갖게된다.
function bb() {
  console.log(window.aa);
}

// 코드 블록을 수행해라라
bb();
window.bb; //다 윈도우 소속이다.

 

var는 무조건 글로벌 스코프갖는다. 

글로벌 스코프란?
코드 전체에서 접근 가능한 범위를 의미한다. 
브라우저 환경에서는 전역 스코프에 선언된 변수들이 window 객체에 포함되며, 어디서든지 접근가능하다 .

 

거꾸로 해도 유용하다. 그것이 호이스팅이다!

사용 a = 10;

선언 var a = 10; var는 loose하다.

loose한 문법을 없애고 싶어서 let과 const가 나왔다.

let aa = 1000;
{
  let aa = 100;
  console.log(aa); //100출력력
}

function bb() {
  console.log(aa);
} // 1000출력력

window.bb(); //다 윈도우 소속이다.

 

 

변수선언하지 않고 사용부터 하면 referenceError 참조에러 발생 (var는 제외)

 

let이나 const도 호이스팅이 된다. 하지만 초기화는 안되어서  referenceError가 발생한다. 그래서 "호이스팅이되지 않는것처럼 동작"한다. 이를 Temporal Dead Zone(TDZ)라고 한다. 

 

초기화는 변수를 선언하면서 값을 할당하는 과정을 말한다.  선언할때 할당을 하는걸 보고 초기화라고 한다

var x ; // 선언
var x = 5; // 선언과 동시에 값 할당
var y = 7;

---

배열

 

배열은 아이템 수많은 연속된 애를 갖는다. 

배열은 65배트

객체                                  코드

 

stack                                 기타

 

cars[0] = "Toyota"

오른쪽에 있는 값을 왼쪽에 할당한다.

 

cars.push("Audi");

 

원본배열의 아이

---

객체

자바스크립트에서 객체를 표현하는 방법 {중괄호} 사용

{ <- 객체표현
	type <- 객체의 프로퍼티 : 뒤에 값 (값은 다양하게 표현 가능)
}

 

1. 객체 표현 { }로 객체 정의

2. 객체의 프로퍼티 : 객체 안에서 속성 이름을 말하며, 이를 type과 같은 형태로 표현

3. 값: 각 프로퍼티에 할당된 값은 숫자, 문자열, 배열, 다른 객체 등 여러 행태로 나타낼 수 있다.

const obj = {
  age: 24,            // 숫자
  hobbies: ['코딩', '재즈'], // 배열
  address: {          // 객체
    city: '서울',
    zipCode: '77777'
  }
};

 

---

JavaScript의 데이터유형

• String
• Number
• Boolean
• Undefined
• Null → 객체 오류
• Symbol
• Object

* 객체 데이터 유형은 내장 객체와 사용자 정의 객체가 모두 포함되어 있다. 

내장객체는 객체, 배열, 날짜, 맵, 세트 등등

 

📌숫자와 문자열을 더할 때는 JS는 문자열로 처리한다. 

let x = 16 + "Volvo"; //16Volvo
let x = "Volvo" + 16; // Volvo16
let x = 16 + 4 + "Volvo"; //20Volvo WHY? "Volvo"에 도달할때까지 16과 4를 숫자로 처리
let x = "Volvo" + 16 + 4; // Volvo164 WHY? 첫번째 피연산자가 문자열이므로 모두 문자열 Baaam!

 

---

함수

function myFunction(p1, p2) { // p1, p2는 파라미터
  return p1 * p2;
}

///////////////////////////////////

//1. 함수 정의
function name(파라미터) {
    // 함수 내용
}

// function 키워드를 사용해 함수를 정의
// name은 함수 이름, 파라미터는 함수가 받을 값
// 파라미터는 선택사항, 함수가 실행될때 사용자가 값을 전달 가능

// 2. 함수 호출
let value = name();
// name()은 name 함수를 호출하는 부분
// 소괄호()안에 함수를 호출할 때 필요한 인자(값)을 넣을 수 있다.
// 위에는 인자 값이 없으므로 빈 ()로 호출
// name() 함수가 실행되면 반환된 값이 value 변수에 저장된다.

// 정리, 함수는 function 키워드를 정의하고, 정의된 함수를 () 소괄호를 사용해 호출하여 실행한다.

 

myFunction(1,2) -> 1,2는 값이다.

const a = myFunction(1,2);

a = 3

let이랑 const는 어느 것이 선호되냐? 성능상으로  const가 좋다. 

 

메소드를 호출하는 것은 called 혹은 invoked라고 한다. 

메서드는 이벤트가 일어난 시점이나 셀프로도 된다.

 

// 함수가 호출되면 반환값 저장
let x = myFunction(4, 3);

function myFunction(a, b) {
// Function returns the product of a and b
  return a * b;
}

////////////////////////////////////////////
////////////////////////////////////////////

// 함수가 호출되면 반환값 저장x! 반환값 사용x
myFunction(4, 3); 

function myFunction(a, b) {
// Function returns the product of a and b
  return a * b;
}

//만일 사용하려면 이렇게 사용해야함
let result = myFunction(4, 3);  // 반환값이 result에 저장
console.log(result);  // 12 출력

 

밖은 글로벌 코드

fucntion myfunction() {

여기 코드가 로컬 지역 코드

}

---

객체

 

프로퍼티는 ,로한다.

📌 객체선언은 const 로 하는게 관행

 

const data = new Data(); // new로 인해 객체 생성
const data = Data(); //그냥 문자열

 

new 없이 호출가능

자바스크립트이 특징은 함수 자체가 객체이다. 

함수가 급이 높아서 일급 클래스이다. 

 

---

프로퍼티를 참조할때는 (.이 참조연산자)

 

메서드는 누구누구 소속이다라고 생각하면 편하다. 

 

자바스크립트에서는 거의 모든 것이 객체이다. 

Primitives: 원시값이므로 

Immutable(불변하다)

value 자체가 이름에 바로 저장되는 걸로 생각하자

 

object는 Mutable하다.

mutable이란? 변경가능하다. 

const x = person

x는 person의 바꿈을 할 수 있다. 

즉, 그 데이터의 값을 바꾸는 것을 할 수 있다라는 의미이다!

---

for..in..

 

for (뭐라고 부를지 정하기 in 객체)

꺼낸 프로퍼티를 뭐라고 부를지 정하면 된다. 

---

Object.values()

자바스크립트에서 객체의 값들만을 배열로 반환하는 메서드이다.

즉, 주어진 객체에서 각 프로퍼티의 값을 배열 형태로 추출할 수 있다.

Object.values(obj)

obj: 값을 추출하고자 하는 객체

반환값: 객체의 값들을 배열로 반환한다.

const user = {
  name: "John",
  age: 30,
  city: "New York"
};

const values = Object.values(user);

console.log(values); // ["John", 30, "New York"]

---

 

JSON.stringify() 

JS에서 객체나 값을 JSON문자열로 변환하는 메서드이다. JS객체를 JSON 형식의 문자열로 바꿔준다. 

JSON.stringify(value, replacer, space)
// value: 변환할 js값(객체, 배열, 숫자 등)
// replacer(선택적): 객체를 변환할 때 특정 프로퍼티를 포함시키거나 제외할 수 있는 함수나 배열
// space(선택적): json 문자열을 보기 좋게 포맷팅할 때 사용할 공백의 수 또는 문자열

const user = {
  name: "John",
  age: 30,
  city: "New York"
};

const jsonString = JSON.stringify(user);

console.log(jsonString); // '{"name":"John","age":30,"city":"New York"}'

 

 

---

1. 생성자 함수

자바스크립트에서는 내장함수가 있다.

내장함수를 사용하는 방법이 몇가지가 있다. 

그중에서 new()이다.

 

생성자 함수는 new 키워드를 사용해 호출되며, 객체를 생성하고 속성을 초기화한다. 

 

new()를 호출하면 메모리에 새로운 공간을 할당받는다. 공간에 할당받은 아이들이 객체이다. 

 

new 뒤에 오는거 생성자라고 한다.

 

생성자는 따로 만드는게 아니라 new를 사용하면 그게 생성자다. 

그리고 function 대문자블라블라로 써야한다. 

 

function Person(name, age) {
  this.name = name;
  this.age = age;
}

// 객체 생성
const person1 = new Person('John', 30);
console.log(person1.name);  // "John"
console.log(person1.age);   // 30

 

2. 메서드 추가하기

생성자 함수 내에서 this를 사용해 메서드를 추가할 수 있다. 

---

이벤트

이벤트는 웹 페이지에서 발생하는 사용자의 상호작용이나 브라우저의 상태변화를 나타낸다

클릭, 마우스 움직임, 키보드 입력 등 다양한 사요자 행동을 포함한다 .

 

<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button>

 

 

사람이 이벤트를 클릭하면, eventListener를 통해 onclick 이벤트가 작동한다. 이때, onclick은 이벤트 핸들러를 호출하며, 이벤트 핸들러 내에서 document 객체를 사용해 DOM을 조작하거나 다른 동작을 수행하게 된다.

 

이벤트 -> 이벤트 리스너 -> 클릭 이벤트-> 이벤트 핸들러 -> document객체를 통한 dom조작

 

이벤트 앞에 on을 붙이면 이벤트 리스너가 된다.

그게 알아들으면 이벤트 핸들러가 동작한다. 

---

forEach

배열의 순회하면서 각 요소에 대해 작업을 수행하는 메서드이다. 

array.forEach(function(element, index, array) {
  // 각 배열 요소에 대해 실행될 코드
});

// element: 현재 처리 중인 배열의 요소.
// index: 현재 요소의 인덱스(옵션).
// array: forEach를 호출한 배열 자체(옵션).

foreach는 함수형태이다. 내장함수가 있다.

 

배열의 프로토타입은 같나요? 예 같습니다. 

---

배열과 오프젝트 차이

	배열(Array)	객체(Object)
구조	순서가 있는 데이터 집합	키-값 쌍 데이터
데이터 접근	인덱스 기반	키(속성 이름) 기반
사용 목적	순서가 중요할 때	속성 이름으로 데이터를 구분할 때
메서드	push, pop, map, filter 등	Object.key(), Object.values() 등
키 형식	숫자(인덱스)	문자열 또는 심볼

 

---

instanceof 는 "너는 이 클래스(또는 생성자)의 자손이니?" 하고 물어보는 것

object instanceof constructor

 

---

for in 

for in은 index를 let x 즉 index를 꺼내준다 라고 외우면 좋다.

 

for of

객체는 프로퍼티의 이름이 있어야한다.

---

collection 

어레이-연속되어 있다.
셋 - 연속되지 않는다. 

map

	배열	set	map
구조	순서있는 데이터 집합	중복 없는 값들의 집합	키-값 쌍의 데이터 집합
중복 허용	허용	허용x	키는 고유, 값은 중복 가능
데이터 접근 방식	인덱스 사용	값으로 접근	키로 값에 접근
사용 예	순서가 중요한 리스트	중복 제거된 데이터 저장삽입	고유 키로 데이터를 빠르게 검색

---

눈도장 중요 👓

개발을 잘한다 = 뭐가 제공되었는지 잘 안다. 

공식문서를 많이 보면서 어떤게 제공되는지 눈도장찍어야한다. 

그렇게 찾아서 사용하는걸 보고 개발을 잘한다라고 표현한다.