본문 바로가기

프론트엔드/JavaScript56

JS 데이터 - 가져오기, 내보내기 외부에 있는 js 파일을 내보내기: export 기본 통로로 내보내는 예제 // 외부에서도 사용가능하도록 설정 export default // 이름을 없애도 되고 import에서 사용자가 원하는 이름으로 불러올수 있다. export default function getType(data) { return Object.prototype.toString.call(data).slice(8, -1) } module 통로로 내보내는 예제(하나의 js 파일에서 여러개의 함수를 내보낼수 있다.) export function random () { // 랜덤값을 얻어온 다음에 소수점 밑에 자리를 버린다 return Math.floor(Math.random() *10) } export const user = { name: .. 2021. 6. 3.
JS 데이터 - 복사 얕은 복사 전개 연산자 {... 객체} 혹은 Object.assign({}, 객체) 을 활용하면 새로 메모리를 만들어서 사용하기 때문에 기존 객체를 수정해도 참조되고 있는 객체의 데이터는 변하지 않는다. 하지만 해당 객체 안의 배열은 기존의 객체를 참조하고 있어서 참조 데이터 안의 참조 데이터가 존재한다면 그 안 까지는 적용되지 않는다. // 얕은 복사(Shallow copy), 깊은 복사 (Deep copy) const user = { name: 'happy', age: 33, email: ['happy@naver.com'] } const copyUser = user console.log(copyUser === user) // 바라보고 있는 쪽의 데이터가 변하면 참조하고있는 데이터 또한 변한다. use.. 2021. 6. 1.
JS 데이터 - 불변성 원시 데이터는 기존에 메모리가 생성되었다면 나중에 같은 값의 메모리를 선언했다면 새로 메모리를 할당하지 않고 기존의 메모리를 이용한다. 즉. 생긴것이 같으면 같은 메모리를 사용 // 데이터 불변성(Immutablility) // 원시 데이터: String, Number, Boolean, undefined, null // 참조형 데이터: Object, Array, Function let a = 1; let b = 4 console.log(a, b, a === b) b = a // 같은 메모리 주소를 바라보기 때문에 true console.log(a, b, a === b) a = 7 console.log(a, b, a === b) let c = 1 // 기존의 1이라는 메모리를 바라보기 때문에 true co.. 2021. 6. 1.
JS 데이터 - 전개 연산자 (Spread) 전개연산자: 배열데이터를 문자형태로 바꿔서 출력해주는 기능 문법: (... 배열이름) // 전개 연산자 (spread) const fruits = ['Apple', 'Banana', 'Cherry'] // 배열 데이터 출력됨 console.log(fruits) // 문자 데이터 형태로 출력됨 console.log(...fruits) // console.log('Apple', 'Banana', 'Cherry') // 배열데이터를 문자형으로 추출하여 객체데이터로 값을 넣어주는 함수 예제 function toObject(a, b, c) { return { a: a, b: b, c: c } } console.log(toObject(...fruits)) // 전개 연산자와 같은 결과를 내기 위해서는 하나씩 지정해.. 2021. 5. 31.
JS 데이터 - 구조 분해 할당 구조 분해 할당: 배열, 객체데이터를 선언하고 그 배열에서 원하는 데이터를 뽑아서 선언하여 사용할 수 있는 방법 장점: 배열의 데이터 많은 경우, 그 중 필요한 데이터만 뽑아서 쓰는게 가능하다. 각 타입에 맞게 괄호를 입력해야 한다.(객체 데이터: { }, 배열: [ ]) 객체데이터는 이름으로 추출하지만 배열데이터의 경우 순서대로 추출해야한다. // 구조 분해 할당 (Destructuring assignment) // 비구조화 할당 const user = { name: 'happy', age: 43, email: 'happy@naver.com' } // 배열의 원하는 데이터만 뽑아서 선언 할 수있다. // const {name, age, email, address } = user // 기본값 설정가능(기.. 2021. 5. 31.
JS 데이터 - 객체 참고(검색: object mdn) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object Object - JavaScript | MDN Object 생성자는 객체 래퍼(wrapper)를 생성합니다. developer.mozilla.org Object.assign(): 대상 객체로 속성을 복사 원본이 바뀌는 문법: const target = Object.assign(A, B) 원본이 유지되는 문법: const target = Object.assign({}, A, B) // Object 예제 const userAge = { // Key: value name: 'happy', age: 48 } const userE.. 2021. 5. 31.

티스토리툴바