👀자바스크립트 한눈에 보기

0. 자바스크립트란?

자바스크립트는 웹 페이지의 동작과 반응을 정의하는 언어에요.

예: 버튼 클릭, 입력 처리, 화면 변경

1. 변수와 상수

let a = 10;
const b = 20;

• let: 변수 선언

• const: 상수 선언

⚠️ 상수는 선언한 후에 값을 바꿀 수 없어요. 하지만 오브젝트의 프로퍼티는 바꿀 수 있어요.

const arr = [1, 2];
arr = [1]; // (X)
arr[0] = 1; // (O)

1000번 ──▶ 배열 메타정보
                ├─ length: 3
                └─ 시작주소: 5000번

지금은 var를 쓰지 않아요. 아래 이유들 때문이에요.

1. 선언 이전에 값을 할당할 수 있어요. (호이스팅)

2. 여러번 선언할 수 있어요.

3. 조건문 안에서 선언한 변수여도 함수 내에 있다면 접근할 수 있어요. (함수 스코프)

스코프

스코프는 변수의 접근범위를 말해요.

선언한 위치, 선언 예약어에 따라서 정해져요.

종류에는 글로벌스코프, 블록스코프, 함수(지역)스코프가 있어요.

글로벌스코프는 전역에서 접근 가능해요.

블록스코프는 코드블록(= {}) 안에서만 접근 가능해요.

함수스코프는 함수 안이라면 모두 접근 가능해요.

2. 자료형

2.1. 숫자

const num = 3;

2.2. 문자

const str = "Hi";

템플릿 리터럴은 문자열안에 변수나 표현식을 넣는 방법을 말해요.

함수 인자 하나를 리터럴 방식으로 보내면 소괄호를 없애도 돼요.

const greeting = `Hi, ${name}`;

greeting`Hello ${name}!`; // = greeting(`Hello ${name}!`);

2.3. 불리언

const bool = true;

2.4. 리스트

리스트는 요소(element)들로 이루어져있어요.

리스트의 메서드는 push(), pop() 등이 있어요.

리스트의 프로퍼티는 length가 있어요. length는 리스트의 길이를 반환해요.

메서드와 프로퍼티는 각각 객체의 함수와 내부 변수를 말해요.

of

element 자체를 불러와요.

for (const element of list) { }

map()

함수를 인자로 보내면 새로운 리스트를 반환해요.

list.map((element, index) => element + 2);

filter()

불리언을 반환하는 함수를 인자로 보내면 새로운 리스트를 반환해요.

list.filter((element) => element < 1);

reduce()

함수를 인자로 보내면 하나의 값을 반환해요. (압축하다. reduce)

const total = list.reduce((prev, curr, index) => prev + current);

2.5. 오브젝트

const human = {
  name: "yang",
  age: 22,
  introduceMySelf: function () {
    console.log(this);
  }
}

위 예시에서 name, age, introduceMySelf를 속성(property)이라고 해요.

오브젝트 안에 정의된 함수를 메서드라고 불러요.

this는 오브젝트 자기 자신을 가리켜요.

Destructuring (구조 해체)

오브젝트의 프로퍼티들을 변수들에 할당하는 걸 말해요.

// 리스트
const numbers = [1,2,3,4,5]
const [first, second, , ...others] = numbers;
console.log(first, second); // 1 2
console.log(others); // [4,5]

// 오브젝트
const human = {name:"nabeen", age:22};
const {name, bio="student"} = human;
const {age: years} = human;
console.log(name, bio, years); // nabeen student 22

// 함수 응용
const list = [1,2]
function add([first, second]) {
    return first + second;
}
add(list);
function printUserInfo({firstName, lastName: "Kim"}) { }

JSON

오브젝트를 응용한 게 JSON(JavaScript Object Notation)이에요.

JSON은 웹과 서버간 데이터를 주고 받을 때 사용해요.

^{⚠️ 함수는 넣을 수 없어요.}

const humanJSON = '{"name":"yang","age":22}'; // JSON
const humanJSObject = {
  name: "yang",
  age: 22,
  introduceMySelf: function () {
    console.log(this);
  }
}

JSON.stringify(humanJSObject); // JS Object에서 JSON으로 바꾸기
JSON.parse(humanJSON); // JSON에서 JS Object로 바꾸기

2.6. undefined

아무 값도 할당하지 않은 상태를 말해요.

2.7. null

의도적으로 값을 할당하지 않은 상태를 말해요.

3. 연산자

// 산술 연산자
10 + 3;   // 13 (덧셈)
10 - 3;   // 7 (뺄셈)
10 * 3;   // 30 (곱셈)
10 / 3;   // 3.333... (나눗셈)
10 % 3;   // 1 (나머지)
10 ** 3;  // 1000 (거듭제곱, ES2016)

// 증감 연산자
let x = 5;
x++;  // 후위 증가: 사용 후 증가 (x = 6)
++x;  // 전위 증가: 증가 후 사용 (x = 7)
x--;  // 후위 감소 (x = 6)
--x;  // 전위 감소 (x = 5)

// 할당 연산자
let num = 10;
num += 5;   // num = num + 5 → 15
num -= 3;   // num = num - 3 → 12
num *= 2;   // num = num * 2 → 24
num /= 4;   // num = num / 4 → 6
num %= 4;   // num = num % 4 → 2
num **= 3;  // num = num ** 3 → 8

// 비교 연산자 (===와 !== 사용 권장)
5 == "5";   // true (값만 비교)
5 === "5";  // false (값과 타입 모두 비교)
5 != "5";   // false
5 !== "5";  // true
10 > 5;     // true
10 < 5;     // false
10 >= 10;   // true
10 <= 5;    // false

// 논리 연산자
let t = true, f = false;
t && f;  // false (AND: 둘 다 true여야 true)
t || f;  // true (OR: 하나라도 true면 true)
!t;      // false (NOT: 반대값)

// 단축 평가 (Short-circuit)
// && 는 false 만나면 멈춤, || 는 true 만나면 멈춤
user && user.name;  // null (user가 null이라 멈춤, 에러 안남) (지금은 옵셔널로 대체)
name2 || "Guest";  // "Guest"

// Nullish 병합 연산자 (??, ES2020)
// ||과 차이점. ||는 falsy 전체를 체크, ??는 null/undefined만 체크
null ?? "기본값";      // "기본값"
0 ?? "기본값";         // 0
"" ?? "기본값";        // ""
undefined ?? "기본값"; // "기본값"

// 삼항 연산자
let age = 20;
let status = age >= 18 ? "성인" : "미성년자";  // "성인"
let score = 85;
let grade = score >= 90 ? "A" : score >= 80 ? "B" : "C";  // "B"

// typeof 연산자
typeof 42;           // "number"
typeof "hello";      // "string"
typeof true;         // "boolean"
typeof undefined;    // "undefined"
typeof null;         // "object" (JavaScript의 오래된 버그)
typeof {};           // "object"
typeof [];           // "object"
typeof function(){}; // "function"

// 옵셔널 체이닝 (?., ES2020)
let user = { name: "Alice", address: { city: "Seoul" } };
user.address?.city;      // "Seoul"
user.phone?.number;      // undefined (에러 없음)
user.getEmail?.();       // undefined (메서드도 안전하게 호출)

4. 조건문

if (score > 60) {
  pass();
} else if (score > 40) {
  hold();
} else {
  fail();
}

5. 반복문

for (let i = 0; i < 3; i++) {
  console.log(i);
}

while (true) {
  console.log("infinite");
}

arr.forEach(item => {
  console.log(item);
});

6. 함수

매개변수를 넘기지 않으면 undefined를 할당해요. (또는 기본값. 기본값 할당은 name = "이름")

반환 값이 없으면 undefined를 반환해요.

함수 이름이 없으면 익명 함수라고 불러요.

function add(a, b) {
    return a + b;
}

const add = (a, b) => a + b;

설명:

• a, b: 파라미터(parameter)

• a + b: 리턴 값

호이스팅

함수를 호출하고, 그 아래에 함수를 선언해도 동작해요.

이를 "끌어올린다"하여 호이스팅이라고 불러요.

자바스크립트는 인터프리터 언어로서 코드가 순서대로 실행되어요.

하지만 자바스크립트는 코드를 실행하기 전에 함수들을 미리 준비해요.

따라서 함수를 끌어올려서 쓸 수 있어요.

⚠️ 함수를 변수에 저장할 경우 호이스팅이 되지 않아요.

함수 이름 짓기

1. 값을 바꾸지 않으면, get으로 시작하는 이름으로 지어요. (getUser)

2. 참 거짓을 판별해서 불리언으로 반환하면, is로 시작하는 이름으로 지어요. (isHuman)

3. 같은 기능을 하는 함수들은 동사를 동일하게 맞춰요. (sayHello, sayHi)

7. DOM

앞서, 자바스크립트는 웹 페이지의 동작과 반응을 정의하는 언어라고 했어요.

동작과 반응을 정의할 HTML 요소(element)를 정하려면 DOM 개념을 알아야해요.

DOM(Document Object Model)은 브라우저가 HTML 문서를 객체(Object) 형태로 변환한 걸 말해요.

DOM은 객체들의 계층 관계를 나타내기 위해 트리 구조를 사용해요.

아래에서 쓰일 document가 트리의 html 노드와 같아요.

7.1. 동작을 바꿀 대상 정하기

기존에 있는 요소를 대상으로 정하기

1. getElementById()

id로 HTML 요소 하나를 대상으로 정해요.

<div id="box"></div>

const box = document.getElementById("box");

1. querySelector()

CSS 선택자로 처음 찾은 요소 하나를 대상으로 정해요.

<p class="text"></p>
<div id="wrap"></div>

document.querySelector(".text"); // 클래스
document.querySelector("#wrap"); // 아이디
document.querySelector("p");     // 태그

새 요소를 만들어서 대상으로 정하기

1. createElement()

HTML에 새 요소를 만들어요. 이때 만든 요소는 아직 화면에 보이지 않아요.

const div = document.createElement("div");

1. appendChild()

만든 요소를 부모 요소 안에 붙여요. 이제 화면에 나타나요.

<div id="wrap"></div>
<div id="wrap"></div>

const wrap = document.getElementById("wrap");
wrap.appendChild(div);

실제 사용 예시

// 1. 부모 요소 선택
const wrap = document.getElementById("wrap");

// 2. 새 요소 생성
const p = document.createElement("p");

// 3. 내용 추가
p.innerHTML = "새로 만든 문장";

// 4. 화면에 추가
wrap.appendChild(p);

7.2. 대상의 동작 바꾸기

1. onClick (버튼)

버튼의 onClick을 바꿔요.

괄호없이 함수 자체를 넣어야해요.

ondblclick, onscroll, onchange도 같은 방식으로 바꿔요.

const button = document.getElementById("btn");
const p = document.getElementById("text");

button.onclick = function () {
  p.innerHTML = "바뀐 글자";
};

const nameInput = document.getElementById("name_input");
const nameText = document.getElementById("name_text");

function updateNameText = () => {
    nameText.innerText = nameInput.value;

nameInput.onchange = updateNameText;

1. innerHTML

선택한 요소 안의 텍스트를 바꿀 때 사용해요.

p.innerHTML = "새 내용";

요즘은 이렇게 해요.

item.onClick을 직접 할당하는 대신, addEventListener 메서드를 사용해요.

장점.

1. 한 이벤트에 여러 핸들러함수를 만들 수 있어요.

2. 핸들러함수를 지울 수 있어요.

item.addEventListner("click", changeColor);

item.removeEventListner("click", changeColor);