![]()
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 그러나 여기서 문제는 계산 결과를 저장했음에도 불구하고, 해당 데이터를 나중에 재사용할 수 ..
![]()
배열 메서드 속성의 값으로 함수가 올 수도 있는데, 이러한 속성를 메서드(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..
![]()
퀴즈 프로그램 객관식문제 자바스크립트를 이용해 다중문제가 나오도록 설정하였고 for문, forEach문을 사용해 코드를 효과적으로 사용하였습니다 자바스크립트 객관식문제 ▶우선 선택자를 정합니다.(각각 선택자가 무엇을 출력할지 정해주고 알맞는 이름을 써줘서 변수에 넣어준다.). ▶문제의 정보를 가져와서 각각의 정보들을 quizInfo 변수에 대입해서 넣어줍니다. ▶문제 출력을 담당하는 메서드와 보기를 출력하는 반복문을 updateQuiz라는 함수를 만들어서로 묶어주고 실행문을 적습니다. (한눈에 보기 쉽기 때문에 묶어줍니다.) ▶이전에는 사용자의 정답과 문제의 정답만 비교해서 확인하면 되었는데 객관식에서는 사용자가 선택한 답을 문제에 답과 비교해 주어야합니다. 위에서 quiz__selects 클래스를 만들..
![]()
요소 선택 메서드 설명 getElementByld() document.getElementByld('content)일 경우 HTML 요소 중 id 속성이 'content'인 요소를 선택합니다. getElementsByClassName() document.getElementsByClassName( 'menu' ) 일 경우 HTML 요소 중 class명이 'menu'인 요소들을 선택합니다. getElementsbyTagName() document.getElementsByName('ul')일 경우 HTML 요소 중 태그명이 'ul'인 요소들을 선택합니다. querySelector() 요소의 선택 방법이 css 선택 방법과 같습니다. 선택한 요소 중 첫 번째 요소만 선택합니다. document.querySelec..
![]()
퀴즈 프로그램 웹디자인기능사 자격증을 준비하면서 퀴즈가 나오는 프로그램를 구현하였습니다. 자바스크립트-객관식 "정답 확인하기" 버튼을 누르면 답이 나오도록 구성하였습니다. js //선택자 const quizType = document.querySelector( ".quiz__type" ); //퀴즈종류 const quizNumber = document.querySelector( ".quiz__question .number"); //퀴즈번호 const quizAsk = document.querySelector( ".quiz__question .ask"); //퀴즈 질문 const quizConfirm = document.querySelector( ".quiz__answer .confirm") //정답확인버..
