본문 바로가기
SK네트웍스 Family AI캠프 10기/Daily 회고

71일차. JavaScript

초코수플레 2025. 4. 22. 18:30
더보기

 

71일 차 회고.

 

 지난 주말에 못 들은 AWS 특강 강의자료를 모두 따라 해서 성공했다. 그런데 너무 따라 하기만 하고 내가 체득한 건 없는 느낌이라 모두 지우고 다시 시도해 보는 과정을 거쳐야 할 것 같다.

 

 

 

 

1. JavaScript

 

 

1-1. JavaScript

 

JavaScript

  • 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어
  • 동적인 웹 기능을 구현하는 데 사용된다.

 

 

1-2. 변수 & 자료형

 

var

  • 중복 선언 가능
    • 코드가 복잡한 경우, 문제가 발생할 수 있다.
  • 재할당 가능
  • 사용하지 않는 것을 추천한다.

 

let(변수)

  • 중복 선언 불가
    • 중복 선언 시, SyntaxError 발생
  • 재할당 가능

 

const(상수)

  • 중복 선언 불가
    • 중복 선언 시, SyntaxError 발생
  • 재할당 불가
    • 재할당 시, TypeError 발생

 

자료형

  • 문자형 (String)
    • 큰따옴표 또는 작은따옴표 사용
let name = "INe";
let address = 'Seoul';
  • 숫자형 (Number)
    • 정수 및 실수
    • 사칙연산 가능
let age = 20;
let pi = 3.14;
  • Boolean
    • true/false
let isTrue = true;

 

  • Undefined
    • 값이 할당되지 않은 상태
let str;
  • Null
    • 명시적으로 "없음"을 나타내는 상태
let str2 = null;
  • NaN(Not a Number)
    • 숫자가 아닌 값을 숫자로 연산하는 경우
let num = 10 / "a";
  • typeof
    • 데이터 타입 확인
console.log(typeof name);			// string
console.log(typeof age);			// number
console.log(typeof isTrue);			// boolean
console.log(typeof str);			// undefined
console.log(typeof str2);			// object
console.log(typeof num);			// number

 

데이터 타입 변환

  • 문자열 -> 숫자
let strNum = "123";
console.log(typeof strNum);			// string
console.log(typeof Number(strNum));		// number
  • 숫자 -> 문자열
let numStr = 123;
console.log(typeof numStr);			// number
console.log(typeof String(numStr);		// string

 

 

1-3. 연산자

 

숫자 연산자

let x = 3, y = 4;

console.log(x + y);				// 7
console.log(x - y);				// -1
console.log(x * y);				// 12
console.log(x / y);				// 0.75
console.log(x ** y);				// 81
console.log(x % y);				// 3

 

문자 연산자

let a = "Hello", b = "World";

console.log(a + " " + b);			// Hello World
let x = "3", y = 4;

console.log(x + y);				// 34 ("3" + "4")
console.log(x - y);				// -1 (3 - 4)
console.log(x * y);				// 12 (3 * 4)
console.log(x / y);				// 0.75 (3 / 4)

 

비교 연산자

let x = 3, y = 4;

console.log(x > y);				// false
console.log(x < y);				// true
console.log(x >= y);				// false
console.log(x <= y);				// true
console.log(x == y);				// false
console.log(x != y);				// true

 

일치 연산자

  • 값과 자료형을 모두 비교한다.
let x = "3", y = 3;

console.log(x == y);				// true
console.log(x === y);				// false
let x = 0, isBool = false;

console.log(x == isBool);			// true
console.log(x === isBool);			// false

 

조건 연산자

let x = 10, y = 20;

if (x > y) {
    console.log("x is grater than y");
}
else if (x < y) {
    console.log("x is less than y");
}
else {
    console.log("x is equal to y");
}
// x is less than y

 

논리 연산자

  • and
let x = true, y = false;

console.log(x && y);				// false
  • or
let x = true, y = false;

console.log(x || y);				// true
  • not
let x = true, y = false;

console.log(!x);				// false

 

 

1-4. 배열

 

배열 선언

let arr1 = new Array();
let arr2 = [];

 

배열 크기

let arr = [1, 2, 3, 4, 5, 6, 7];

console.log(arr.length);			// 7

 

데이터 확인

console.log(arr[0]);				// 1
console.log(arr.slice(2, 5));			// [3, 4, 5]

 

데이터 추가

console.log(arr.push(8));			// 8
console.log(arr);				// [1, 2, 3, 4, 5, 6, 7, 8]

console.log(arr.unshift(0));			// 0
console.log(arr);				// [0, 1, 2, 3, 4, 5, 6, 7, 8]

 

데이터 삭제

console.log(arr.pop());				// 8
console.log(arr);				// [0, 1, 2, 3, 4, 5, 6, 7]

console.log(arr.shift());			// 0
console.log(arr);				// [1, 2, 3, 4, 5, 6, 7]

 

데이터 검색

console.log(arr.indexOf(3));			// 2
console.log(arr.indexOf(0));			// -1

console.log(arr.find(item => item === 3));	// 3
console.log(arr.find(item => item === 0));	// undefined

console.log(arr.filter(item => item < 3));	// [1, 2]

 

배열 합치기

let arr = [1, 2];

console.log(arr.concat([3, 4]));		// [1, 2, 3, 4]
console.log(arr.concat(3, 4));			// [1, 2, 3, 4]

 

map

let arr = ["Apple", "Orange", "Banana"].map(item => item.length);

console.log(arr);				// [5, 6, 6]

 

sort

let arr = [1, 11, 22, 2];
arr.sort();

console.log(arr);				// [1, 11, 2, 22]
let arr = [1, 11, 22, 2];
arr.sort((a, b) => a - b);

console.log(arr);				// [1, 2, 11, 22]
function compareNumeric(a, b) {
    if (a > b) return 1;
    if (a == b) return 0;
    if (a < b) return -1;
}

let arr = [1, 2, 11, 22];
arr.sort(compareNumeric);

console.log(arr);				// [1, 2, 11, 22]

 

reverse

let arr = [1, 11, 22, 2];
arr.reverse();

console.log(arr);				// [2, 22, 11, 1]

 

split

let fruits = "Apple, Orange, Banana";
let arr = fruits.split(", ");

console.log(arr);				// ["Apple", "Orange", "Banana"]

 

join

let arr = ["Apple", "Orange", "Banana"];
let fruits = arr.join(", ");

console.log(fruits);				// Apple, Orange, Banana

 

 

forEach

let fruits = ["Apple", "Orange", "Banana"];

fruits.forEach((item, index, array) => {
    console.log(`${item} is at index ${index} in ${array}`);
});
/*
Apple is at index 0 in Apple,Orange,Banana
Orange is at index 1 in Apple,Orange,Banana
Banana is at index 2 in Apple,Orange,Banana
*/

 

 

1-5. 반복문

 

while

let i = 0;
while (i < 3) {
    console.log(i);
    i++
}
// 0 1 2
let i = 3;
while(i) {
    console.log(i);
    i--;
}
// 3 2 1

 

for

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

 

break

let sum = 0;

while (true) {
    let value = + prompt("Enter a number.", "");
    if (!value) break;
    sum += value;
}

console.log("Sum: " + sum);

 

continue

for (let i = 0; i < 10; i++) {
    if (i % 2 === 0) continue;
    console.log(i);
}
// 1 3 5 7 9

 

 

1-6. 함수

 

함수 생성

function showMessage(name) {
    console.log(`Hello, ${name}`);
}

showMessage("INe");				// Hello, INe
let showMessage = function(name) {
    console.log(`Hello, ${name}`);
}

showMessage("INe");				// Hello, INe
let showMessage = (name) => {
    console.log(`Hello, ${name}`);
}

showMessage("INe");				// Hello, INe

 

변수 반환

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

let result = sum(1, 2);
console.log(result);				// 3

 

지역 변수

function showMessage() {
    let message = "Hello World";		// message -> Local Variable
    
    console.log(message);
}

showMessage();					// Hello World

alert(message);					// ReferenceError

 

외부 변수

let name = "INe";				// name -> Global Variable

function showMessage(name) {
    let message = `Hello, ${name}`;
    
    console.log(message);
}

showMessage(name);				// Hello, INe

console.log(name);				// INe
  • 외부 변수와 지역 변수가 함께 선언된 경우, 지역 변수가 우선한다.
let name = "INe";				// name -> Global Variable

function showMessage() {
    let name = "ChocoSuffle";			// name -> Local Variable
    let message = `Hello, ${name}`;
    
    console.log(message);
}

showMessage();					// Hello, ChocoSuffle

console.log(name);				// INe

 

매개 변수

function sum(...args) {
    let sum = 0;
    
    for (let arg of args) sum += arg;
    
    return sum;
}

console.log(sum(1));				// 1
console.log(sum(1, 2));				// 3
console.log(sum(1, 2, 3));			// 6
  • 스프레드 문법
let arr = [1, 3, 5];

console.log(Math.max(arr));			// NaN
console.log(Math.max(...arr));			// 5

 

콜백 함수

function ask(question, yes, no) {
    if (confirm(question)) yes()
    else no();
}

function showOk() {
    alert("Agree");
}

function showCancel() {
    alert("Disagree");
}

ask("Do you agree?", showOk, showCancel);

 

재귀함수

function pow(x, n) {
    if (n === 1) {
        return x;
    } else {
        return x * pow(x, n - 1);
    }
}

console.log(pow(2, 3));				// 8

 

클로저 함수

function makeCounter() {
    let count = 0;
    
    return function() {
        return count++;
    };
}

let counter = makeCounter();

console.log(counter());				// 0
console.log(counter());				// 1
console.log(counter());				// 2
function makeAdder(x) {
    let y = 1;
    
    return function(z) {
        y = 100;
        
        return x + y + z;
    };
}

let add5 = makeAdder(5);
let add10 = makeAdder(10);

console.log(add5(2));				// 107
console.log(add10(2));				// 112

 

호출 스케줄링

  • setTimeout
    • 일정 시간이 지난 후에 함수 실행
function showMessage() {
    console.log("Hello World");
}

setTimeout(showMessage, 1000);
  •  setInterval
    • 일정 시간 간격을 두고 함수 실행
let timerId = setInterval(() => console.log("Tick-Tok"), 2000);

setTimeout(() => {
    clearInterval(timerId);
    
    console.log("Stop");
}, 5000);

 

 

1-7. 클래스

 

클래스 생성

class User {
    constructor(name) {
        this.name = name;
    }
    
    showMessage() {
        console.log(this.name);
    }
}

let INe = new User("INe");
console.log(INe.showMessage());			// INe

let ChocoSuffle = new User("ChocoSuffle");
console.log(ChocoSuffle.showMessage());		// ChocoSuffle

 

클래스 상속

class Animal {
    constructor(name) {
        this.name = name;
        this.speed = 0;
    }
    
    run(speed) {
        this.speed = speed;
        console.log(`${this.name}'s speed: ${this.speed}`);
    }
    
    stop() {
        this.speed = 0;
        console.log(`${this.name}: Stop`);
    }
}

class Cat extends Animal {
    hide() {
        console.log(`${this.name}: Hide`);
    }
}

let cat = new Cat("Black cat");

cat.run(5);					// Black cat's speed: 5
cat.stop();					// Black cat: Stop
cat.hide();					// Black cat: Hide

 

오버라이딩

class Animal {
    constructor(name) {
        this.name = name;
        this.speed = 0;
    }
    
    run(speed) {
        this.speed = speed;
        console.log(`${this.name}'s speed: ${this.speed}`);
    }
    
    stop() {
        this.speed = 0;
        console.log(`${this.name}: Stop`);
    }
}

class Cat extends Animal {
    hide() {
        console.log(`${this.name}: Hide`);
    }
    
    stop() {
        super.stop();
        this.hide();
    }
}

let cat = new Cat("Black cat");

cat.run(5);					// Black cat's speed: 5
cat.stop();
/*
Black cat: Stop
Black cat: Hide
*/

 

instanceof

console.log(cat instanceof Cat);		// true
console.log(cat instanceof Animal);		// true

 

 

1-8. 에러 핸들링

 

에러 객체

try {
    lalala;
} catch(e) {
    console.log(e.name);			// ReferenceError
    console.log(e.message);			// lalala is not defined
    console.log(e.stack);			// ReferenceError: lalala is not defined
    console.log(e);				// ReferenceError: lalala is not defined
}

 

에러 생성

let error = new Error("Error Occured.");

console.log(error.name);			// Error
console.log(error.message);			// Error Occured.

 

finally

try {
    console.log("Try");
} catch (e) {
    console.log("Catch");
} finally {
    console.log("Finally");
}
/*
Try
Finally
*/
try {
    console.log("Try");
    
    if (confirm("Make Error")) strange_code();
} catch (e) {
    console.log("Catch");
} finally {
    console.log("Finally");
}
/*
Try
Catch
Finally
*/

 

 

1-9. Window

 

Window

  • 브라우저의 최상위 객체
    • JavaScript 전역 객체
    • 브라우저 창과 관련된 다양한 기능 제공

 

DOM(Document Object Model)

  • HTML 문서 구조를 객체로 표현한다.
  • 페이지 요소를 객체로 제어할 수 있다.
document.body.style.background = "red";

setTimeout(() => document.body.style.background = "", 1000);

 

BOM(Browser Object Model)

  • 문서 외에 브라우저와 관련된 정보에 접근할 수 있다.
  • navigator
    • 브라우저와 운영체제에 대한 정보
document.write("Browser Name: " + navigator.appName + "<br>");
document.write("Browser Code Name: " + navigator.appCodeName + "<br>");
document.write("Browser Version: " + navigator.appVersion + "<br>");
document.write("Browser User Agent: " + navigator.userAgent + "<br>");
document.write("Browser Platform: " + navigator.platform + "<br>");
document.write("Browser Language: " + navigator.language + "<br>");
  • location
    • 현재 URL을 읽거나 새로운 URL로 변경할 수 있다.
document.write("Document URL: " + location.href + "<br>");
document.write("Document Host Name: " + location.hostname + "<br>");
document.write("Document Path: " + location.pathname + "<br>");

 

 

1-10. DOM

 

DOM(Document Object Model)

  • Window 객체가 HTML과 CSS를 통해 렌더링 한 결과물

 

DOM 노드

  • <html>
    • document.documentElement
  • <head>
    • document.head
  • <body>
    • document head

 

getElement

  • getElementById
<div id="elem">
    <div id="elem-content">Element</div>
</div>

<script>
    let elem = document.getElementById("elem");
    
    elem.style.background = "red";
</script>

 

 

1-11. 이벤트

 

이벤트

  • 웹 페이지에서 발생하는 모든 사용자 동작
  • ex. 마우스 이벤트(click, mouseover 등), 폼 요소 이벤트(submit, focus 등) 등

 

이벤트 핸들러

  • HTML 속성
<input type="button" onClick="countCats()" value="Count Cats">
<script>
    function countCats() {
        for(let i = 1; i <= 3; i++) {
            alert(`${i} cats`);
        }
    }
</script>
  • DOM 프로퍼티
<input id="elem" type="button" value="Click">
<script>
    elem.onClick = function() {
        alert("Thank you.");
    };
</script>
  • addEventListener
<input id="elem" type="button" value="Click">
<script>
    function handler1() {
        alert("Thank you!");
    };
    function handler2() {
        alert("Thank you again!");
    };
    
    elem.onclick = () => alert("Hello.");
    elem.addEventListener("click", handler1);
    elem.addEventListener("click", handler2);
</script>

 

 

'SK네트웍스 Family AI캠프 10기 > Daily 회고' 카테고리의 다른 글

73일차. Django  (0) 2025.04.24
72일차. JavaScript & Django  (0) 2025.04.23
70일차. HTML & CSS  (0) 2025.04.21
69일차. Linux  (0) 2025.04.18
68일차. Docker  (0) 2025.04.17

'SK네트웍스 Family AI캠프 10기/Daily 회고' Related Articles

티스토리툴바