본문 바로가기
FRONT-END/JavaScript

[JS] 0929 수업 13일차

by codechu 2025. 9. 29.

JS(JavaScript)는  html 언어로 작성된 페이지에 이벤트 등 동작과 연산을 적용하기 위해 사용한다.

 

 

적용 방법

 

  • JS를 적용하는 방법은 몇 가지가 있는데 다음과 같다.
    1. 스크립트 태그를 활용한 인라인 코드 작성( HTML 문서 내에 직접 JavaScript 코드를 삽입하는 방식 )
      • HTML문서에 있는 head 혹은 body 태그의 자식이 될 수 있도록 script 태그를 만들어 해당 태그의 내부 내용에 js 문법을 작성하는 방법을 의미한다.
      • HTML 문서 내에 HTML 문법과 JS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들어지고 유지보수가 까다로워진다.
<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <title>인라인 스크립트 예제</title>
</head>
<body>
    <h1>인라인 스크립트 예제</h1>
    <button onclick="alert('버튼이 클릭되었습니다!')">클릭하세요</button>

    <script>
        //console.log()는 자바(Java)의 System.out.println() 과 거의 같은 역할을 해요.
        //둘 다 프로그램 실행 중에 출력(로그)을 화면에 보여주는 기능입니다.
        
        console.log('페이지가 로드되었습니다.');

        // DOM이 완전히 로드된 후 실행하고 싶으면
        window.onload = function() {
            console.log('윈도우 로드 완료!');
        };
    </script>
</body>
</html>

 

 

2.이벤트 기반 속성 활용

  •  코드를 적용하고자 하는 태그에 onclick, onmouseover 등과 같은 이벤트 기반의 속성을 부여하는 방법을 의미한다.
  • HTML 문서 내에 HTML 문법과  JS 문법이 공존하게 됨으로 원하는 코드를 찾기 힘들어지고 유지보수가 까다로워진다.

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>이벤트 기반 속성 예제</title>
</head>
<body>

  <button onclick="alert('버튼 클릭!')">클릭하세요</button>

  <div 
    onmouseover="this.style.backgroundColor = 'yellow';" 
    onmouseout="this.style.backgroundColor = 'white';" 
    style="width:200px; height:100px; border:1px solid #000; margin-top:20px; text-align:center; line-height:100px;">
    마우스를 올려보세요
  </div>

  <input type="text" onchange="alert('입력 변경됨!')" placeholder="텍스트 입력 후 포커스 아웃">

</body>
</html>

 

 

3. 스크립트 태그를 활용한 외부 자바스크립트파일 로드 ( 보통 <body> 끝부분이나 <head>에 넣습니다.)

 

  • 아래와 같이 head 태그의 자식이 되도록 < script >  태그를 작성하여 HTML 파일 외부에서 작성된 JS 파일을 불러와 사용할 수 있다.
<script src="..."></script>

src: 불러올 JS 파일의 주소 및 경로
외부 JS 파일을 로드할 때에는 script 태그의 내부 내용을 비워둔다

 

 

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8" />
  <title>외부 JS 파일 로드 예제</title>
  <script src="main.js"></script> <!-- head에 로드 -->
</head>
<body>
  <h1>외부 자바스크립트 파일 로드</h1>
  
  <!-- 또는 body 끝에 넣어도 됨 -->
  <!-- <script src="main.js"></script> -->
</body>
</html>

 

 

 

변수

 

  • 변수(variable)는 선언(Declaration)및 값 초기화(initiallization)이후 값이 변할 수 있는 것을 의미한다.
  • 변수 선언시 별도의 자료형(타입)을 명시하지 않고, 명명법으로 카멜 케이스를 사용한다
  • 동일한 스코프(scope)에서 사용중인 이름이나 약속된 키워드를 변수의 이름으로 사용할 수 없다.
  • 변수 선언시 값을 부여(assign)하지 않으면 초기 값으로  undefined가 할당된다.
  • 변수는 let 키워드를 사용하여 다음과 같이 선언할 수 있다.

자바스크립트는 동적 타이핑 언어라서 변수 선언할 때 자료형(타입)을 명시하지 않습니다. 대신 변수에 어떤 값을 할당하느냐에 따라 타입이 결정돼요. 변수 선언 키워드는 var, let, const가 있는데, 최신 표준에서는 let과 const를 주로 사용합니다.

 

let [변수 이름];
let [변수 이름] = [값];

let myName = "홍길동";  // 선언 및 초기화
myName = "김철수";      // 값 변경 가능

 

 

코드출력 결과설명

console.log(age) 30 (변수 값) 변수 age 값 출력
console.log( age ) 30 (변수 값) 공백 무시, 변수 값 출력
console.log('age') age (문자열) 문자열 'age' 그대로 출력

 

 

상수

 

  • 상수(Constant)는 선언 및 값 초기화 이후 값이 변하지 않는 것을 의미한다.
  • 상수 선언시 별도의 자료형(타입)을 명시하지 않고, 명명법으로 카멜 케이스(소문자대문자표기법 - (ex)userName)를  사용한다.
  • 동일한 scope 에서 사용중인 이름이나 약속된 키워드를 상수의 이름으로 사용할 수 없다.
  • 상수는 선언시 값을 반드시 부여하여야 한다.
  • 상수 선언 및 값 초기화
const userName = "홍길동";  // 상수 선언 및 초기화
// userName = "김철수";    // 오류! 상수 값 변경 불가

 

 

자료형

 

문자열

  • 문자열 자료형을 표현하기 위해서 홀따움표(')혹은 쌍따옴표(") 혹은 백틱(`)을 사용한다.(쌍따옴표는  사용 잘 안함)
  • HTML과의 연동이 많은 자바스크립트 특성상 쌍따옴표를 많이 사용하는 HTML을 위해 문자열 표현시 쌍따옴표를 많이 사용하지 않고 홀따옴표를 많이 사용한다.
  • 백틱을 사용한 문자열 표현식 ( ${ } )을 활용해 문자열  사이에 외부 변수나 상수를 삽입하기 쉽고, 문자열 이어붙이기가 필요 없어 편리하다.
 console.log('이름은' + name + '이고, 나이는' + age +'살 이다')
 console.log(`이름은 ${name}이고 나이는 ${age}살입니다`)

 

숫자

 

  • 별도의 특수문자를 사용하지 않으며 자바스크립트의 숫자는 정수와 실수를 별도로 구분하지 않는다.

 

논리값

 

  • 별도의 특수문자를 사용하지 않으며 ( true ) ( false ) 로  이루어져있다

 

널리쉬(Nullish)

 

  • 널리쉬는 Null과  undefined 를 포함한다.
  • Null은 스택 영역의 Null 이라는 값을 가지고 있으며, 힙에는 빈 값을 참조하고 있다.
  • undefined는 스택 영역의 undefined 라는 값을 가지고 있으며, 힙에는 아무 값도 할당되어 있지 않다.
  • null과 undefined는 유사하나 null이  보다 의도적인 의미를 가진다.
  • typeofnull은 object 임에 유의한다.
  • typeofundefined는 undefined 임에 유의한다.
  • 어떠한 널리쉬 값에 대해 null을 피연산자로 동등( == ) 비교시 참 (true)이 연산됨을 활용할  수 있다.
    • null == undefined는 참( tue )이다

 

let a = null;
console.log(a); //출력: null → 실제 값
console.log(typeof a); // 출력: "object" → a 값의 타입(문자열)

 

 

 

배열

  • 배열(array)는 하나의 변수가 여러개의 값을 가질 수 있도록 하기위해 사용한다.
  • 배열의 작성 형태는 JSON(JavaScript Object Notation Array)의 형태와 유사하다.
  • 배열은 대괄호( [,] )로 인자(들)을 감싸고, 각 인자는 쉼표(,)로 구분할 수 있다.
  • 배열이 가지는 인자는 인덱스(순번)를 가지고, 해당 인덱스는 반드시 0번부터 시작하며, 배열에 대괄호 ( [,] ) 인자 접근 연산자를 사용해 각 인자에 접근할 수 있다.
let [변수 이름 ]=[[인자,...]] ;
위와 같이 대괄호( [,] )로 인자를 감싸고, 각 인자는 쉼표(,)로 구분할 수 있다.
가령 , 'Apple' , 'banana' , 'orange' 라는 세 개의 문자열을 인자로 가지는 
fruits라는 배열은 아래와 같이만들 수 있다.

let fruits =['apple','banana','orange']
배열이 가지는 인자는 인덱스를 가지는데, 첫번재 인자인 apple 부터 0번이며 순차적으로 1씩 증가한다.
아래와 같이 배열에 인자 접근 연산자 ( [,] )와 인덱스를 통해 각 인자에 접근할 수 있다.

console.log(fruits[0]) // apple
console.log(fruits[1]) // banana

추가로, 인자 접근시 음수나 범위를 벗어난 값을 전달할 경우 undefined가 된다.

console.log(fruits[-1]) // undefined
console.log(fruits[3]) // undefined

 

 

객체 속성( 배열의 속성 )

  • length : 배열이 가지고 있는 인자의 개수이다.

 

객체 함수

  • at(x): 호출 대상인 배열이 가지고 있는 인덱스가 x인 인자를 반환한다. ( 그냥 배열출력과는 다른 점 :음수를 취급한다 )

-1 이 체리 -2가 바나나 -3 사과

  • concat(x) :  호출 대상인 배열가 인자인 배열 x 를 이어 붙인 새로운 배열을 반환한다. ( 기존의 배열들을 이어붙여 새로운 배열을 만들고 기존배열은 가만히 냅둠 )
    • fill(...)
 let work=['apple','amazon','google','samsung']
work.fill('microsoft')
console.log(work)

결과 - > ['microsoft', 'microsoft', 'microsoft', 'microsoft']
  • fill(x)  :  호출 대상인 배열이 가지고 있는 모든 인자를 x 로 대체한다. ( 기존 배열의 인자를 바꾼 것 concat 이랑은 다름)
  • fill(x , f) : 호출 대상인 배열이 가지고 있는 인자들 중 인덱스가 f 이상인 인자를 x 로 대체한다.
  • fill(x , f , t ) : 호출 대상인 배열이 가지고 있는 인자들 중 인덱스가 f 이상이고 t 미만인 인자를 x 로 대체한다.
work.fill('netflix', 1, 3);
console.log(work);
// 결과: ['apple', 'netflix', 'netflix', 'samsung']
    • inclueds(x) : 호출 대상인 배열이 가지고 있는 인자 중 그 값이 x와 일치하는 인자가 존재하는가의 여부(논리값)를 반환한다.
    • indexOf(x) : 호출 대상인 배열이 가지고 있는 인자 중 그 값이  x 와 일치하는 가장 빠른 인자의 인덱스를 반환한다. 그러한 인자가 없다면 -1을 반환한다.
    • lastIndexOf(x) : 호출 대상인 배열이 가지고 있는 인자 중 그 값이  x 와 일치하는 가장 마지막 인자의 인덱스를 반환한다. 그러한 인자가 없다면 -1을 반환한다.
    • join (...) 
      • join() :  호출 대상인 배열이 가지고 있는 인자를 쉼표 ( , ) 로 이어붙인 문자열을 반환한다.(구분자 생략 시 기본값 쉼표(,) 사용)
      • join(x) : 호출 대상인 배열이 가지고 있는 인자를 x로 이어붙인 문자열을 반환한다.
 
console.log(fruits.join(' - '));
// 출력: "apple - banana - cherry"

  • pop() :  호출 대상인 배열이 가지고 있는 인자 중 마지막 인자를 배열에서 제거하고 이를 반환(제거한 요소를 반환)한다.
let fruits = ['apple', 'banana', 'cherry'];

let last = fruits.pop();

console.log(last);    // 'cherry' (제거된 마지막 요소)
console.log(fruits);  // ['apple', 'banana'] (요소 하나 제거된 배열)

 

  • push(x) : 호출 대상인 배열의 끝에 새로운 인자 x 를 추가하고 배열의 길이 (length)를 반환한다.
  • reverse() : 호출 대상인 배열이 가지고 있는 인자의 순서를 뒤집는다.( 원래 배열에 영향을 받음 )
  • shift () : 호출 대상인 배열이 가지고 있는 인자 중 첫번째 인자를 배열에서 제거하고 이를 반환한다.(첫번째 값을 반환)
  • slice(...) 
    • slice() : 호출 대상인 배열이 가지고 있는 인자를 그대로 가지는 배열을 복사하여 반환한다.( 똑같지만 다른 객체다)
    • slice( f ) : 호출 대상인 배열이  가지고 있는 인자 중 인덱스가 f 이상인 인자를 가지는 배열을 복사하여 반환한다.
    • slice( f , t ) : 호출 대상인 배열이 가지고 있는 인자 중 인덱스가 f 이상, t 미만인 인자를 가지는 배열을 복사해 반환하다.
  • splice(...)
    • splice ( i , d ) : 호출 대상이 되는 배열이 가지고 있는 인자 중 그 인덱스가 i 인것부터 d개를 제거해 제거된 인자를 배열로 반환한다.
    • slice( i, d, ...v) : 호출 대상이 되는 배열이가지고 있는 인자 중 그 인덱스가 i 인것부터  d 개를 제거하여 제거된 인자를 배열로 반환하고, 가변인자 v 의 첫번째 인자의 인덱스가 i 가 될 수 있도록 추가한다. 

 

함수를 인자로 가지는 함수

 

every( f(x?, i?, a?)) : 호출 대상이 되는 배열이 가지고 있는 모든 인자가 전달된 함수 f 의 전달 인자 x 로 전달되었을 때 함수 f 가 참(true) 을 반환하는가의 여부를 반환한다. 함수 호출시 전달되는 인자는 순서대로 아래와 같고 선택적으로 사용할 수 있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열
const numbers = [2, 7, 6, 8]; 

// 모든 요소가 짝수인지 검사
const allEven = numbers.every((num) => num % 2 === 0);

console.log(allEven);  // ?

 

 

  • every()는 모든 요소가 조건을 만족해야 true를 반환해요.
  • 배열 [2, 7, 6, 8]에서 두 번째 요소인 7이 짝수가 아니기 때문에 조건 num % 2 === 0을 만족하지 않아요.
  • 따라서, every()는 **false**를 반환합니다.

filter(f(x?, i?, a?)) : 호출 대상이 되는 배열이 가지고 있는 인자 중 함수 f 의 전달 인자로  참( true )을 반환하는 인자만을 인자로 가지는 새로운 배열을 반환한다. 이를 만족하는 인자가 없다면 빈 배열( [ ] ) 을 반환한다.  함수 호출시 전달되는 인자는 순서대로 아래와 같고 선택적으로 사용할 수 있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열

 

 < 짝수인 요소만 골라내기 >
const numbers = [1, 2, 3, 4, 5, 6];

const evens = numbers.filter((num) => num % 2 === 0);

console.log(evens);  // [2, 4, 6]

< 인덱스가 짝수인 요소만 골라내기 >

const fruits = ['apple', 'banana', 'cherry', 'date'];

const filtered = fruits.filter((fruit, index) => index % 2 === 0);

console.log(filtered);  // ['apple', 'cherry']

 

 

find ( f(x?, i?, a?))  : 호출 대상이 되는 배열이 가지고 있는 인자 중 함수 f 의 전달 인자로 참(true)을 반환하는 첫번째 인자를 반환한다. 그러한 인자가 없다면 undefined 를 반환한다. 함수 호출시 전달되는  인자는 순서대로 아래와 같고 선택적으로 사용할 수 있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열

 

 


findLast( f(x?, i?, a?))  : 호출 대상이 되는 배열이 가지고 있는 인자 중 함수 f 의 전달 인자로 참(true)을 반환하는 첫번째 인자를 반환한다. 그러한 인자가 없다면 undefined 를 반환한다. 함수 호출시 전달되는  인자는 순서대로 아래와 같고 선택적으로 사용할 수 있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열

 

findIndex ( f(x?, i?, a?)) : 호출 대상이 되는 배열이 가지고 있는 인자 중 함수 f 의 전달 인자로 참(true) 을 반환하는 첫번째 인자의 인덱스를 반환한다. 그러한 인자가 없다면 -1을 반환한다. 함수 호출 시 전달되는 인자는 순서대로 아래와 같고 선태적으로 사용할 수 있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열

foreach( f(x?, i?, a?)) : 호출 대상이 되는 배열이 가지고 있는 인자 전체에 대해 함수 f 의 전달 인자로 해당 함수를 단순 반복 실행한다.

 

 

map(  ( f(x?, i?, a?)) : 호출 대상이 되는 배열이 가지고 있는 인자에 대해 함수 f 의 전달 인자로 반환되는 값으로 치환되는 인자를 각 인자로 가지는 새로운 배열을 반환한다. 함수 호출 시 전달되는 인자는 순서대로 아래와 같고 선택적으로 사용할 수 있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열

 

some (  ( f(x?, i?, a?)) : 호출 대상이 되는 배열이 가지고 있는 인자 중 하나라도 함수 f 의 전달 인자로 참 (true) 를 반환하는가의 여부를 반환한다.  함수 호출시 전달되는 인자는 순서대로 아래와 같고 선택적으로 사용 할 수  있다.

  • x : 순차적으로 반복할  호출 대상인 배열이 가지는 인자
  • y :  순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • a : 호출 대상인 배열

 

sort(...) 

  • sort() : 호출 대상이 되는 배열이 가지고 있는 인자가 가지고 있는 값을 문자열 변환하였을 때 가지게 되는 유니코드 값을 기준으로 정렬한다.
  • sort(f(a,b)) : 호출 대상이 되는 배열이 가지고 있는 인접한 인자들을 각각 a 와 b라고 하였을 때, 비교함수 (Comepare Function) f 가 반환하는 값이 0보다 작을 경우 a 를 b 보다 선행하도록 ( 낮은 인덱스 ) 배치한다. 0 일 경우 a 와 b의 배치를 변경하지 않는 다. 0 보다 클 경우 b 를 a 보다 선행하도록 배치한다.

 

reduce(f(c?,i?,a?),s?) : 호출 대상이 되는 배열이 가지고 있는 인자를 반복하여 누산(누적계산)하여 누산된 값을 반환한다. 

  • c : 반복하고 있는 누산기 (Accumulator)
  • x : 순차적으로 반복할 호출 대상인 배열이 가지는 인자
  • i : 순차적으로 반복할 호출 대상인 배열이 가지는 인자의 인덱스
  • a : 호출 대상인 배열
  • s : 반복할 누산기 ( c ) 의 초기값

 

오브젝트

 

오브젝트(object)는 키(key)와 값(value)으로 이루어진 쌍(pair)의 집합을 가지는 객체이다.

  • 오브젝트의 작성 형태는 JSON(Java Script Object Notation)의 object 와 유사하다.
  • 오브젝트는 중괄호 ( { , } ) 로 각 쌍들을 감싸고, 그러한 쌍들이 가지는 키와 값은 콜론 (;)로 구분하며, 하나의 오브젝트는 여러개의  쌍을 쉼표(,)로 구분해 가질 수 있다.
  • 오브젝트가 가지는 쌍들에는 순서가 없음으로 인덱스를 통한 접근이 불가능하다. (인덱스 개념이 없음)
  • 오브젝트의 쌍이 가지고 있는 값에는 키를 통해 접근할 수 있고, 하나의 오브젝트가 가지는 동일한 계층의 키는 고유해야 한다.(중복 불가능)
  • 오브젝트가 가지는 키는 반드시 문자열이어야 하고 값의 타입에는 제한이 없다.
  • 오브젝트의 작성은 아래와 같은 형태로 한다.
let [이름] = {
[키 1]: [값 1],
[키 2]: [값 2],
...
};

가령, 국가 코드별 한국어 이름을 가지는 오브젝트의 구조는 아래와 같이 작성할 수 있다.

let countryMap = {
KR :'대한민국'.
US : '미국',
JP : '일본',
DE : '독일',
FR : '프랑스'
};

키 이름을 통해 쌍이 가지는 값에 접근하기 위해서는 오브젝트에 대괄호( [ , ] ) 
혹은 멤버 접근 ( . ) 연산자를 샤용할 수 있다.

console.log( countryMap.KR); 대한민국
console.log( countryMap['KR']); 대한민국

멤버접근 ( . ) 을 통해 접근할 때에는 키 이름을 문자열로 취급하여서는 안된다.
대괄호([ . ]) 를 통해 접근할 때에는 키 이름을 문자열로 취급하여야 한다.

 

쌍 추가 및 값 변경

  • 오브젝트에 이미 존재하는 쌍의 값을 변경하거나, 존재하지 않는 쌍을 추가하기 위해 아래와 같이 작성할 수 있다.
[오브젝트].[키] = [값];
[오브젝트] . [[키 문자열 ]] = [값];

<사용법> 

person.age=31;
console.log(person.age)

 

쌍 삭제

  • 존재하는 쌍을 삭제하기 위해 아래와 같이 작성할 수 있다.
delete [ 오브젝트].[키];
delete[오브젝트].[[키 문자열]];

<사용법>

delete person.age;
console.log(person);

 

 

정적함수

 

  • 오브젝트의 정적인 함수는 Object 를 통해 접근한다.
  • keys(x): 전달받은 오브젝트 x가 가지는 키들을 인자로 가지는 1차원 배열을 반환한다.
  • values(x): 전달받은 오브젝트x가 가지는 값들을 인자로 가지는 1차원 배열을 반환한다.
Object.keys(obj)
Object.values(obj)

 

keys

const user = {
  name: "Alice",
  age: 25,
  isStudent: false
};

console.log(Object.keys(user));  
// 👉 ['name', 'age', 'isStudent']

 

values

console.log(Object.values(user));  
// 👉 ['Alice', 25, false]

 

 

실수 : 배열에서는 원하는 값이 나오지 않음

 

let work=['apple','amazon','google','samsung'] 
console.log(Object.keys(work))

 

이렇게 출력하면 키값이 아니라 배열의 인덱스 번호들이 나옴 - > ['0', '1', '2', '3']

'FRONT-END > JavaScript' 카테고리의 다른 글

[JS] 1001 - 1013  (0) 2025.10.01
[JS] 0930  (0) 2025.09.30

관련글

티스토리툴바