JS) 32번째 회고

---

1. JavaScript

자바스크립트(JavaScript)는 웹 브라우저에서 주로 실행되는 스크립트 언어로, 동적인 웹 페이지를 만들기 위해 사용된다. HTML과 CSS와 함께 웹의 주요 기술 중 하나로 간주되며, 서버 측 프로그래밍에도 사용될 수 있다. 자바스크립트는 객체 지향적이고, 프로토타입 기반의 다중 패러다임 언어로, 절차적, 함수형, 이벤트 기반 프로그래밍 스타일을 지원한다.

 

💡 JavaScript의 특징

1. 동적이며 타입을 명시할 필요가 없는 인터프리터 언어이다.
2. 객체지향 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.
3. HTML의 내용, 속성, 스타일을 변경할 수 있다.
4. 이벤트를 처리하고 사용자와의 상호작용을 가능하게 한다.
5. AJAX 기술을 이용해 서버와 실시간 통신 기능을 제공한다.

자바스크립트 기초

- 출처 : dinfree.com

자바스크립트란?

- 출처 : ko.javascript.info

JavaScript란?

- 출처 : ymh0951

---

2. ECMA Script (ES)

브라우저에서 JavaScript를 동작시키기 위한 문법을 표준화시킨 문서이다.
ECMA라는 기관이 만든 Script언어이며, ECMA-262 표준을 따르고 있다.

ECMAScript란? 개념부터 디테일까지

- 출처 : sumini.dev

---

3. var, let, const의 차이

 

1️⃣ var : 중복 선언이 가능하다.

1. var로 선언한 변수는 동일한 이름으로 여러 번 중복선언이 가능하다.
   마지막에 할당된 값이 최종 변수에 저장된다.
2. 변수를 유연하게 사용할 수 있지만 기존에 선언해 놓은 변수의 존재를 잊고 재선언 하는 경우 문제가 발생할 수 있다.
3. 길고 복잡한 코드에서 같은 이름의 변수가 여러 번 선언되어 사용되면 어떤 부분에서 값이 변경되고
   어떤 부분에서 문제가 발생되는지 파악하기 힘든 단점이 있다.

이를 보완하기 위해 ES6에서 추가된 변수선언 방식 let과 const가 있다.

var title = 'apple';
console.log(title) // apple

var title = 'banana';
console.log(title) // banana

title = 'orange';
console.log(title) // orange

 

2️⃣ let : 중복 선언이 불가. 재할당 가능

var와 달리 중복 선언 시에 해당 변수는 이미 선언되었다는 에러 메세지가 뜬다.

중복선언이 불가능하지만, 변수에 값을 재할당 하는 것은 가능하다.

var title = 'apple';
console.log(title) // apple

var title = 'banana';
console.log(title)
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'orange';
console.log(title) // orange

 

3️⃣ const : 중복 선언 불가. 재할당 불가

재할당이 가능한 let과 달리 const는 재할당이 불가하다.

var title = 'apple';
console.log(title) // apple

var title = 'banana';
console.log(title)
//Uncaught SyntaxError: Identifier 'title' has already been declared

title = 'orange';
console.log(title)
//Uncaught TypeError: Assignment to constant variable

---

4. Hoisting

자바스크립트 호이스팅(Hoisting)은 자바스크립트의 실행 컨텍스트에서 변수와 함수 선언이 코드가 실행되기 전에 해당 스코프의 최상단으로 끌어올려지는 동작을 의미한다. 이로 인해 코드가 실제 작성된 순서와 다르게 실행될 수 있다. 호이스팅은 변수와 함수 선언에만 적용되며, 변수의 할당이나 초기화는 호이스팅 되지 않는다.

 

1️⃣ 변수 호이스팅

자바스크립트에서 변수 선언은 해당 스코프의 최상단으로 끌어올려진다.
그러나 변수의 초기화는 선언된 위치에서 이루어진다. var 키워드를 사용한 변수는 호이스팅의 영향을 받다.

 

💻 예시 코드

console.log(a);  // undefined
var a = 10;
console.log(a);  // 10

 

위 코드에서 var a 선언이 호이스팅 되어 코드의 최상단으로 이동한다. 따라서 console.log(a)가 실행될 때 변수 a는 이미 선언된 상태이지만 아직 초기화되지 않았기 때문에 undefined를 출력한다.

 

2️⃣ 함수 호이스팅

함수 선언 또한 호이스팅의 영향을 받는다. 함수 선언은 변수 선언과 다르게 전체 함수가 호이스팅 된다.

 

💻 예시 코드

foo();  // "Hello, World!"

function foo() {
    console.log("Hello, World!");
}

 

위 코드에서 foo 함수 선언이 코드의 최상단으로 호이스팅 되기 때문에 foo 함수를 선언 전에 호출해도 정상적으로 실행된다.

var, let, const 차이점

- 출처 : 80000coding.oopy.io

호이스팅 - MDN Web Docs 용어 사전: 웹 용어 정의 | MDN

- 출처 : developer.mozilla

---

5. Scope

자바스크립트에서 변수의 유효 범위(Scope)는 변수가 어디서 정의되고 어디서 접근할 수 있는지를 결정한다.
변수가 정의될 수 있는 범위에는 두 가지 주요 유형이 있다. 전역 스코프(Global Scope)와 지역 스코프(Local Scope)
이 두 가지 스코프는 변수의 생명주기와 접근 가능성을 결정한다.

 

1️⃣ 전역 스코프(Global Scope)

전역 스코프는 프로그램의 모든 부분에서 접근할 수 있는 범위이다.
전역 스코프에 선언된 변수는 어디서든 접근 가능하며, 이는 전역 객체의 속성으로 추가된다.

• 전역 변수 : 함수나 블록 내부가 아닌 코드의 최상위 수준에서 선언된 변수는 전역 스코프에 속한다.

 

💻 예시 코드

var globalVar = "I am a global variable";

function foo() {
    console.log(globalVar);  // I am a global variable
}

foo();
console.log(globalVar);  // I am a global variable

 

2️⃣ 지역 스코프(Local Scope)

지역 스코프는 특정 코드 블록 또는 함수 내에서만 접근할 수 있는 범위이다.
함수 또는 블록 내부에서 선언된 변수는 해당 블록이나 함수 내에서만 유효하다.

• 함수 스코프 : 함수 내부에서 선언된 변수는 함수 내부에서만 접근할 수 있다. var 키워드는 함수 스코프를 따른다.

 

💻 예시 코드

function bar() {
    var localVar = "I am a local variable";
    console.log(localVar);  // I am a local variable
}

bar();
console.log(localVar);  // ReferenceError: localVar is not defined

JavaScript에서 Scope(스코프)란? - Global Scope와 Local Scope에 대한 이해

- 출처 : runcoding

---

6. 산술연산자

숫자 값을 계산하는 데 사용된다.

연산자	설명
+	덧셈
-	뺄셈
*	곱셈
/	나눗셈
%	나머지
**	거듭제곱

 

코딩교육 티씨피스쿨

- 출처 : tcpschool

---

7. 대입 연산자

값을 변수에 할당하는 데 사용된다.

연산자	설명
=	대입
+=	덧셈 후 대입
-=	뺄셈 후 대입
*=	곱셈 후 대입
/=	나눗셈 후 대입
%=	나머지 후 대입

---

8. 논리 연산자

논리 연산을 수행한다.

연산자	설명
&&	AND
||	OR
!	NOT

---

9. 비교 연산자

두 값을 비교하는 데 사용된다. 보통 ==를 안 쓰고 ===를 쓴다.

연산자	설명
==	값이 같음
===	값과 타입이 모두 같음
!=	값이 다름
!==	값과 타입이 모두 다름
>	크다
<	작다
>=	크거나 작다
<=	작거나 같다

---

10. 삼항 연산자

조건에 따라 값을 선택한다.

연산자	설명
condition ? expr1 : expr2	condition ? 참 : 거짓

---

11. Null 병합 연산자, Optional chaining 연산자

연산자	설명
??	좌항이 null 또는 undefined인 경우 우항을 반환한다.
?.	체인 내에서 값이 null 또는 undegined인지 확인하고 그렇지 않은 경우 다음 속성이나 메소드를 호출한다.

 

💻 예시 코드

let d = null ?? 'default';  // 'default'
let e = 0 ?? 'default';     // 0

let user = {};
let f = user?.address?.street;  // undefined

---

12. 기타 연산자

 

1️⃣ 타입 연산자

연산자	설명
typeof	피연산자의 타입을 문자열로 반환한다.
instanceof	객체가 특정 클래스의 인스턴스인지 확인한다.

 

💻 예시 코드

let g = typeof 123;        // 'number'
let h = typeof 'hello';    // 'string'
let i = typeof true;       // 'boolean'
let j = typeof {};         // 'object'
let k = typeof undefined;  // 'undefined'

let l = [] instanceof Array;  // true
let m = {} instanceof Object; // true

 

 

2️⃣ 비트 연산자

연산자	설명
&	AND 연산
|	OR 연산
^	XOR 연산
~	NOT 연산
<<	왼쪽 시프트
>>	오른쪽 시프트
>>>	부호 없는 오른쪽 시프트

 

💻 예시 코드

let n = 5 & 1;  // 1

let o = 5 | 1;  // 5

let p = 5 ^ 1;  // 4

let q = ~5;  // -6

let r = 5 << 1;  // 10

let s = 5 >> 1;  // 2

let t = 5 >>> 1;  // 2

---

13. 증감 연산자

변수의 값을 1씩 증가 또는 감소시킨다.

 

1️⃣ 증가 연산자 ++ : 변수의 값을 1 증가시킨다.

1. 전위 증가(++ 변수)
   증가 후 값을 반환한다.
   
2. 후위 증가(변수++)
   값을 반환 후 증가한다.

 

💻 예시 코드

let u = 5;
let v = ++u;  // u는 6, v는 6

let w = 5;
let x = w++;  // w는 6, x는 5

 

2️⃣ 감소 연산자 -- : 변수의 값을 1 감소시킨다.

1. 전위 감소(--변수)
   감소 후 값을 반환한다.
2. 후위 감소(변수--)
   값을 반환한 후 감소한다.

let y = 5;
let z = --y;  // y는 4, z는 4

let aa = 5;
let bb = aa--;  // aa는 4, bb는 5

---

14. 조건 판단문 If

주어진 조건이 참이면 코드를 실행한다.

 

💻 예시 코드

if (condition) {
    // 코드 블록
}

💡 If... else문

조건이 참이면 첫 번째 블록을, 거짓이면 두 번째 블록을 실행한다.

 

💻 예시 코드

if (condition) {
    // 코드 블록 1
} else {
    // 코드 블록 2
}

 

💡 else if문

여러 조건을 체크한다.

 

💻 예시 코드

if (condition1) {
    // 코드 블록 1
} else if (condition2) {
    // 코드 블록 2
} else {
    // 코드 블록 3
}

---

15. 조건 판단문 Switch

여러 값을 비교하여 실행할 코드를 결정한다.

 

💻 예시 코드

switch (expression) {
    case value1:
        // 코드 블록 1
        break;
    case value2:
        // 코드 블록 2
        break;
    default:
        // 기본 코드 블록
}

---

16. 반복문 For

특정 횟수만큼 코드를 반복한다.

 

💻 예시 코드

for (let i = 0; i < 10; i++) {
    // 코드 블록
}

---

17. 반복문 While

조건이 참인 동안 코드를 반복한다.

 

💻 예시 코드

while (condition) {
    // 코드 블록
}

 

💡 do... while문

최소 한 번 실행된 후 조건이 참인 동안 코드를 반복한다.

 

💻 예시 코드

do {
    // 코드 블록
} while (condition);

---

18. 배열

여러 값을 하나의 변수에 저장할 수 있는 데이터 구조이다.

 

1️⃣ 배열 생성

 

1. 리터럴 표기법

let array = [1, 2, 3, 4, 5];

 

2. Array 생성자

let array = new Array(1, 2, 3, 4, 5);

 

2️⃣ 배열의 메소드

메소드	설명
push()	배열의 끝에 요소를 추가한다.
pop()	배열의 끝에서 요소를 제거한다.
shith()	배열의 첫 번째 요소를 제거한다.
unshift()	배열의 앞에 요소를 추가한다.
forEach()	배열의 각 요소에 대해 함수를 실행한다.
map()	배열의 각 요소에 대해 함수를 실행하고, 새로운 배열을 반환한다.
filter()	조건을 만족하는 요소로만 구성된 새로운 배열을 반환한다.

 

💻 예시 코드

array.push(6);  // [1, 2, 3, 4, 5, 6]

array.pop();  // [1, 2, 3, 4, 5]

array.shift();  // [2, 3, 4, 5]

array.unshift(0);  // [0, 2, 3, 4, 5]

array.forEach(function(element) {
    console.log(element);
});

let newArray = array.map(function(element) {
    return element * 2;
});  // [0, 4, 6, 8, 10]

let filteredArray = array.filter(function(element) {
    return element > 2;
});  // [4, 6, 8, 10]