[Javascript] JS 기초문법 정리

Intro

기초 없이 예제 위주로 자바스크립트를 선행하면서, 아직 실무자가 아니다보니 자주 다루지 않는 부분은 금방 잊어버리고 정보가 뒤죽박죽이라는 생각이 들었다. 이번 기회에 기초부터 차근차근 이론을 학습해보려고 한다. 나중에 다시 훑어볼 수 있게 잘 정리해보자. 데이터 형식과 같이 익숙해져버린 내용은 생략한다.

객체(Object) *

const book = {}
book.title = '해리포터와 마법사의 돌';
book.price = 1000000;
book.fly = () => {
    console.log('fly')
};//메서드: 객체 속성이 함수
=> book = {title:'해리포터와 마법사의 돌', price:1000000, fly: f}

---
const a = 100
const obj = {
    a: a //속성과 값이 같을 땐 a 하나만 써도 됨
    a //이렇게
}

---

변수(Variable)

let, const

• let: 변할 수 있는 값
• const(constant의 약자): 변하지 않는 값, 변하면 안되는 값

→ const를 기본으로 사용하고, 변할 가능성이 있는 것만 let을 사용한다.

변수의 유효범위 (Scope)

const a = 10

function func(){
    const b = 20
    console.log(b)
    console.log(a)
}
func() => 20, 10 : 함수 안에 선언된 변수 b 뿐만 아니라 함수 밖에서 선언된 전역변수 a 또한 호출할 수 있다.
console.log(b) => undefined : 함수 안에 선언된 지역변수 b는 함수 밖에서 호출할 수 없다.
=> 함수 뿐만 아니라 {}안에 선언된 변수를 지역변수, {}밖에 선언된 변수를 전역변수라 한다.
==> 중괄호를 거울 유리(안에서는 밖이 보이고 밖에서는 안을 볼 수 없는)라고 생각하면 이해하기 좋다. 
//참고로 var로 선언된 변수의 유효범위를 결정하는 기준은 '중괄호가 아닌 함수'이다.

---

배열(Array)

‘연관성’이 있는 데이터의 집합.

const a = []
a[0] = 10
a[1] = 20
a[2] = 30

a = [10, 20, 30]

const b = [10, 20, 30]
console.log(b[0]) = 10

//메서드 
//마지막 값 추가
a.**push**(40);
a = [10, 20, 30, 40]
//마지막 값 삭제
a.**pop**();
a = [10, 20, 30]
//처음 값 추가
a.**unshift**(50);
a = [50, 10, 20, 30, 40]
//처음 값 제거
a.**shift**();
a = [10, 20, 30, 40]

---

연산자

산술연산자 : +, -, *, /, %, ++, —, +=, -=, *=, /=

부정연산자: ! = not

&& = and, || = or

const a = 7
const b = '7'
console.log(a == b) => true
console.log(a === b => false
//== 와 === 차이, ===는 데이터 타입까지 비교함. 엄격한 비교
//부정은 !=와 !==

---

템플릿 문자열

//전통적인 방식
const age = 10
const name = 철수
const hi = '안녕! 내 이름은 ' + name + ' 나이는 ' + age + '살이야.' 
console.log(hi) => 안녕! 내 이름은 철수 나이는 10살이야.

//템플릿 문자열
const hi = `안녕! 내 이름은 ${name} 나이는 ${age}살이야`

---

조건문

if(조건){

}else if(조건){

}else{}

---

반복문

for(let i = 0; i < 10; i++){
    console.log(i); => 9까지
}

---응용
const a = [10, 20, 30, 40, 50]

for(let i = 0; i < a.length; i++){
    console.log(a[i]) => 10, 20, 30, 40 ,50
}

---

함수

---선언
function hi(){
    console.log('안녕하세요')
}
---호출
hi(); 

//변수에 익명함수를 할당(화살표 함수)
const f = () => {

}
//매개변수
function add(a, b){
    console.log(a + b)
}
add(10, 20); => 30;

function hi(name){
    console.log(`안녕 내 이름은 ${name}`)
}
hi('철수'); => 안녕 내 이름은 철수

// return (1. 리턴값 반환, 2.함수 실행 종료)
// 두가지만 기억할 것.

// 1. 리턴값 반환
function add(a, b){
    return a + b
}
add(1, 2) => 함수실행: 3이라는 리턴값을 뱉음?보류?중인 상태, 어디에도 출력은 안됨
const a = add(1, 2) => 함수를 변수 선언하면 리턴값이 a에 지정됨

// 2. 함수 실행 종료
function hi(name){
    return
    console.log(`안녕 내 이름은 ${name}`)
}
hi('철수'); => return에서 함수가 종료되어 콘솔에 출력이 이루어지지 않는다! 

---

Class

//붕어빵과 붕어빵틀, 같거나 비슷한 요소를 여러개 찍어낼 때 class사용
//기본형태
class **P**erson {
    constructor(name, message){
        //생성자
        //인스턴스가 생성될 때 실행(초기화)
        this.name = name;
        this.message = message;
    }
    walk(){
        console.log('walk!')
    }
    hi(){
        console.log(`안녕 난 블랙핑크의 ${this.name}`)
    }
} //클래스 이름은 관례적으로 앞 대문자

const person1 = new Person('로제', 'on the ground~') //인스턴스
const person2 = new Person('지수', 'stay stay~') //인스턴스
const person3 = new Person('제니', '빛이 나는 솔로~') //인스턴스
const person4 = new Person('리사') 'money!'//인스턴스

person1.hi();
person2.hi();
person3.hi();
person4.hi();

---

---

DOM Script

DOM(Document Object Model)

DOM script는 자바스크립트를 통해 HTML document 객체에 접근하여 조작하는 방식을 말한다.

이미지 출처: 위키피디아 Document Object Model

HTML DOM, JS에서 불러오기

// window 전역 객체
// addEventListener 메서드

// load 이벤트
function init(){
    console.log('로드 완료')
}
window.addEventListener('load', init) 
// addEventListener 메서드 안에서 함수를 실행할 때에는 init()이 아닌 init이다. 주의!
"('load', function(){}) || "('load', ()=>{}) 
// 특정 함수가 아니라 익명함수를 바로 넣기도 한다. 기억! 

// DOMContentLoaded 이벤트
// 기본적인 DOM 구조만 load하는 이벤트이다. 이미지는 로드하지 않기 때문에 로딩 속도가 더 빠르다.
window.addEventListener('DOMContentLoaded', init)

=> 그런데 이렇게 안하고 스크립트 태그를 바디 끝에 붙이거나, 
=> 스크립트에 defer 속성을 붙이면 **load 과정은 생략할 수 있다.**

특정 DOM 요소를 JS에서 지정하기

//document 객체
//querySelector() 메서드
const title = document.querySelector('.class-name');
title.style.background = 'red';
title.style.backgroundColor = 'red';
//특정 DOM요소의 스타일속성을 직접 조작할 수 있지만, 이 방법보다는 스타일속성을 class로 지정해놓고
//JS에서 class를 붙였다 떼었다 하는 편이 효율적이다. 

//classList 객체의 add 메서드, remove 메서드
title.classList.add('active')
title.classList.remove('active')

예제

여기까지 학습한 내용을 활용해서 click 이벤트 구현

//카드 클릭 구현
const cardEl = document.querySelector('.card')

function cardClickHandler() {
    cardEl.classList.add('active')
}

window.addEventListener('click', cardClickHandler)

// 누르면 active 클래스가 붙어서 활성화가 되도록 구현했는데, 다시 원래 상태로 돌리기*
// 중요포인트!
const cardEl = document.querySelector('.card')

let cardState = true;

function cardClickHandler() {
    if(!cardState){
        cardEl.classList.add('active')
        cardState = true
    } else {
        cardEl.classList.remove('active')
    }
}

window.addEventListener('click', cardClickHandler)

// 훨씬 간단한 방법으로 구현하기(class만 넣었다 뺐다 하는거라면)
const cardEl = document.querySelector('.card')

function cardClickHandler2 () {
    cardEl.classList.toggle('active')
}
window.addEventListener('click', cardClickHandler2)

=============================================================================
// 카드가 여러개 일 때
const cardEls = document.querySelectorAll('.card')

// 2. this === e.currentTarget, this는 현재 발생한 이벤트의 타겟
function clickCardHandler(e){
    this.classList.toggle('active') === e.currentTarget.classList.toggle('active')
}
// 참고로 e.target도 있는데 e.currentTarget과는 다르다. 이에 대한 내용은 나중에 추가.

// 1. 반복문으로 차례대로 불러오기
for(let i = 0; i < cardEls.length; i++){
    cardEls[i].addEventListener('click', clickCardHandler)
}

---

Module

// main.js <script defer type="module" src="./main.js"></script>
// 불러올 때는 경로표시를 구체적으로 해줘야한다. ball.js(X) ./ball.js(O)
import Ball from './ball.js'
import Box from './box.js'

new Ball()
new Box()

--

// ball.js
export default class Ball {
    constructor(){
        console.log('볼!')
    }
}

--

// box.js
export default class Box {
    constructor() {
        console.log('박스!')
    }
}