23-02-23 JS

HTML5, CSS3/Java Script

23-02-23 JS

모건이삼촌 2023. 2. 23. 17:44

1. 함수

- 특정 작업을 여러번 반복해야 하는경우 해당작업을 재사용 가능한 구주로 만들게 되는데 이때 사용하는게 함수

- 특정 기능을 수행하는 일련의 코드 블록을 하나의 실행 단위로 만든것(사전적 정의)

1-1) 함수 선언식

- 함수 선언 키워드, 함수명, 파라미터(옵션), 코드블록, 반환 값(옵션)

- 함수가 정의되었다고 자동으로 실행되는것이 아닌, 함수명을 사용해서 호출했을때 실행됨

- 함수명을 사용해서 입력 파라미터에 대응되는 인수(arguments)를 전달하면 함수에 작성된 코드블록이 실행되고 그 결과를 반환함

예제)

function sum(p1, p2) {
  let sum = p1+p2;
  return sum;
}

let sum1 = sum(21, 24);
let sum2 = sum(7, 16);
console.log(sum1);
console.log(sum2);

1-2)함수의 주석처리

- 문서주석 사용

- p1과 p2 좌측에 있는 {}안에 type을 쓰고 returns에는 어떤 기능을 하는지 적으면 된다.

- 함수에 대한 주석을 사용하면 자동완성시 함수에 대한 설명이 나온다.

1-3) 함수 표현식

- 변수에 함수를 할당해서 사용하는 방식

- 익명함수 (훨씬 더 많이 사용)

let sumF = function(p1, p2) {
  return p1 + p2;
}
console.log(sumF(10, 20));

* hoist, var, scope

1-4) Function 생성자 함수 (불편해서 안씀)

- Function 함수에 파라미터와 코드블럭을 문자열 순서대로 전달하여 생성

- 전달하는 파라미터가 없으면 코드블럭만 문자열로 전달하면 되고, 있으면 개수만큼 문자열로 파라미터 이름을 전달

예제)

let sumF2 = new Function("p1", "p2", "return p1+p2");
console.log(sumF2(30, 35));

1-5) 함수를 사용하는 이유

- 코드의 재활용, 유지보수 편의성, 코드 가독성 향상, 코드 품질 향상 및 신뢰성 확보

* 자바스크립트 실행시

- 전체적인 코드 스캔 (자기의 scope)

- 선언파트를 전부 끌어올림 (hoist)

var num;
console.log(num);
var num = 10;
console.log(num);

f1();
f2(); // undefined이기 때문에 에러가 발생

function f1() {
  console.log("f1");
}
var f2 = function() {
  console.log("f2");
}

// var c = 20; // 전역변수 
function f8(a, b) {
  // console.log(c); // 실행시 호이스팅으로 인해 c는 undefined가 출력됨
  c = 10; // 지역변수
  // console.log(c);
  // console.log(window.c);
}
f8();
console.log(c);

↑ 지역 위치에서 전역 변수 선언 (사용하면 안됨)

이름충돌 방지를 위해서 지역변수를 사용해야함

* 클로저

- 함수를 반환할 때 발생

https://developer.mozilla.org/ko/docs/Web/JavaScript/Closures

var num;
console.log(num);
var num = 10;
console.log(num);

f1();
// f2(); // undefined이기 때문에 에러가 발생

function f1() {
  console.log("f1");
}
var f2 = function() {
  console.log("f2");
}


// 함수 데이터 타입
console.log(typeof f1);
console.log(typeof f2);

let f3 = f1; //
f3();

//함수를 파라미터로 보냄
let f4 = function(p1, p2) {
  p1();
  p2();
}

// 파라미터를 통해 함수의 호출을 위임할 수 있음
// 이때 이 함수를 callback이라고 함
f4(f1, function() {
  console.log(1234);
});
f4(f1, () => console.log(1234));

// 람다식
let f5 = function(a, b) {
  return a + b;
}
let f6 = (a, b) => { return a + b } ;
let f7 = (a, b) => a + b;
console.log(f5(10, 20));
console.log(f6(10, 20));
console.log(f7(10, 20));


// var c = 20; // 전역변수 
function f8(a, b) {
  // console.log(c); // 실행시 호이스팅으로 인해 c는 undefined가 출력됨
  c = 10; // 지역변수
  // console.log(c);
  // console.log(window.c);
}
f8();
console.log(c);

function makeFunc() {
  var name = "Mozilla";
  function displayName() {
    alert(name);
  }
  return displayName;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>
  <meta http-equiv='X-UA-Compatible' content='IE=edge'>
  <title>Page Title</title>
  <meta name='viewport' content='width=device-width, initial-scale=1'>
  <!-- <script src="scope.js"></script> -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.3/jquery.min.js" integrity="sha512-STof4xm1wgkfm7heWqFJVn58Hm3EtS31XFaagaa8VMReCXAkQnJZ+jEy8PCC/iT18dFy95WcExNHFTqLyp72eQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
  <script>
    $(function() {
      $("a").click(function() {
        return confirm(this.href + "로 이동하시겠습니까?");
      })
    })

    function makeFunc() {
      var name = "Mozilla";     // 지역변수
      function displayName() {  // 지역함수
       console.log(name);
     }
    return displayName;
    }
    
    // makeFunc()();
    var ret = makeFunc();
    ret();

    (function (a, b) { // 익명함수
      console.log("hello java", a, b);
    })
    (10, 20); // 익명함수의 호출
    ((a, b) => console.log("hello java", a, b)) (10, 20); // 람다식으로 변경 가능..

    let arr = [1, 5, 4, 3, 2, 6, 7];
    function compFn(a, b) {
      return b - a
    }
    arr.sort(compFn);
    console.log(arr);
    // arr.sort(function(a, b) {return a - b});
    // arr.sort((a, b) => -(a - b));
    // console.log(arr);
  </script>
</head>
<body>
  <a href="https://www.google.com">구글</a>
</body>
</html>

※ 내장 객체

1. Object 객체

- 브라우저의 자바스크립트 엔진에 내장된 객체

- object객체는 모든 자바스크립트 객체의 루트객체이다

2. String 객체

- 자바와 거의 동일

2-1) length

let str = "abcd";
str.length = 20;
console.log(str.length);

2-2) indexOf()

- 0번인덱스부터 탐색

str = "abcdeabcdeabcde";
console.log(str.indexOf("cd", 6));

2-3)lastIndexOf()

- 마지막 인덱스부터 탐색

2-4) slice(), substring(), substr

/*
  이상~미만
  slice == substring (시작위치, 종료위치)
  주로 slice 사용
  substr (시작위치, 갯수)
*/
console.log(str.slice(-3, -1));

2-5)replace()

- 특정 문자를 지정한 문자열로 변경

- 처음 발견된 문자열만 바꿈

console.log(str);
console.log(str.replace("ab", "fg"));

정규표현식 사용

console.log(str);
console.log(str.replace(/ab/g, "fg")); // /ab/는 정규표현식

/ab/를 /Ab/로 바꾸고 /Ab/gi를 입력하면 대소문자를 구분하지않고 찾아서 바꿔줌

2-6) toUpperCase(), toLowerCase()

- 혼자 공부해라

2-7) concat

- 그냥 + 써라

2-8) trim()

- 앞뒤공백 삭제

2-9)padStart(), padEnd()

let id = "javaman"; // jav****
let id2 = "batman"; //  bat***
function maskId(str) {
  // console.log(str);
  return str.slice(0, 3).padEnd(str.length, "*");
}
console.log(maskId(id));
console.log(maskId(id2));

* 자동완성이 안되도 당황하지 말자..

2-10) charAt() (잘 안씀)

- 문자열에서 특정 인덱스에 해당하는 문자열 하나를 반환

2-11) charCodeAt()

* fromCharCode

str = "";
for (let i=0; i<26; i++) {
  str += String.fromCharCode(65+i);
}
console.log(str);

2-12) split()

- 문자열 내 특정 구분자를 기준으로 문자열을 분리해서 문자열 배열로 반환

2-13) startsWith(), endsWith()

// 사용방식이 동일함
let str2 = "abcd"; // string
let str3 = new String("abcd"); // object
console.log(str2 == str3);
console.log(str2 === str3);

사용방식은 동일하지만 타입이 다름

3. Number 객체

- 숫자를 다룰때 유용한 프로퍼티와 함수를 제공하는 래퍼 객체

3-1) toString()

- 숫자형 데이터를 문자형 데이터로 반환

let num = 1234;
num = num + ""; // 문자열로 바꾸는 야매코드
num = String(num); // 문자열로 바꾸는 코드
num = num.toString(); // 문자열로 바꾸는 코드2

3-2) toExponential() (많이 안씀)

- 숫자를 지수형으로 반환

num = 1.234567e3;
console.log(num);

3-3) toFixed()

- 소수점 몇번째 자리까지 보여줄지 경정하는 함수

- 지정된 소수점 자리수에 대한 반올림값을 반환

3-4) toPrecision()

*3-5, 3-6은 Number객체가 아님

3-5) parseInt()

- 정수로 반환

3-6) parseFloat()

- 부동소수점으로 반환

4. Array 객체

4-1) toString()

- 배열안의 모든 문자를 쉼포를 이용해 모두 결합해서 하나의 문자열로 반환

4-2) join

- 배열 안의 모든 문자를 파라미터로 지정한 문자를 이용해서 모두 결합하여 하나의 문자열로 반환

let arr = [1, 2, 3, 'a', 'b'];
let result = arr.join("-");
console.log(result);

// prop, method
function Student(no, name, kor, eng, mat) { // 생성자 함수
  this.no = no;
  this.name = name;
  var k = kor; // 캡슐화
  this.eng = eng;
  this.mat = mat;

  this.getKor = function() { // 캡슐화
    return k;
  }
  this.setKor = function(kor) {
    return k;
  }

  this.total = function() {
    return this.getKor() + this.eng + this.mat;
  }
  this.avg = function() {
    return (this.total() / 3).toFixed(2);
  }
}
Student(1, "홍길동", 90, 80, 90);

let stud1 = new Student(1, "홍길동", 90, 80, 90);
// console.log(stud1.avg());

// let students = [];
// students.push(stud1);
// students.push(new Student(2, "고길동", 70, 80, 80));
// students.push(new Student(3, "이길동", 30, 50, 90));
console.log(stud1.kor, stud1.eng, stud1.getKor());

4-3) pop(), push(), shift(), unshift()

let arr = [1, 3, 5, 7];
// push, unshift 추가
// pop, shift    제거
// splice, sort  변화
let arr2 = arr.slice(1); // [3, 5, 7]
console.log(arr); // 
console.log(arr2); // 

arr.push(9);     // 마지막 인덱스에 추가
arr.unshift(11); // 0번인덱스에 추가
console.log(arr);

arr.pop();      //마지막 인덱스 제거
console.log(arr);

arr.shift();    // 0번인덱스 제거
console.log(arr);

* prototype

// prop, method
function Student(no, name, kor, eng, mat) { // 생성자 함수
  this.no = no;
  this.name = name;
  this.kor = kor;
  this.eng = eng;
  this.mat = mat;
}

// 자바스크립트의 프로토타입이란 생성자 함수를 통해 정의된 객체들의 공용공간
Student.prototype.total = function() {
  return this.kor + this.eng + this.mat;
}
Student.prototype.avg = function() {
  return (this.total() / 3).toFixed(2);
}
Student.prototype.value = 10;

Student.getClassNo = function() {
  return 206;
}
Student.value = 20;

let stud1 = new Student(10, "자바맨", 90, 100, 50);
console.log(stud1.total(), stud1.avg(), stud1.value, Student.getClassNo(), Student.value);

for(var i in stud1) {
  console.log(i, stud1[i]);
}

// 날짜 객체에 함수를 추가
Date.prototype.nextDay = function (n) {
  // if(!n) n = 1;
  // n = n || 1
  // !n ? 1 : n ;
  this.setTime(this.getTime() + 1000 * 60 * 60 * 24 * (n || 1) );
  return this;
}
let now = new Date(); // 2023-02-23 16:43:??
now.nextDay(5);        // 
console.log(now);

4-4) splice()

- 첫번째 파라미터 - 새로운 요소를 추가할 인덱스 번호

예제) remove prototype 만들기

Array.prototype.remove = function (n) { // n = 몇번째것을 제거할것인지
  return this.splice(n, 1) // ()
}

arr.remove(2);
console.log(arr);
arr.remove(1);
console.log(arr);

'HTML5, CSS3 > Java Script' 카테고리의 다른 글

window.onload(js)와 $(document).ready(jquery)의 차이 (0)	2024.01.17
23-02-27 JS (0)	2023.02.27
23-02-24 JS (0)	2023.02.24
23-02-22 JS (0)	2023.02.22

현재글23-02-23 JS

개발공부

개발자 도전기

23-02-23 JS

'HTML5, CSS3 > Java Script' 카테고리의 다른 글

'HTML5, CSS3/Java Script'의 다른글

티스토리툴바

« 2025/09 »
일	월	화	수	목	금	토
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

23-02-23 JS

'HTML5, CSS3 > Java Script' 카테고리의 다른 글

'HTML5, CSS3/Java Script'의 다른글

관련글

티스토리툴바