설명

가변 매개변수는 함수에 여러 개의 매개변수를 전달할 수 있도록 하는 기능이다.

JavaScript에서는 이를 구현하기 위해 '...'연산자를 사용한다.

이를 통해 함수 내에서 매개변수를 배열로 처리할 수 있다.

 

[1]

function sample(...items) {
	console.log(items);
}

sample(1, 2);           // [1, 2]
sample(1, 2, 3);        // [1, 2, 3]
sample(1, 2, 3, 4);     // [1, 2, 3, 4]

 

[2]

function sample(a, b, ...c) {
	console.log(a, b, c);
}

sample(1, 2);            // 1 2 []
sample(1, 2, 3);         // 1 2 [3]
sample(1, 2, 3, 4);      // 1 2 [3, 4]

 

[1], [2]의 차이점은 함수 정의 시 가변 매개변수의 위치이다.

 

[1] 코드에서는 가변 매개변수가 함수의 매개변수 목록의 맨 끝에 위치했다.

 

[2] 코드에서는 가변 매개변수가 매개변수 목록 중간에 위치했다.

즉, a, b는 고정 매개변수이고, c는 가변 매개변수이다.

sample(1, 2, 3, 4)를 호출하면 a에는 1, b에는 2, c에는 [3, 4]가 출력된다.

저작자표시

'JS' 카테고리의 다른 글

callback  (0) 2024.03.10
전개 연산자 ...  (0) 2024.03.10
function  (0) 2024.03.10
alert  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10

함수 선언

함수 선언 구문
function add(num0, num1) {
	return num0 + num1;
}

 

 변수에 함수 할당
let sub = function(num0, num1) {
	return num0 - num1;
}

 

 블록 본문을 가진 화살표 함수
let mul = (num0, num1) => {
	return num0 * num1;
}

 

간결한 본문을 가진 화살표 함수
let div = (num0, num1) => num0 / num1;

 

생성자 사용
let remainder = new Function('num0', 'num1', 'return num0 % num1;');

 

 

함수 호출

함수 호출
add(100, 50);
sub(100, 50);
mul(100, 50);
div(100, 3);
remainder(100, 3);

 

즉시 함수 호출(IIFE)
(function(num0, num1) {
	let result = 1;
    for(let i=0; i<num1; i++) 
    	result *= num0;
    console.log(result);
})(1000, 20);
저작자표시

'JS' 카테고리의 다른 글

전개 연산자 ...  (0) 2024.03.10
가변 매개변수 ...  (0) 2024.03.10
alert  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10
random  (0) 2024.03.10

설명

alert 함수는 웹 브라우저에서 간단한 경고창을 표시하는 데 사용된다.

사용자에게 메시지를 표시하고 OK 버튼을 클릭하면 창이 닫히게 된다.

일반적으로 디버깅이나 사용자 인터페이스 메시지를 표시할 때 사용된다.

 

예를 들어

alert('안뇽');

이 코드는 '안뇽' 이라는 메시지가 포함된 경고창을 표시한다.

저작자표시

'JS' 카테고리의 다른 글

가변 매개변수 ...  (0) 2024.03.10
function  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10
random  (0) 2024.03.10
array  (0) 2024.03.10 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            document.addEventListener('keydown', function (e) {
                console.log('입력 키 코드: ' + e.keyCode);
                switch (e.keyCode) {
                    case 37:
                        console.log('방향키 좌 입력');
                        break;
                    case 39:
                        console.log('방향키 우 입력');
                        break;
                    case 38:
                        console.log('방향키 상 입력');
                        break;
                    case 40:
                        console.log('방향키 하 입력');
                        break;
                }
            });
        });
    </script>
</head>

<body>

</body>

</html>
저작자표시

'JS' 카테고리의 다른 글

function  (0) 2024.03.10
alert  (0) 2024.03.10
random  (0) 2024.03.10
array  (0) 2024.03.10
addEventListener  (0) 2024.03.10

설명

Math.random()은 JavaScript에서 난수를 생성하는 함수이다.

이 함수는 0 이상 1 미만의 난수를 반환한다.

 

[예]

1 이상 10미만의 난수 생성 

const random = parseInt(Math.random() * 10 + 1);
저작자표시

'JS' 카테고리의 다른 글

alert  (0) 2024.03.10
addEventListener - keydown  (0) 2024.03.10
array  (0) 2024.03.10
addEventListener  (0) 2024.03.10
control statements  (0) 2024.03.07

설명

JavaScript를 사용하여 배열을 다룰 수 있다.

 

문자열 인덱스 접근

const str='안녕하세요';
console.log(str[2]);    // 문자열의 세번째 문자인 '하'를 콘솔에 출력

 

 

배열과 배열 관련 작업

const nameArr = ['홍길동', '임꺽정', '장길산', '일지매'];

// 배열의 길이
console.log("배열의 길이: " + nameArr.length);
// 인덱스 접근
console.lop(nameArr[3]);
// 배열의 끝에 추가
nameArr.push('이채림');
// 배열 10번째 인덱스에 '백억' 추가, 중간에 비어진 인덱스가 생기고, 해당 인덱스는 undefined
nameArr[10] = '백억';
const array = [3.14, '홍길동', 10, ['a', 'b', 'c']];

// push 처럼 가장 뒤에 추가
array[array.length] = '사과';   

// 인덱스 제거 - 인덱스 2 위치에서 1 개 제거
array.splice(2, 1);         

// 인덱스 추가 - 1의 위치에 '수박' 추가
array.splice(1, 0, 수박');

// 특정 값의 인덱스 위치
console.log('홍길동의 위치는 ' + array.indexOf('홍길동'));

 

 

typeof

console.log(typeof []);         // object

const array = ['사과', '바나나', '망고', '딸기'];
console.log(typeof array);      // object

자바스크립트에서 배열은 사실상 객체이다. (빈 배열도)

배열은 Array 객체의 인스턴스이며, Array 객체는 Object 객체를 상속받는다.

따라서 배열도 객체이지만, 배열의 특별한 동작과 메서드를 사용할 수 있습니다.

 

저작자표시

'JS' 카테고리의 다른 글

addEventListener - keydown  (0) 2024.03.10
random  (0) 2024.03.10
addEventListener  (0) 2024.03.10
control statements  (0) 2024.03.07
type conversion  (0) 2024.03.07

설명

이벤트를 대기하고, 해당 이벤트가 발생했을 때 실행할 작업을 설정하는 JavaScript의 메서드이다.

 

 

addEventListener()

target.addEventListener(type, listener [, options]);
  • target : 이벤트를 수신할 대상, 일반적으로 DOM 요소이며, 이벤트가 발생할 때 해당 요소에서 이벤트를 감지한다.
                  [예] document, widow, 또는 HTML 요소
  • type : 이벤트의 유형을 나타내는 문자열, 이벤트의 이름을 지정한다.
                  [예] click, mouseover, keydown
  • listener : 이벤트가 발생했을 때 실행할 함수 또는 이벤트 핸들러
                  이벤트 핸들러 | 이벤트가 발생했을 때 실행되는 코드 블록d

 

DOMContentLoaded 이벤트

document.addEventListener('DOMContentLoaded', () => { });

HTML 문서의 초기 구성이 완료되고 모든 요소가 로드되었을 때 발생한다.

 

 

document.getElementById()

DOM(Document Object Model)에서 특정 ID를 가진 HTML 요소를 찾는 JavaScript 함수이다.

이 함수는 문서 내의 특정 ID를 가진 요소에 접근하여 해당 요소를 반환한다.

 

[예]

<div id="myDiv">Hello, world!</div>
const myElement = document.getElementById('myDiv');

'myElement' 변수에는 ID가 'myDiv'인 <div> 요소가 할당된다.

이렇게 찾은 요소를 이용하여 속성을 변경하거나 이벤트를 추가하는 등의 작업을 수행할 수 있다.

 

 

document.querySelector()

CSS 선택자를 사용하여 특정 요소를 선택하는 JavaScript 함수이다.

선택자 | 해당 요소를 식별하는 데 사용되는 패턴이며, 클래스 이름, ID, 요소 이름등을 지정할 수 있다.

 

[예]

const element = document.querySelector(selector);
  • selector
    • 클래스 이름 : .classname
    • ID : #idname
    • 요소 이름 : elementname

 

DOM 요소 children 속성, length 속성

let $imageContainer = document.querySelector('.image-container');
let len = $imageContainer.children.length;
for(let i=0;i<len;i++){
                    let $img = $imageContainer.children[i];
                    let left = initX + (i*offsetX);
                    $img.style.left = left + 'px';
                    $img.style.top = initY + 'px';
}

 

 

textContent

DOM 요소의 텍스트 내용을 나타내는 속성이다.

이 속성을 사용하면 HTML 요소의 내용을 변경할 수 있다.

 

 

getBoundingClientRect()

DOM 요소의 크기와 위치에 대한 정보를 제공하는 메서드이다.

이 메서드를 호출하면 해당 요소의 경계 상자 정보가 반환된다.

경계 상자 정보 | 요소의 상대적인 위치, 너비, 높이, 상단, 하단, 좌측, 우측의 좌표 등이 포함

 

 

setAttribute()

HTML 요소의 속성을 설정하거나 변경하는 메서드이다.

 

저작자표시

'JS' 카테고리의 다른 글

random  (0) 2024.03.10
array  (0) 2024.03.10
control statements  (0) 2024.03.07
type conversion  (0) 2024.03.07
data type  (0) 2024.03.07

설명

제어문은 프로그램의 실행 흐름을 제어하고 조건에 따라 코드 블록을 실행하는 데 사용된다.

 

 

if문

const date = new Date();       // 현재 날짜와 시간을 나타내는 'Date' 객체 생성
const hour = date.getHours();  // 'Date' 객체에서 현재 시간(시) 가져옴

if(hour < 12)
	alert('오전');              // alert() : 알림 표시
else
	alert('오후');

 

 

switch문

/*
    propt() 함수  : 사용자로부터 입력 받기
    Number() 함수 : 입력된 문자열을 숫자로 변환
*/
const input = Number(propt('숫자를 입력하세요', '숫자'));

switch(input % 2) {
	case 0:
    	alert('짝수');
        break;
    case 1: 
    	alert('홀수');
        break;
    default:
    	alert('숫자가 아닙니다.');
        break;
}

 

 

삼항 조건 연산자

const input = propt('숫자를 입력하세요.', '');
const number = Number(input);

const result = (number >= 0) ? '0 이상' : '0 미만';
alert(result);

 

 

논리 연산자

true || console.log("1. 실행될까요?");

false || console.log("2. 실행될까요?");

/*
    최종적으로 브라우저 콘솔에는 "2. 실행될까요?" 만 출력
    
    [이유]
    ||(OR 연산자)는 피연산자 중 하나라도 참이면 결과가 참이 되므로
    첫번째가 참이면 두번째는 평가되지 않는다.
    첫번째가 거짓이면 두번째가 평가된다.
    
    따라서, 1줄은 로그가 출력되지 않고, 3줄만 로그가 평가되어 출력됐다.
*/

 

 

for문

const todos = ['우유 구매', '업무 메일 확인하기', '필라테스 수업'];

/*
	for...in 루프
    : 객체의 속성을 순회할 때 사용, i는 각 요소의 인덱스를 나타냄
*/
for(const i in todos) {
	console.log(`${i}번째 할 일: ${todos[i]}`);
}

/*
	for...of 루프
    : 반복 가능한 객체를 순회할 때 사용, todo는 각 요소 
*/
for(const todo of todos) {
	console.log(`오늘의 할일 : ${todo}`);
}

/*
	일반적인 for 루프
*/
for(let i=0; i<todos.length; i++) {
	console.log(`${i}번째 할 일: ${todos[i]}`);
}

 

 

while문

let i = 0;
while(i < 10) {
	console.log(i);
    i++;
}

 

 

do-while문

let result = 0;
let i = 0;
do {
	result += i;
    console.log("result=" + result);
    i++;
} while(i <= 10);
console.log('누적합 =' + result);

 

 

break문

반복문을 중단하는 데 사용한다.

반복문 내에서 'break' 문이 실행되면 해당 반복문의 실행이 즉시 종료되고, 반복문을 벗어나게 된다.

 

 

continue문

반복문의 현재 반복을 중지하고 다음 반복을 시작한다.

반복문 내에서 'continue' 문이 실행되면 해당 반복에서 'continue' 문 이후의 코드는 실헹되지 않고 다음 반복으로 넘어간다.

저작자표시

'JS' 카테고리의 다른 글

array  (0) 2024.03.10
addEventListener  (0) 2024.03.10
type conversion  (0) 2024.03.07
data type  (0) 2024.03.07
let과 const  (0) 2024.03.07

+ Recent posts

티스토리툴바