자바스크립트

지환·2023년 11월 7일

자바스크립트

목록 보기

4/4

const user = {
    name : "이순신",
    age : 45,
    email : null
}
console.log(user.name) //이순신
console.log(user.age)//45
console.log(user.email) // null
console.log(user.myCar) // 없는 속성을 출력하려면 undefined가 출력된다.

--------------------------------------------
이순신
45
null
undefined

const getNumber = () => {

    return 123;
}


console.log(typeof getNumber)
console.log(typeof getNumber())

----------------------------------
function
number


 hello = () => {
    console.log("hello");

}

hello()

console.log(hello) 
 
// hello와 hello()랑 다른가?  [Function: hello]-> 메소드를 호출한 것이 아니다. // hello
-----------------------------
  hello
[Function: hello]

함수

function calcRectArea(width, height) {
  return width * height
}

-------------------------------
  에로우 펑션으로 바꿔보자.
  
const calcRectArea1 = (width,height) => {
  return width * height
}

console.log(calcRectArea(5, 6))

콜백함수

/**
 * 일급 객체 -> fist-class Object
 * 일반 객체처럼 모든 연산이 가능하다.
 *- 함수의 매개변수로 전달 가능하다.
 *- 함수의 반환값으로 쓸 수 있음
 *- 할당 명령문 사용가능
 *- 동일 비교대상


 - 일급함수 -> first-class Object : 코틀린이나 파이썬에서도 지원
  - 함수가 일반객체처럼 모든 연산이 가능하다.
  - 함수의 반환값으로 쓸 수 있음
  - 할당 명령문 사용 가능
  - 동일 비교 대상

  - 고차함수 ->High-order-function
   - 인자로 함수를 받거나(콜백함수)
   - 함수를 반환하는 함수를 고차함수라한다.

   - 콜백함수 -실습
   : 함수도 객체가 될 수 있다.
   : 일급객체라고 말하기도 한다.

 */

const hap = (a, b) => a + b
const minus = (a, b) => a - b
// 파라미터 자리는 어디서 결정되나요?
function account(a, b, action) {
  let res = action(a, b)
  return res
}

console.log(account(1, 2, hap))
console.log(account(4, 7, minus))

내부적으로 : 전달될 당시에 함수를 바로 호출해서 반환된 값을 전달하는게 아니라, 함수를 가르키고 있는 함수의 참조값이 전달된다.

함수는 고차함수 안에서 필요한 순간데 호출이 나중에 된다.

고차함수

// 고차함수 -- 반환형으로 함수 사용할 수 있다.

const sayHello = () => {
  return function () {
    console.log('hello')
  }
}

// return 쪽에 함수가 올 수 있다.
hap = (a, b) => a + b

const add = hap // 같은 주소번지를 갖는다.

console.log(add)
console.log(hap)

const hello = sayHello()
hello()

console.log(hello)
// 이렇게 Function으로 나오는 이유는 이름이 없기 때문이다. -> 익명객체이기 때문이다.

// 고차함수는 리턴에 오는 값이 함수니깐 이것을 호출하려면
// 할당연산자로 일단 받아내고 처리해야된다. return에 함수가 있기 떄문에

구독발행모델-1

// 함수 안에서 함수 선언이 가능하다. - 일급함수 - 리덕스 - 플럭스 아키텍쳐
const creatStore = () => {
  //상태를 관리하는 변수를 선언이 가능하다.
  let state // 상태관리
  let handler = []

  const send = () => {
    //함수 안에 함수를 또 선언할 수 있다.
  }

  const subscribe = (handler) => {
    // 나를 구독해줘
    handlers.push(handler) // 핸들러를 담아준다. 핸들러 배열에다가
    // 기억해줄께, 영속성 유지
  }

  return {
    send,
    subscribe,
  } // 객체를 여러개(함수를 넣을 수 있다.)
}

const store = creatStore()
console.log(store)

구독발행모델-2

// 함수 안에서 함수 선언이 가능하다. - 일급함수 - 리덕스 - 플럭스 아키텍쳐
const creatStore = () => {
  //상태를 관리하는 변수를 선언이 가능하다.
  let state // 상태관리
  let handler = []

  const send = () => {
    //함수 안에 함수를 또 선언할 수 있다.
  }

  const subscribe = (handler) => {
    // 나를 구독해줘
    handlers.push(handler) // 핸들러를 담아준다. 핸들러 배열에다가
    // 기억해줄께, 영속성 유지
  }

  return {
    send,
    subscribe,
  } // 객체를 여러개(함수를 넣을 수 있다.) - 고차함수
}

const store = creatStore()
console.log(store)

store.subscribe(() => {
  console.log('subscribe')
}) //함수를 치환할 수 있다.

store.send()

함수표현식

// 함수 선언문 function name(){}
// 함수 표현식 const name = function(){} 익명 함수
// 익명 함수 일 경우 외부에서 사용이 불가하다.

let hap = function (a, b) {
  return a + b
}

hap = (a, b) =>
  a +
  b(
    // console.log(hap(1, 2))

    // 즉시 실행함수 --> 정의되자 마자 즉시 실행된다.
    function run() {
      console.log('run')
    },
  )() //--> 해당 부분에서 호출

// 함수 선언문 function name(){}
// 함수 표현식 const name = function(){} 익명 함수
// 익명 함수 일 경우 외부에서 사용이 불가하다.

let hap = function (a, b) {
  return a + b
}

hap = (a, b) => a + b

console.log(hap(1, 2))(
  // 즉시 실행함수 --> 정의되자 마자 즉시 실행된다.

  function run() {
    console.log('run')
  },
)() //--> 이 부분에서 호출

let hap2 = function sum(a,b){
  return a+b
}

// 변수에 함수에 할당하여 표현하는 경우 이름을 지어주어도 외부에서 사용이 불가하다.
// 쓰지말자

함수 설계 시 주의사항

/**
 * 불변성
 * - 파라미터로 참조형을 받을 수 있다. (원시형은 해당 없다.)
 *
 * 원시형은 - 값에 의한 복사
 * 객체값은 - 참조에 의한 복사(메모리가 복제)
 * --> 여기서 불변성에 대한 이슈가 발생
 * --> 원본도 바뀐다.
 *
 *
 */

function funcA(num) {
  num = 5
  console.log(num)
}

const value = 3

funcA(value)
console.log(value)

// 원시형인 경우 함수내부에서 상태를 변경하더라도 외부에 영향이 없다.

//대조본
const fruits = { name: 'apple' }

function funcB(obj) {
  // 파라미터로 받아오는게 참조에 의한 호출이다.
  obj.name = 'tomato'
  console.log(obj.name)
}

funcB(fruits)

console.log(fruits)

//원본 자체를 바꿔버린다.

필자가 보면서 느꼈던 점은 파라미터로 제일 큰 부모를 받고(obj) 함수를 호출할 땐 명확히 작성한다.

객체

//Object Create
// Key 와 Value로 온다. 문자열,심볼, 다 온다.
// value에는 원시값,객체,함수도 올 수 있다. -->함수도 객체니깐

let sonata = {
  carName: '2024년형 소나타',
  carColor: '검정',
  carWheel: 4,
}

console.log(sonata.carName)
console.log(sonata['carColor']) // 싱글쿼테이션을 반드시 줘야한다. 'key'

속성 추가 및 삭제가 가능하다

//Object Create
// Key 와 Value로 온다. 문자열,심볼, 다 온다.
// value에는 원시값,객체,함수도 올 수 있다. -->함수도 객체니깐

let sonata = {
  carName: '2024년형 소나타',
  carColor: '검정',
  carWheel: 4,
}

console.log(sonata.carName)
console.log(sonata['carColor']) // 싱글쿼테이션을 반드시 줘야한다. 'key'


sonata.speed = 30;
console.log(sonata['speed'])

삭제도 가능함

// 객체 삭제도 가능함
delete sonata.carColor //delete < 띄어쓰기
console.log(sonata.carColor)

클래스

class Fruits {
  constructor(name, emoji) {
    this.name = name
    this.emoji = emoji
  }
  // 고전적 방법으로 : 생성자 함수로 구현했지만, 훅으로 지원해주기 시작했다. this에 대한 이슈
  display = () => {
    console.log(`${this.name}:${this.emoji}`)
  }
}

const kiwi = new Fruits('jihwan', '❤️')
console.log(kiwi)
console.log(kiwi.emoji)
console.log(kiwi.name)

const tomato = new Fruits('tomato', '🎶')

console.log(tomato)
console.log(tomato.emoji)
console.log(tomato.name)

kiwi.display()

display을 function 예약어로 사용하면 안 된다. 클래스 안에서 선언 할 땐, ArrowFunction을 써라

export class DeptVO {
  constructor(deptno, dname, loc) {
    this.deptno = deptno
    this.dname = dname
    this.loc = loc
  }

  set setDeptno(value) {
    this.deptno = value
  }
  set setDname(value) {
    this.dname = value
  }
  set setloc(value) {
    this.loc = value
  }

  get getDeptno() {
    return this.deptno
  }
  get getdname()
  {
    return this.dname
  }
  get getloc()
  {
    return this.loc
  }
}

import { DeptVO } from './deptvo'

const dvo = new DeptVO(30, '개발부', '서울')
console.log(dvo)

console.log(dvo.getDeptno)
console.log(dvo.deptno)

console.log(dvo.getdname)
console.log(dvo.dname)

모듈화와 expert에 대한 차이를 알고있어야한다.

백틱

let lastName = '나'
let firstName = '신입'
let fullName = `${lastName} ${firstName}`

console.log(fullName)
---------------------------------------------------
나 신입 나온다.  

let fullName = `${lastName}${firstName}`
=============================================
나신입

let lastName = '나'
let firstName = '신입'
let fullName = `${lastName}${firstName}`

console.log(fullName)

lastName = '야'
firstName = '너두'
fullName = `${lastName}${firstName}`
console.log(fullName)//야너두

funName = (lastName, firstName) => {
  return `${lastName}${firstName}`
}

console.log(funName(lastName, firstName)) //야너두

에로우 펑션과 일반적인 펑선의 이슈가 존재한다. 에로우펑션을 적었을 시 위에서 호출하게 되었을 때 읽어들이지 못한다. 하지만 일반적인 펑션은 호출가능하다. 해당 부분 기억하자.

function으로 시작한 함수는 위치에 대한 이슈는 없다.

/***
 *
 * 1. 원시형 : 부르면 값이다.
 * 2. 참조형 : 부르면 (Heap) - 사이즈 정할 수 없다.
 *
 * 왜냐하면 변수(객체,함수)는 주소값만 가지고 있고 실체는 다른 메모리에 저장함.
 *
 */

add = (a, b) => {
  return a + b
} //리턴을 사용하지 않으면 undefined 반환된다. 0이 아닌 것은 모두 true

// {} : 객체 [] : 배열

console.log(add) // 주소번지
console.log(add(1, 2)) // 값
console.log(add(1, null)) //
console.log(add(1))
console.log(add(1, undefined))
console.log(add(1, {})) // 덧셈을 할 수 없다.
console.log(add(1, []))
/**
 * 여기서 뭘 알 수 있는가?
 * 1. add변수와 hap의 변수는 같은 주소번지를 갖는다.
 * console.log(hap == add) // true
 * console.log(hap === add) // true
 * console.log(typeof hap) // 'function'
 * console.log(typeof add) // 'function'
 * console.log(hap) // [function : add]
 *
 * 2. 함수의 이름은 함수를 참조하고 있다.
 *  - 그래서 함수도 객체다.******콜백함수에서 중요한 Key
 *
 */

const hap = add

console.log(hap) //주소번지가 찍힌다. add==hap은 같은 주소번지를 갖는다.
console.log(hap(1, 5))

console.log(hap()) // 자바스크립트에선 파라미터가 달라도 이름이 같으면 호출이된다.
// 결론 : 같은 이름의 함수를 가질 수 없다. (메소드 오버로딩 x)
hap1 = () => {
  return undefined
}

파라미터

// 파라미터, 인자

function hap(a, b) {
  console.log(arguments)
  return a + b
}

hap(1, 2)

// 파라미터, 인자

function hap(a, b) {
  console.log(arguments) // [Arguments] {'0' : '1', '1' : '2', '3' : '3'}
  console.log(arguments[0])
  console.log(arguments[1])
  console.log(arguments[2])
  return a + b
}
// arguments가 배열이라는 것을 알 수 잇다.
// 파라미터의 기본값을 undefined이다.
// 파라미터의 정보는 함수 내부에서 접근이 가능한 argument 객체에 저장된다.


hpa2 = (a, b) => {}
hap(1, 2, 3)

// 파라미터, 인자

function hap(a, b) {
  console.log(arguments) // [Arguments] {'0' : '1', '1' : '2', '3' : '3'}
  console.log(arguments[0])
  console.log(arguments[1])
  console.log(arguments[2])
  return a + b + arguments[0]
}
// arguments가 배열이라는 것을 알 수 잇다.
// 파라미터의 기본값을 undefined이다.
// 파라미터의 정보는 함수 내부에서 접근이 가능한 argument 객체에 저장된다.

hpa2 = (a, b) => {}
console.log(hap(1, 2, 3))

ES6

function hap3(a = 2, b = 3) {
  return a + b
}

매개변수 기본값을 줄 수 있다.

Rest Parameter


hpa2 = (a, b) => {}
console.log(hap(1, 2, 3))

function hap3(a = 2, b = 3) {
  return a + b
}

function sum(...numbers) {
  console.log(numbers)
}

sum(1, 2, 3, 4, 5)

function sum2(x, y, ...numbers) {
  console.log(x)
  console.log(y)
  console.log(numbers)
}

sum2(1,3,5,7,8)

리턴

// 리턴

// return을 명시적으로 하지 않으면 자동으로 undefined 반환된다.

function hap(a, b) {
  return undefined
}

console.log(hap(1, 2))

function m(num) {
  if (num < 0) {
    return 1
  }
  else{
    return num
  }

}

// m(5)
// m(-5)

console.log(m(-5))
console.log(m(10))

리턴을 해야 m에 넘어 오는 것을 알 수있다. 만약에 다른 경우를 보여주겠다.

// 리턴

// return을 명시적으로 하지 않으면 자동으로 undefined 반환된다.

function hap(a, b) {
  return undefined
}

console.log(hap(1, 2))

function m(num) {
  if (num < 0) {
    return
  }

  console.log(num)
}

m(5)
m(-5)

console.log(m(-5))
console.log(m(10))

false /타입

// 원시자료형 
// 상수 선언하기
const num1 = 1;
const num2 = 2;
console.log(num1 + 1);
console.log(typeof(num1 + 1));//instanceOf연산자
console.log(num1+num2);
console.log(num1+null);
console.log(typeof(num1+null));
console.log(num1+undefined);//Not a Number
console.log(typeof(num1+undefined));//Not a Number
console.log(num1-num2);

/*
  자료형(Data Type)
  원시형 자료(primative type)  -특정값이 메모리에 바로 저장(값만)
  1. 문자(String)
  2. 숫자(Number)
  3. 논리형(Boolean :true, false)
  //개발자센터에서 자주 출몰함- 디버깅 - 리스크
  4. undefined : 변수를 선언하고 그 값을 할당하지 않으면 undefined가 대신 저장됨(에러상황) - NullPointerException
  참조형 자료(reference type) :값이 위치하고 있는 참조주소값만 메모리에 저장
  -> 관련된 내장함수(prototype)까지도 같이 참조됨
  5. null(Object) - 명시적으로 특정 변수의 값을 비워둘때
  6. array(Object) - 연관된 값들을 그룹으로 묶어서 관리하는 형태이다
  7. 객체(Object) -  Object 데이터를 key라는 인덱싱을 통해 자료를 구조적으로 묶어놓은 상태
  6,7, JSON
  array -> json, json -> array 목록처리시에 필수템

*/

const a = 123;

console.log(typeof a);

console.log(typeof '이순신' == 'string');
console.log(typeof '이순신' =='String');
console.log(typeof undefined =='undefined');
console.log(typeof null =='object');
console.log(typeof [] =='object');
console.log(typeof {} =='object');
console.log(typeof function(){}  =='function');

console.log([].constructor === Array);
console.log({}.constructor === Object);

// 거짓인거 6가지
// 1. false
// 2. 0 
// 3.  null
// 4. undefined
// 5. NaN
// 6. '' 빈문자열

호이스팅이슈

호이스팅 이슈란 ?

블록 안에서 선언된 지역변수가 코드블록 밖으로 끌어올려지면서 강제로 전역변수화 되는 현상이다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>호이스팅이슈</title>
  <script src = "hoisting.js" defer></script>
</head>
<body>
  <ul>
    <li>button1</li>
    <li>button2</li>
    <li>button3</li>
  </ul>

</body>
</html>

const btns = document.querySelector('ul li') // ul 태그 밑에 li 태그에 접근
console.log(typeof btns) //

해당 btns는 배열이다. 왜? 우리가 밖에서 구현한 html 보면, li태그가 연속적으로 이어져 있어 브라우저가 이걸 배열로 바꿔준다.
ES5 - var를 사용했는데, 호이스팅이슈로 인해 ES6 부터 let를 사용한다.

const btns = document.querySelector('ul li') // ul 태그 밑에 li 태그에 접근
console.log(typeof btns) //

for (let i = 0; i < btns.length; i++) {
  btns[i].addEventListener('click', (event) => {
    console.log(event.target)
    console.log(i)
  })
}

event.target : Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체
for문 안에 let을 var로 바꾸면 테스트 시 3으로 찍히는 걸 알 수 있음

배열

const fruits = ['❤️', '🎶', '😒']
fruits.forEach((element,index) => {
  console.log(element,index)
})

정렬

// sort() : 알파벳순으로 요소 정렬
//       reverse() :  역순으로 요소 정렬
//       sort((a,b) => {return a-b}) : 올림차순으로 정렬
//       sort((a,b) => {return b-a}) : 내림차순으로 정렬
//       sort((a,b) => {return a-b})[0] : 최소값 반환
//       sort((a,b) => {return b-a})[0] : 최대값 반환


const names = ["나신입", "강감찬", "이성계"]
console.log(names.sort())

const nums = [1,4,56,43,32,12]

nums.sort((a,b)=>{
  return a-b
})

console.log(nums)

지환

아는만큼보인다.

이전 포스트

자바스크립트

자바스크립트

함수

콜백함수

고차함수

구독발행모델-1

구독발행모델-2

함수표현식

함수 설계 시 주의사항

객체

클래스

백틱

파라미터

ES6

Rest Parameter

리턴

false /타입

호이스팅이슈

배열

정렬

JavaScript - Ajax[비동기통신] 끄적이며..

0개의 댓글