Javascript_basicSyntax

1. Template Literals

* 백틱(`)을 사용해 문자열 내에 변수를 포함할 수 있는 문법.
* 홑따옴표(')나 쌍따옴표(")를 사용할 경우, 변수 값이 문자열에 포함되지 않음

//예시 코드
const age = 100;
const message = `홍길동 ${age}세입니다.

2. 조건식 및 반복문에서의 괄호 사용

* if와 for 문에서는 조건식 및 반복 조건식을 괄호 ()로 감싸야함
* python에서는 선택사항이지만, javascript에서는 필수.

const name = 'customer';
//조건식 괄호로 묶기
if (name === 'admin') {
	console.log('관리자님 안녕하쇼');
} 
const numbers = [0,1,2,3];
// 반복식을 괄호로 묶기
for (const number of numbers) {
	console.log(number) // for..of의 경우 순회 가능한 배열에 활용된다.
}

3. 변수 스코프(let, const)

* let과 const는 블록 스코프를 가진다. 선언된 블록을 벗어나면, 더 이상 참조할 수 없다.
* python과 다르게 Javascript에서는 블록을 벗어나기 전, 변수를 선언해야 한다.

if (x===1) {
	let x = 2;
    console.log(x); // 2
}
x = 5; // 이 경우 에러 발생
//블록 밖에서 변수를 선언하여 사용 가능하게 하기
let x = 2;
if (x===1) {
	console.log(x);
}
x = 5; // 정상 작동

4. 변수 호이스팅 (Variable Hoisting)

* 자바스크립트에서 변수 선언을 했을 때 코드의 상단으로 끌어올려지는 것을 말한다. 
* var는 선언만 호이스팅되고, 초기화는 선언 위치에서 이루어지기 때문에, 초기화 전에는 undefined가 반환.
* let과 const는 TDZ(Temporal Dead Zone)의 영향을 받아 선언 전에 접근하면 ReferenceError 발생

console.log(a);
var a = 5;

console.log(b);
let b = 10; // 호이스팅 방지를 위해 var 보다는 let이나 const 사용하는 것을 권장

5. 객체 속성 접근 방식

* 객체의 속성 참조 시, key는 문자열 타입이 아닌 symbol 타입이다.
* 문자열로 키를 참조하려면 객체['문자열'] 형태로 사용해야한다.

const fruits = {a: 'banana', b: 'banana'}
fruits.a; // 'apple' (가능)
fruits['a'] // 'apple' (가능)
fruits.'a' // 불가능

const keys = ['a', 'b'];
for (const key of keys) {
  console.log(fruits[key]); // 가능
  console.log(fruits.key); // 불가능;;

6. == vs === 및 부등호 연산자

* ==는 값만 비교, 타입이 다르다면 자동으로 타입 변환 수행
* ===는 값과 타입을 모두 비교. (권장)

console.log(1 == '1'); // true
console.log(1 === '1'); // false

7. for...of와 for...in의 차이점 및 주의할 점

for of

* 배열, 문자열, Map, Set 등 반복 가능한 객체의 요소를 순회할 때 사용.
* 반환값은 각 요소의 값을 반환한다.
* 객체(Object)에는 사용할 수 없으며, 배열이나 이터러블 객체에만 사용 가능하다.

const numbers = [1, 2, 3];
for (const number of numbers) {
  console.log(number); // 1, 2, 3
}

---

for in

* 객체의 속성 키를 반복할 때 사용함
* 각 속성의 키를 반환함
* 객체의 속성뿐만 아니라, 프로토타입 체인에 속상 속성들도 포함될 수 있으므로 불필요한 속성이 포함 될
  가능성이 있음. 따라서 객체의 고유한 속성만 반복하려면 hasOwnProperty() 메서드를 사용해야함.
* 배열에는 사용하지 않는 것이 좋다. 배열의 인덱스를 순회하지만, 배열이 아닌 객체처럼 동작할 수 있기에
  결과를 예측하기가 어렵다. 
  

const person = { name: '홍길동', age: 30};
for (const key in person) {
if (person.hasOwnProperty(key)) {
 console.log(key, person[key]); // name 홍길동, age 30
}
}

const array = ['a', 'b', 'c'];
for (const index in array) {
console.log(index); // 0, 1, 2 (인덱스 반환)
console.log(array[index]); // 'a', 'b', 'c' (값 반환 가능하지만 권장 x)
}

8. this 키워드 사용 시 주의 사항

* 글로벌 컨텍스트: 자바스크립트에서 가장 상위 레벨의 코드에서 this는 글로벌 객체를 참조한다.
  브라우저에서는 indow가 되며, 이러한 특성 때문에 함수가 어떤 객체에도 속하지 않은 상태로 실행되면 this는
  글로벌 객체를 가리키게 된다.

* 함수 컨텍스트: 일반 함수에서 this의 값은 함수가 어떻게 호출되었는지에 따라 결정된다. 만약 함수가 객체의
  메서드로 호출되면, this는 그 객체를 가리킨ㄷ. 하지만 단순히 함수로 호출되면, this는
  글로벌 객체 (비엄격 모드) 또는 undefined(엄격 모드)를 가리킨다.
  즉 비엄격 -> 글로벌 객체 참조, 엄격 -> undefined가 된다.
  
* 화살표 함수: 화살표 함수는 this가 자신이 생성된 컨텍스트의 this를 '상속' 받는다. 즉, 화살표 함수 내부에서
  this를 사용하면, 이는 화살표 함수를 감싸는 외부 함수의 this 값을 가진다. 이는 내부 함수에서 외부함수의
  this를 쉽게 접근할 수 있게 한다.
  

const obj = {
  method: function() {
    cnosole.log(this); // obj를 가리킨다.
  }
};

obj.method();

const arrowFunction = () => console.log(this);
arrowFunction(); // 글로벌 객체 (window)

JavaScript 반복문 변수 선언 정리

1. for문

for문은 일반적으로 카운터 변수를 사용하여 반복을 제어.

for (let i = 0; i < array.length; i++) {
    // 반복 작업
}

• 권장: let
• 이유: for문에서 사용하는 카운터 변수는 반복마다 값이 변경되므로, 값 재할당이 가능한 let을 사용합니다.
• const 사용 불가: const는 상수로 선언된 변수로, 재할당할 수 없기 때문에 반복문에서 카운터로 사용할 수 없습니다.

2. for...in문

for...in문은 객체의 열거 가능한 속성(keys)을 반복합니다.

for (const key in obj) {
    console.log(key, obj[key]);
}

• 권장: const
• 이유: 각 반복에서 객체의 속성 이름을 가져오므로, 반복 중에 변수가 변경될 필요가 없습니다. const를 사용하면 변수의 재할당이 없음을 명확히 할 수 있습니다.
• let 사용 가능: 반복 중에 변수를 재할당할 필요가 있다면 let을 사용할 수 있지만, 일반적으로는 필요하지 않습니다.

3. for...of문

for...of문은 배열이나 iterable 객체의 요소(values)를 반복합니다.

for (const value of array) {
    console.log(value);
}

• 권장: const
• 이유: 각 반복에서 배열의 요소 값을 가져오므로, 반복 중에 값이 변경되지 않는 것이 일반적입니다. const를 사용하면 해당 변수가 재할당되지 않음을 명확하게 나타낼 수 있습니다.
• let 사용 가능: 만약 요소 값을 수정하거나 재할당해야 할 필요가 있다면 let을 사용합니다.

4. const, let 없이 변수를 사용하는 경우

• JavaScript에서 const나 let 없이 변수를 선언하면, 해당 변수는 자동으로 전역 범위에서 정의됩니다.
• 자동으로 var로 처리되어 전역 변수로 등록됨: 함수 내부나 외부 어디에서 선언하더라도, 해당 변수는 전역 객체(브라우저 환경에서는 window 객체)에 추가됩니다.

for (value of array) {
    console.log(value);
}

• 이와 같은 방식으로 변수를 사용하면, value 변수가 반복문을 벗어난 후에도 접근 가능하므로, 이는 바람직하지 않습니다.