Code&Data Insights
[새싹 성동 2기] JavaScript 기초 (+ECMAScript6) 본문
[새싹 성동 2기] JavaScript 기초 (+ECMAScript6)
paka_corn 2024. 11. 14. 09:01
업무를 하며, 중간중간 react와 JS 문법에 대해 배우며 블로그에 기술한 내용들이 있지만,
수업을 들으며 내가 생각하기에 꼭 알아야할 필수지식 위주로 정리하였다.
1. 호이스팅 (Hoisting)
: 변수, 함수, 또는 클래스의 선언이 해당 코드의 최상단으로 "끌어올려진 것처럼" 동작하는 JavaScript의 특징
1) let 또는 const 호이스팅
변수 선언이 호이스팅되고, 초기화가 선언문에 도달하기 전까지 이루어지지 않음
초기화 전까지의 변수는 TDZ(Temporal Dead Zone)에 높이게 됨
=> Reference Error
=> let -> hoisting이 일어나지 않음 (var는 호이스팅의 문제가 일어남)
2) 함수 호이스팅
함수 선언은 전체 스코프에서 접근할 수 있도록 호이스팅됨
=> 함수 표현식은 변수 호이스팅과 같이 취급됨 (함수 표현식으로는 호이스팅 되지 않음)
var = function ();
2. 형 변환 (Type Conversion)
1) 숫자 & 문자열의 연산
: + 외의 연산자를 사용하면 문자열이 자동으로 숫자로 변환되어 처리됨
console.log("5" - 2); // 3
console.log("10" * 3); // 30
console.log("8" / 2); // 4
2) Boolean 변환
: !!은 Boolean() 함수와 동일한 결과를 얻을 수 있음
console.log(Boolean(0), !!0); // false false
console.log(Boolean(""), !!""); // false false
console.log(Boolean(null), !!null); // false false3. 즉시 실행 함수 (IIFE, Immediately Invoked Function Expression)
: 정의되자마자 즉시 실행되는 Javascript 함수(= 자기 호출 함수)
(() => {
console.log("IIFE 실행");
})();
(async () => {
console.log("비동기 IIFE 실행");
})();4. 배열 & 객체 - for in, for of
1) JS에서 length 속성으로 배열길이 가져오는 법
values["length"]
=> JS의 배열은 객체이기때문!
2) 배열의 객체를 순차적으로 출력하는 법
for in - index로 함께 가져오는 것이 가능
for of - index 없이 값만 가져올 수 있음
3) 객체 속성을 순회하면서 값을 가져오는 방법
for in - index를 key처럼 사용하여 가져올 수 있음
for of - 객체에서는 사용 불가능!
=> Object.keys()를 이용해야함
5. 배열 method - map(), filter(), reduce()
*실무에서 많이 쓰임..!!!*
1) map()
: 기존 배열의 데이터의 변경 없이, 데이터 변환이나 필드 추출할 때 자주 사용됨
// API로부터 받은 사용자 데이터에서 이름 목록만 추출하기
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 },
];
// 이름만 추출
const names = users.map(user => user.name);
console.log(names); // ["Alice", "Bob", "Charlie"]
2) filter()
: 조건(condition)을 만족하는 요소들만 새로운 배열에 포함해서 추출할 시 사용됨
사용자 데이터에서 30세 이상인 사용자만 가져오기
const users = [
{ id: 1, name: "Alice", age: 25 },
{ id: 2, name: "Bob", age: 30 },
{ id: 3, name: "Charlie", age: 35 },
];
// age >= 30을 만족시키는 사용자만 필터링
const adults = users.filter(user => user.age >= 30);
console.log(adults);
// [
// { id: 2, name: "Bob", age: 30 },
// { id: 3, name: "Charlie", age: 35 }
// ]
3) reduce()
: 데이터를 한곳에 모으거나 합산하는 작업에 유용함
// 장바구니의 총합 계산하기
const cart = [
{ product: "Laptop", price: 1000, quantity: 1 },
{ product: "Mouse", price: 50, quantity: 2 },
{ product: "Keyboard", price: 75, quantity: 1 },
];
const total = cart.reduce((acc, item) => acc + item.price * item.quantity, 0);
console.log(total); // 장바구니의 총합 : 11756. 단축 속성명 (Shorthand Property Names)
: 객체의 속성 이름과 그 값으로 사용할 변수가 같은 이름을 가질 때, 속성명을 생략할 수 있는 문법
7. 계산된 속성명 (Computed Property Names)
: 객체의 속성 이름(키)을 동적으로 생성할 수 있는 방법
- 대괄호 [] 안에 변수를 넣으면 그 값이 속성명이 됨
8. 전개 연산자 (Spread Operator)
!문제점!
배열 값이 아닌, 배열 주소가 복사됨 (arr2를 수정하면, arr1 값도 함께 변경됨)
let user2 = user1;
[해결책]
루프(for 문)를 이용해서 값을 하나씩 복사하거나, 전개 연산자를 이용하면, 배열의 값 복사가 가능!
let user1 = {"name": "karl", "age": 23}
let user2 = {...user1}
- 배열 결합 & 객체 결합도 가능!
=> but, 객체에서는 동일한 키를 가질 수 없기 때문에, 동일한 키를 가질 시, 나중에 들어오는 값으로 덮어씌어짐
9. 비구조화 (destructuring)
1) 배열 비구조화
: 배열의 특정 값 또는 나머지 값을 쉽게 추출(subset 생성) 이 가능
// arr 배열의 첫번째 값을 first 변수에 할당하고, 나머지 값을 rest 이름의 배열을 생성
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [ 2, 3, 4, 5 ]
2) 변수 비구조화(객체 비구조화)
: 객체의 속성을 간단히 변수로 할당하거나 기본값, 나머지 값 등을 처리할 수 있음
const user = {
name: "paul",
age: 23,
};
// 비구조화 시 변수명을 변경
const { name: userName, age: userAge } = user;
console.log(userName); // "paul"
console.log(userAge); // 2310. Shallow Copy vs Deep Copy
1) Shallow Copy
얕은 복사는 객체나 배열의 최상위 수준 속성들만 복사하고, 내부에 중첩된 객체나 배열의 참조는 그대로 남겨둡
- 얕은 복사는 참조를 공유하기 때문에 빠르고 메모리를 적게 사용
=> 스프레드 연산자 [...]
2) Deep Copy
깊은 복사는 객체나 배열에 중첩된 모든 값들까지 완전히 복사해, 복사된 객체가 원본과 완전히 독립적인 복사본이 됨
- 원본 데이터가 복사본에 영향을 미치지 않도록 완전히 분리해야 하는 상황에서 사용
- 중첩된 데이터가 많고, 각 데이터가 독립적으로 수정되어야 할 경우
reference
https://developer.mozilla.org/ko/docs/Learn/Common_questions/Web_mechanics/What_is_a_URL
