![]()
실행 컨텍스트 실행 컨텍스트는 자바스크립트 동작 원리를 담고 있는 핵심 개념이다. 이를 잘 이해하면 자바스크립트의 여러가지 동작원리에 대해 자세하게 이해할 수 있다. 스코프를 기반으로 식별자와 식별자에 바인딩 된 값을 관리하는 방식 호이스팅이 발생하는 이유 클로저의 동작 방식 태스크 큐와 함께 동작하는 이벤트 핸들러 비동기 처리의 동작 방식 등등 등을 이해하는데 도움이 된다. 차근차근 알아보자 실행 컨텍스트의 구성 요소 실행 컨텍스트는 크게 세 가지 주요 구성 요소를 가진다. 변수 환경(Variable Environment) 로컬 스코프에 선언된 변수, 함수 선언, 매개변수 등을 저장하는 환경 최초 생성 시점의 환경 스냅샷을 유지 렉시컬 환경(Lexical Environment) 실행 중인 코드의 식별자..
![]()
this 키워드 객체는 상태를 나타내는 프로퍼티와 동작을 나타내는 메서드를 하나로 묶은 복합적인 자료구조이다. 객체에 들어있는 메서드를 실행하기 위해서는 자신이 속한 객체의 상태에 접근, 즉 프로퍼티를 참조해 변경할 수 있어야 한다. 객체 리터럴 방식으로 생성한 경우 메서드 내부에서 메서드 자신이 속한 객체를 가리키는 식별자를 재귀적으로 참조한다. const circle = { radius: 5, getDiameter() { return 2 * circle.radius; } }; console.log(circle.getDiameter(10)); // 10 객체 리터럴은 이미 circle 변수에 할당 되기 직전에 평가된다. 따라서 getDiameter 메서드가 호출되는 시점에는 이미 객체가 생성되어 메서드..
![]()
자바스크립트는 명령형, 함수형, `프로토타입 기반 객체지향 프로그래밍`을 지원하는 멀티타임 프로그래밍 언어다. 자바스크립트를 “이루고 있는 모든 것이 객체이다” 정확히 말하자면 원시 타입을 제외한 모든 것이 객체로 되어있다. 객체지향 프로그래밍 **객체지향 프로그래밍**이란 기존에 명령어 또는 함수 목록으로 보는 전통적인 명령형 프로그래밍 방식인 절차지향적 관점이 아닌 독립적 단위, 즉 객체(Object)의 단위로 프로그램을 표현하는 패러다임이다. // 객체 생성 const person = { name: "Song", address: "Seoul" }; console.log(person) 위 코드에서는 이름과 주소로 속성을 표현하고 객체{…}로 묶어서 표현했다. 프로그래머(주체)는 이름과 주소 속성으로 ..
![]()
일급 객체 **일급 객체**의 조건은 다음과 같다. 무명의 리터럴로 생성할 수 있다. 변수나 자료구조등에 저장할 수 있다. 함수의 매개변수에 저장할 수 있다. 함수의 반환값으로 사용할 수 있다. 자바스크립트의 함수는 이 조건을 만족한다. 일급 객체의 예 무명의 리터럴로 생성 const increase = function () { return num++; } 함수는 자료구조등에 저장할 수 있다. const auxs = { decrease } 변수에 함수 할당 const greet = function() { console.log("Hello, World!"); }; greet(); // "Hello, World!" 함수의 파라미터로 함수 전달 function executeFunction(callback) {..
![]()
내부 슬롯과 내부 메서드 내부 슬롯과 내부 메서드는 ECMAScript 사양에서 자바스크립트 엔진의 구현 알고리즘을 설명 하기위해 사용하는 의사 프로퍼티와 의사 메서드다. 이중 대괄호([[…]])로 감싼 이름들이다. 하지만 내부 슬롯과 내부 메서드는 자바스크립트 엔진의 내부 로직이기 때문에 접근을 허용하지 않는다. 프로퍼티 어트리뷰트와 프로퍼티 디스크립터 객체 자바스크립트 엔진은 프로퍼티를 생성할 때 프로퍼티의 상태를 나타내는 프로퍼티 어트리뷰트를 기본값으로 정의한다. 프로퍼티 상태란 프로퍼티의 값 : [[**Value**]] 값의 갱신 여부 : [[**Writable**]] 열거 가능 여부 : [[**Enumerable**]] 재정의 가능 여부 : [[**Configurable**]] Object.ge..
![]()
var, let, const 세 가지 변수 선언 키워드의 주요 차이점 특징 var let const 스코프 함수 스코프(Function Scope) 블록 스코프(Block Scope) 블록 스코프(Block Scope) 재선언 가능 불가능 불가능 재할당 가능 가능 불가능 초기화 선언 시 undefined로 초기화 선언 시 초기화하지 않음(TDZ 적용) 선언과 동시에 초기화 필요 호이스팅 선언이 스코프의 최상단으로 끌어올려짐 선언이 스코프의 최상단으로 끌어올려짐(TDZ) 선언이 스코프의 최상단으로 끌어올려짐(TDZ) Temporal Dead Zone (TDZ) 적용되지 않음 적용됨 적용됨 - 함수 스코프(Function Scope): var로 선언된 변수는 선언된 함수의 전체 범위에서 유효합니다. ```j..
![]()
스코프(유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적인 중요한 개념이다. function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프는 함수 몸체 내부다. console.log(x, y) // 2 5 return x + y; } add(2, 5) // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y) // ReferenceError: x is not defined 변수는 선언된 위치에 의해 자신의 유효범위 즉, 선언한 위치에 따라 스코프가 달라진다. 이건 변수 뿐만 아니라 모든 식별자(함수 이름, 변수 이름, 클래스 이름 등)는 선언된 위치에 따른 코드가 식별자 자신을 참조 할 수 있는 유효 범..
![]()
즉시 실행 함수 함수 정의와 동시에 호출되는 함수로 단 한번만 호출되며 다시 호출할 수 없다. // 익명 즉시 실행 함수 (function () { var a = 3; var b = 5; return a * b }()); // 기명 즉시 실행 함수 (function foo() { var a = 3; var b = 5; return a * b }()); foo() // ReferenceError: foo is not defined 그룹 연산자(..) 내의 기명 함수는 함수 선언문이 아니라 함수 리터럴로 평가되어 다시 호출 할 수 없다. 즉시 함수를 그룹 연산자로 감싸는 이유는 먼저 함수 리터럴로 평가해서 함수 객체를 생성하기 위해서 이기 때문이다. 즉시 실행 함수도 일반 함수 처럼 값을 반환할 수 있고 인..
![]()
프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다. 입력 값을 받아서 출력 값을 내보낸다. 이때 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환 값이라 한다. 함수 명시적으로 호출해야 사용할 수 있는데 이를 함수 호출이라 한다. funtion add(x,y) { return x + y } // 함수 호출 var result = add(2,5); console.log(result) /// 7 함수를 사용하는 이유 함수는 필요할 때 여러번 호출할 수 있다. 즉, 실행 시점을 개발자가 결정할 수 있고 몇 번이든 재사용이 가능하다. 잘 만든 함수는 유지보수의 편의성을 높이고 코드의 신뢰성을 높이는 효과가 있다. 함수는 객체 타입 값이다. ..
![]()
데이터 타입은 크게 원시 타입과 객체 타입으로 구분한다. 왜 두가지로 분리할까? 이유는 원티 타입과 객체 타입이 근본적으로 다르기 때문이다. 3가지 측면에서 다르게 볼 수 있는데 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다. 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장되는데, 이에 비해 객체를 변수에 할당하면 변수에 참조 값이 저장된다. 원시 값을 갖는 변수를 다른 변수에 할당시 원시 값이 복사되어 전달되고 이를 값에 의한 전달이라 한다. 이에 비해 객체를 가르키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다. 원시 값 변경 불가능한 값 원시 타입의 값, 즉..
![]()
객체란? 자바스크립트는 객체 기반 언어이다. 원시값을 제외한 나머지 값(정규표현식, 배열, 함수)는 모두 객체다. 원시 타입은 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조이다. 또한 원시 타입의 값, 즉 원시값은 변경 불가능한 값이지만 객체 타입의 값은 변경 가능한 값이다. 객체는 0개 이상의 프로퍼티로 구성되어있고 프로퍼티는 키와 값으로 구성된다. 또한 프로퍼티의 값이 함수일 경우 메서드라 칭한다. 객체 리터럴에 의한 객체 생성 C++ 이나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자(constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성 한다. 📔 인스턴스란? 클래스에 ..
![]()
제어문은 프로그래밍을 함에 있어서 없어서는 안될 필수 내용이다. 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 일반적으로 코드는 위에서 부터 아래 방향으로 순차적으로 실행되는데 실행 흐름을 인위적으로 제어 할 수 있다. 하지만 자연스럽게 위에서 부터 아래로 순차적으로 실행되는 코드를 인위적으로 흐름을 변경하려는 순간 우리는 직관적인 코드의 흐름 해치기 때문에 가독성이 떨어지도록 만들 수 있다. 다시말해, 필요 이상의 제어문을 많이 사용한다면 코드의 가독성을 해치기 때문에 적당히 사용하는 것이 좋다. 제어문을 사용할 때 여러 고차 함수를 사용한 프로그래밍 기법들이 있지만 가장 기본적인 for 문을 알고 사용해야 고차 함수에서도 무리없이 사용이 가능한다. 블록문 블록문은 0개 이상..
![]()
제어문은 프로그래밍을 함에 있어서 없어서는 안될 필수 내용이다. 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행 할 때 사용한다. 일반적으로 코드는 위에서 부터 아래 방향으로 순차적으로 실행되는데 실행 흐름을 인위적으로 제어 할 수 있다. 하지만 자연스럽게 위에서 부터 아래로 순차적으로 실행되는 코드를 인위적으로 흐름을 변경하려는 순간 우리는 직관적인 코드의 흐름 해치기 때문에 가독성이 떨어지도록 만들 수 있다. 다시말해, 필요 이상의 제어문을 많이 사용한다면 코드의 가독성을 해치기 때문에 적당히 사용하는 것이 좋다. 제어문을 사용할 때 여러 고차 함수를 사용한 프로그래밍 기법들이 있지만 가장 기본적인 for 문을 알고 사용해야 고차 함수에서도 무리없이 사용이 가능한다. 블록문 블록문은 0개 이상..
![]()
연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상자를 피연산자라고 한다. 피연산자는 값으로 평가될 수 있는 표현식 이어야 한다. // 산술 연산자 5 + 4 // 20 // 문자열 연결 연산자 'My name is ' + 'Song' // My name is Song // 할당 연산자 color = 'red' // 'red' // 비교 연산자 3 > 5 // false // 논리 연산자 true && false // false // 타입 연산자 typeof 'Hi' // string 피연산자가 값 이라는 명사의 역할을 한다면 연산자는 피연산자를 연산하..
![]()
종류 구분 데이터 타입 설명 원시 타입 Number 숫자를 나타내며, 정수와 실수 구분 없이 하나의 숫자 타입만 존재합니다. String 문자열을 나타내며, 문자의 시퀀스로 이루어져 있습니다. Boolean 논리적 값(true 또는 false)을 나타냅니다. Undefined 변수가 값 없이 선언되었을 때 기본적으로 할당되는 값입니다. Null 어떤 값이 의도적으로 비어있음을 나타냅니다. Symbol ES6에서 추가된 타입으로, 고유하고 수정 불가능한 데이터 타입으로 주로 객체 속성의 키로 사용됩니다. BigInt Number 타입으로 표현할 수 있는 범위를 넘어서는 큰 정수를 표현할 때 사용됩니다. ES2020에서 도입되었습니다. 객체 타입 Object 키와 값으로 구성된 속성들의 집합입니다. 배열, ..
![]()
개념을 파악하는 데 있어서 용어의 정확한 이해와 설명이 필수적입니다. 핵심적인 개념 중 하나는 바로 '값'입니다. 값이란, 식(표현식)이 평가되어 생성된 결과를 지칭합니다. 이때 '평가'는 식을 해석하여 값을 생성하거나 참조하는 과정을 의미합니다. 예를 들어, 10 + 20이라는 식은 평가 과정을 거쳐 30이라는 결과 값을 생성합니다. 이 과정을 우리는 "10 + 20이 평가되어 30을 생성한다"고 표현합니다. 모든 값은 데이터 타입을 가지며, 이 데이터 타입에 따라 메모리 상에서 다양한 방식으로 해석됩니다. 데이터는 메모리에 2진수 형태로 저장되지만, 저장된 데이터를 어떻게 해석할지는 그 데이터의 타입에 의해 결정됩니다. 변수에 관해서는, 변수를 하나의 값을 저장하기 위해 ..
![]()
변수란 무엇인가? 왜 필요한가? 애플리케이션은 본질적으로 데이터를 처리하는 것입니다. 복잡한 애플리케이션도 결국 데이터를 입력 받아 처리하고, 그 결과를 사용자에게 제공합니다. 이러한 과정에서 변수는 프로그래밍 언어에서 데이터를 관리하는 핵심적인 역할을 담당합니다. 변수의 역할 변수는 메모리 상에 데이터를 저장하고, 저장된 데이터를 재사용할 수 있도록 지원합니다. 예를 들어, JavaScript 코드 10 + 20은 데이터(10, 20)와 연산자(+)를 포함하고 있습니다. 이 표현식을 컴퓨터가 계산하기 위해서는 해당 데이터와 연산의 의미를 알고 있어야 하며, 계산 결과인 30은 메모리에 저장됩니다. 10 + 20 그러나 여기서 문제는 계산 결과를 저장했음에도 불구하고, 해당 데이터를 나중에 재사용할 수 ..
![]()
] mouseenter / mouseover 차이 mouseenter ✔JS 에서는 Explorer전용 이벤트이나 jQuery 에서는 브라우져를 고려하지 않고 작동이 되도록 구성요소에 마우스 포인터가 진입하면 발생오로지 자기 자신에게 마우스 포인터가 와야만 발생 합니다. mouseover ✔직접 이벤트를 걸지 않은 자식요소에 마우스 포인터가 와도 발생합니다. 주로 아래와 같이 짝을 이루어 사용한다. mouseOver mouseOut mouseEnter mouseLeave MouseOver와 MouseEnter 차이 두 이벤트를 유사하지만 이벤트 전파(event propagation)와 취소 가능성(cancelable)에 큰 차이가 있다. mouseOver/mouseOut는 이벤트가 발생할 때 버블링이 일..
![]()
search() / match() / charAt search() "문자열".search("검색값") "문자열".search("정규식 표현") const str1 = "javascript reference" const currentStr1 = str1.search("javascript"); // 0 const currentStr2 = str1.search("reference"); // 11 const currentStr3 = str1.search("j"); // 0 const currentStr4 = str1.search("a"); // 1 const currentStr5 = str1.search("v"); // 2 const currentStr6 = str1.search("jquery"); //-1 c..
![]()
문자열을 자르는 메서드 문서를 자르는 메서드indexOf(), LastIndexOf()등을 정리해 보았습니다. 또한 indexOf() 메서드도 정리하였고 출력값은 주석처리로 표현하였습니다. indexOf(), LastIndexOf() 문자열에서 특정 문자의 위치를 찾고 숫자를 반환합니다. "문자열".indexOf(검색값); "문자열".indexOf(검색값, 위치값); "문자열".lastIndexOf(검색값); "문자열".lastIndexOf(검색값, 위치값); const str1 = "javascript reference" const currentStr1 = str1.indexOf("javascript"); //0 const currentStr2 = str1.indexOf("reference"); //1..
![]()
문자열 : 문자열 결합 / 템플릿 문자열 변수는 데이터를 저장하는 저장소 입니다. 이 저장소에는 숫자, 문자, 함수, 객체 등을 저장할 수 있습니다. 문자열 좌우에서 공백을 제거, trim(),trimStart(),trimEnd() 템플릿 문자열은 간단하게 말해서 내장된 표현식을 허용하는 문자열 리터럴이다. 중괄호를 리터럴이라고 하고 ${} 리터럴 안에 변수를 넣는다. //01 const str1 = "자바스크립트"; const str2 = "제이쿼리"; document.querySelector(".sample01_N1").innerHTML = "1"; document.querySelector(".sample01_Q1").innerHTML = "자바스크립트, 제이쿼리"; document.querySele..
![]()
문자열을 찾는 메서드 replace(), replaceAll()을 정리해보았습니다. replace() 원본이름은 string.prototype.replace()입니다. 앞부분은 생략하고 써도 가능합니다. "문자열".replace(찾을 문자열, 변경할 문자열) "문자열".replace(정규식) "문자열".replace(정규식, 변경할 문자열) const str1 = "javascript reference"; const cirrentStr1 = str1.replace("javascript", "자바스크립트"); //자바스크립트 reference const cirrentStr2 = str1.replace("j", "J"); // Javascript reference const cirrentStr3 = str1..
![]()
문자열을 찾는 메서드 padStart(), padEnd()을 정리해 보았습니다. padStart(),padEnd() padStart()/padEnd() 메서드는 주어진 길이에 맞게 앞/뒤 문자열을 채우고, 새로운 문자열을 반환합니다. "문자열".padStart(길이) "문자열".padStart(길이, 문자열) const currenStr1 = str1.padStart(1, "0"); //456 const currenStr2 = str1.padStart(2, "0"); //456 const currenStr3 = str1.padStart(3, "0"); //456 const currenStr4 = str1.padStart(4, "0"); //0456 const currenStr5 = str1.padStar..
![]()
문자열을 변경 메서드 문자열 메서드 : 변경 : toUppercase() : 문자열을 대문자로 변경 : 반환(문자열), toLowerCase() : 문자열을 소문자로 변경 : 반환(문자열) toUppercase() toUppercase() : 문자열을 대문자로 변경하는 메서드 입니다. toLowerCase() : 문자열을 소문자로 변경하는 메서드 입니다. const str1 = "javascript"; const currentStr1 = str1.toUpperCase() document.querySelector(".sample01_N3").innerHTML = "1"; document.querySelector(".sample01_Q3").innerHTML = "javascript"; document.qu..
![]()
문자열을 변경하는 메서드 trim(),trimStart(),trimEnd()을 정리해 보았습니다. 문자열 좌우에서 공백을 제거, trim(),trimStart(),trimEnd() trim() 메서드는 문자열 좌우에서 공백을 제거. trimStart() 메서드는 문자열 시작 부분에서 공백 문자를 제거하는 데 사용되는 문자열 메서드입니다 trimEnd() 메서드는 문자열 끝부분의 공백을 제거합니다. 또 해당 메서드는 trimRight() 라는 별칭으로 호출이 가능합니다. const str = " javascript "; const currentStr = str.trim(); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySele..
![]()
문자열을 자르는 메서드 문서를 자르는 메서드slice(), substring(), substr()등을 정리해 보았습니다. 또한 indexOf() 메서드도 정리하였고 출력값은 주석처리로 표현하였습니다. slice() 문자열에서 원하는 값을 추출하여 반환하는 메서드 입니다. 반환할때는 문자열을 반환합니다. slice(시작위치), slice(시작위치, 끝나는위치) 시작위치 < 끝나는위치 const str1 = "javascript reference"; const currentStr1 = str1.slice(0); //javascript reference const currentStr2 = str1.slice(1); //avascript reference const currentStr3 = str1.slice(..
![]()
정규표현식 객체 주요패턴 정규표현식 객체는 정해진 문자의 패턴을 만들 때 사용합니다. 패턴 설명 abc abc 문자열을 검색합니다. /abc/는 'abc' [abc] a, b, c 중 문자 하나를 검색합니다. /[^abc]d/는 'ab', 'bd', 'cd' [^abc] a, b, c를 제외한 문자 하나를 검색합나다. /[^abc]d/는 'ed','fd','gd' [A-Z]; 알파벳 대문자 문자를 검색합니다. [a-z] 알파벳 소문자 문자를 검색합니다. [0-9] 0-9까지의 숫자를 검색합니다. . 하나의 문자를 검색합니다. 만약 '마침표'문자 그대로의 의미를 사용할 경우 '￦.'으로 표현해야 합니다. \w 알파벳, 숫자, _를 검색합니다. \W 알파벳, 숫자, _를 제외하고 검색합니다. \d 숫자를 검..
![]()
내장 함수 내장 함수는 자바스크립트에 기본적으로 내장되어 있는 함수들을 말합니다. ▶인코딩, 디코딩 함수 'http://icoxpublish.com/search?query= 자바스크립트'와 같이 URL주소에 쿼리 정보를 전송하여 데이터를 처리 해야 되는 프로그램의 경우 한글과 같은 유니코드 문자가 포함되어 있으면 오류가 발생할 수 있습니다. 이런 경우 인코딩 함수를 이용히여 문자를 부호화 시키고 부호화된 문자를 다시 디코딩 하무스를 이용하여 원래 문자로 되돌릴 수 있습니다. 함수명 설명 encodeURIComponent() 영문, 숫자와 () -_.~*!을 제외한 문자를 인코딩합니다. decodeURIComponent() decodeURIComponent()의 디코딩 함수 ▶숫자, 유/무한 값 판별 함수..
![]()
배열 메서드 속성의 값으로 함수가 올 수도 있는데, 이러한 속성를 메서드(method)라고 합니다. push() push() : 배열 마지막 요소에 추가 합니다. push(600)을 사용했기 때문에 배열에 마지막 요소에 600이 추가 되었습니다. >const arrNum = [100, 200, 300, 400, 500]; const arrPush = arrNum.push(600); document.querySelector(".sample03_N1").innerHTML = "1"; document.querySelector(".sample03_Q1").innerHTML = "[100, 200, 300, 400, 500]"; document.querySelector(".sample03_M1").innerHTM..
![]()
요소 선택 메서드 설명 getElementByld() document.getElementByld('content)일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName( 'menu' ) 일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsbyTagName() document.getElementsByName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. querySelector() 요소의 선택 방법이 css 선택 방법과 같습니다. 선택한 요소 중 첫 번째 요소만 선택합니다. document.querySelec..
