[javascript] 템플릿 리털럴 && Loops 그리고 Window Object

〰 템플릿 리터럴

JS에서 백틱 문자를 사용하여 문자열을 표현한 것❗

const name = "지민";
const age = 26;

// 템플릿 리터럴 사용
const greeting = `안녕하세요!  
제 이름은 ${name}이고, 나이는 ${age}살입니다.

내년엔 ${age + 1}살이 돼요. 😊`;

console.log(greeting);

안녕하세요!  
제 이름은 지민이고, 나이는 26살입니다.

내년엔 27살이 돼요. 😊

✨ 사용하면 줄바꿈 쉽게 할 수 있고
💲 문자열 내부에 표현식 포함할 수 있게 됨

---

♾ Loops

👉 JS에서 루프 사용하면 코드 블록 여러 번 실행 할 수 있게 도와줌

📼 루프의 종류

for 예시

조건에 맞는 경우 이부분만 띄어넘고
계속 이어서 실행하고 싶으면 continue 사용하면 됨✔

5가 딱 됐을 때 for문을 멈춰버리고 싶으면 break 사용하면 됨✔

for ... in 예시

const user = {
  name: "지민",
  age: 26,
  job: "퍼블리셔 지망생"
};

for (let key in user) {
  console.log(`${key} : ${user[key]}`);
}

name : 지민
age : 24
job : 퍼블리셔 지망생

객체의 속성에 따라 반복

while 예시

지정된 조건이 true면 코드 블록 반복

do ~ while 예시

let i <= 100;

do {
  console.log('Number' + i);
  i++;
}

while (i < 10);

Number 100

⚡조건과 상관없이 무조건 한번은 실행함 ( 조건이 안 맞더라도 )

배열 루프 컨트롤 - for || forEach || map || for ... of 예시

출력은 forEach랑 똑같음

const fruits = ['🍎', '🍌', '🍇'];

for (const fruit of fruits) {
  console.log(fruit); // 각 과일을 하나씩 출력
}

---

Window Object

자바스크립트에서 브라우저 전체를 대표하는 최상위 객체🧩
웹 페이지에서 기본적으로 제공되는 모든 기능
( 알림, 타이머, 화면 정보 등 ) 여기 들어 있음

브라우저에 의해 자동으로 생성되며 웹 브라우저 창을 나타냄
또한 window는 '브라우저의 객체'이지 JS의 객체가 아님🙅‍♀️

1️⃣ 브라우저의 창에 대한 정보를 알 수 있고 제어할 수도 있음

2️⃣ var 키워드로 변수를 선언하거나 함수 선언하면
이 window 객체의 프로퍼티가 됨

✅ 자주 쓰이는 window 속성과 메서드

이렇게 해도 됨

입력 후 확인 버튼 누르면

알림창으로 입력한 값이 뜨는 걸 볼 수 있음

확인 버튼 누르면 콘솔창에 Yes가 뜨고 취소 버튼 누르면 No 뜸

let val;

val = window.scrollY;
console.log(val);

let val;
// 현재 URL에 대한 정보
val = window.location;
console.log(val);

// 버튼 클릭 시 페이지 새로고침
document.querySelector("button").addEventListener("click", () => {
  window.location.reload();
});

// 뒤로 가기
document.querySelector("#backBtn").addEventListener("click", () => {
  history.back();
});

// 앞으로 가기
document.querySelector("#forwardBtn").addEventListener("click", () => {
  history.forward();
});

window.location | navigator | history | screen 등등
👉 BOM [Browser Object Model] 이라고 함

🐱‍💻 오직 var로 선언한 변수는
window 객체의 프로퍼티로 자동 추가 가능 ✔

💁‍♀️ let && const는 블록 스코프기 때문에 var만 가능한 것 ❗
✍ 전역 객체의 프로퍼티로 사용 불가 ❌

var를 어처피 쓰지 않을 거라서 올릴 일도 없을 것