보호되어 있는 글입니다.
study/JavaScript
보호되어 있는 글입니다.
스코프(Scope)란?식별자가 유효한 범위.자바스크립트 엔진은 코드를 실행할때 코드의 문맥(Context)를 고려한다. 코드가 어디서 실행되고, 주변에 어떤 코드가 있는지에 따라서 동일한 코드도 다른 결과를 만들어낼 수 있다.프로그래밍 언어에서는 스코프(유효 범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 한다. 스코프의 종류변수는 자신이 선언된 위치에 의해 자신이 유효한 범위인 스코프가 결정된다.전역 스코프전역(코드의 가장 바깥 영역)에 선언된 변수가 갖는 유효 범위. 전역 변수는 어디에서든지 참조할 수 있다. 즉, 함수 내부에서도 참조할 수 있다.지역 스코프지역(함수 내부)에 선언된 변수가 갖는 유효 범위. 지역 변수는 자신의 지역 스코프와 하위 지역 스코프..
함수일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것.함수는 값이며, 식별자인 함수 이름을 사용할 수 있다. 함수의 구성 요소매개 변수(parameter) : 함수 내부로 입력을 전달받는 변수인수(argument) : 함수 호출시 입력되는 수반환값(return value) : 출력되는 값동작 과정함수 정의(function definition)을 통해 생성함수 호출 : 인수를 매개변수를 통해 함수에 전달하면서 함수의 실행을 명시적으로 지시코드 블록의 문이 일괄적으로 실행반환 값(실행 결과)를 반환// 함수 정의funcfion add(x, y) { // 함수 이름 : add , 매개 변수 : x, y return x + y; // 반환값}// 함수 호..
원시 값과 객체의 비교값 변수에 할당시 확보된 메모리 공간에는? 다른 변수에 할당하면?원시 타입(Primitive type)변경 불가능한 값(Immutable value)실제 값이 저장됨원본의 값이 복사되어 전달 ⇒ 값에 의한 전달(pass by value)객체 타입(Object / Reference type)변경 가능한 값(Mutable value)참조 값이 저장됨참조 값이 복사되어 전달 ⇒ 참조에 의한 전달(pass by reference)원시 값변경 불가능한 값읽기 전용 값으로서 변경할 수 없음 ⇒ 데이터의 신뢰성 보장불변성변수값 변경(=원시값 재할당) → 새 메모리 공간 확보 → 재할당한 값 저장 → 변수가 참조하던 메모리 공간의 주소 변경재할당 이외에 변수 값을 변경할 수 있는 방법은 없음문자열..
즉시 실행 함수 표현(IIFE, Immediately Invoked Function Expression) 정의되자마자 즉시 실행되는 자바스크립트 함수. 단 한번만 실행되고 외부 범위에서는 접근할 수 없다. 즉시실행함수를 변수에 할당할 경우, 이 함수 자체는 저장되지 않고 함수가 실행된 결과만 저장된다. (function () { console.log('즉시실행함수는 이렇게 쓰거나') })(); (function () { console.log('이렇게 쓸 수 있습니다') }()); 특징 정의되자마자 바로 실행된다. 익명함수를 사용한다. 1회만 실행되고 다시는 실행하지 않는다. 이러한 특징으로 인해 즉시 싱행 함수는 주로 초기화를 하는 모듈이나 라이브러리, 프레임워크 소스들에서 많이 사용된다. 장점 괄호 내..
const div = document.querySelector('div') const p = document.querySelector('P') const span = document.querySelector('span') div.addEventListener('click', () => console.log('div click')) p.addEventListener('click', () => console.log('p click')) span.addEventListener('click', () => console.log('span click')) 이러한 코드가 있다고 가정했을때, div와 p와 span을 각각 클릭했을때의 결과는 어떨까? 처음 코드만 보고 생각했을때는 아마 결과는 이렇게 될것이라고 생각했다..
localStorage Web Storage의 방식중 하나로 사용자의 로컬 저장소에 키-값을 저장할 수 있다. 브라우저를 닫았다 열어도 데이터가 사라지지 않는다. 유효기간 없이 데이터를 저장한다. 도메인과 브라우저별로 저장된다. 값은 반드시 문자열로 저장된다. JavaScript를 사용하거나 브라우저 캐시 또는 로컬 저장데이터를 지워야만 삭제할 수 있다. window.localStorage에 접근하게 되면 Storage 객체의 인스턴스를 생성하게 되고, 이를 사용해 데이터 항목을 브라우저 내에 추가 또는 제거하거나 읽어올 수 있다. 데이터 추가하기 : setItem() window.localStorage.setItem(key, value) 💡 배열이나 객체를 저장해야할때 localStrorage에는 문자..
ISO 형식(ISO 8601 형식)은 날짜 및 시간 관련 데이터의 전 세계적인 교환 및 통신을 다루는 국제 표준이다. 이 표준은 숫자 날짜 및 시간 표기에 대해 서로 다른규칙을 사용하는 국가간에 데이터가 전송될때 데이터를 잘못 해석하지 않게 한다. 1. 날짜/시간을 ISO 형태로 변경할때 : .toISOString() const date = new Date(); // 새로운 Date 객체 반환 console.log(date.toISOString()); // 2023-01-22T05:05:24.783Z 2. ISO 형태의 날짜를 현지 시간에 맞게 변경할때 : .toLocaleString() const newDate = new Date('2023-01-22T05:16:26.418Z'); console.log..
class 기본 작성법 // ES6 class Person { // class 키워드와 함께 선언 constructor(name, age, gender) { // 생성자 함수로 인스턴스 객체 생성 및 초기화 this.name = name this.age = age this.gender = gender } // 메서드 greeting() { console.log(`내 이름은 ${this.name} 입니다.`) } farewell() { console.log(`${this.name} 는 작별인사를 했다.`) } } constructor 다른 메서드 호출에 앞서서 인스턴스 객체를 초기화 할때 수행할 초기화 코드를 정의할 수 있다. constructor는 하나의 클래스에 오직 하나만 존재할 수 있다. // 기본..
