설명

HTML 문서의 <body> 요소의 내용을 나타내는 속성이다.

이 속성을 사용하면 JavaScript를 사용하여 동적으로 HTML을 변경할 수 있다.

 

 

document.body.innerHTML

여기서 document는 현재 문서를 나타내는 객체이고, body는 문서의 요소이다.

innerHTML은 HTML 요소의 내용을 나타내는 속성으로, 해당 요소의 HTML 마크업을 문자열 형태로 가져오거나 설정할 수 있다.

따라서, 현재 문서의 <body> 요소의 HTML 내용을 가져오거나 설정하는 데 사용된다.

 

document.addEventListener('DOMContentLoaded', function() {
	const h1 = (text) => `<h1>${text}</h1>`;
    document.body.innerHTML += h1('script 태그');
});

'JS' 카테고리의 다른 글

prototype  (0) 2024.03.12
배열에 속성 추가(?)  (0) 2024.03.12
object  (0) 2024.03.12
inner function  (1) 2024.03.11
declarative function | anonymous function  (0) 2024.03.11

설명

모든 JavaScript 객체는 'prototype'이라는 내부 속성을 가지고 있다.

프로토타입(prototype)은 객체가 속성과 메소드를 상속할 수 있는 다른 객체를 가리킨다.

모든 객체는 상위 객체인 프로토타입을 갖고 있다.

 

 

prototype에 속성 추가

const a = new Number(10);
a.sample = 9;
console.log(a.sample);               // 9

const b = new Number(200);
console.log(b.sample);               // undefined

Number 객체 자료형 변수가 모두 공유하고 싶은 값은 prototype에 설정하면 된다.

 

Number.prototype.pi = 3.14;

console.log(a.pi);        // 3.14
console.log(b.pi);        // 3.14

// number 값에 대한 prototype 상속 발생 
const i = 99;
console.log(i.pi);        // 3.14

Number 객체의 prototype에 pi 속성을 추가하여 모든 Number 객체가 이 값을 공유할 수 있도록 한다.

이는 Number 객체가 prototype 체인을 통해 이 값을 상속받았기 때문이다.

 

i에 대해 i.pi를 호출할 때, 자바스크립트 엔진은 i를 Number 객체로 변환하여 pi 속성에 접근한다.

그러나 i는 객체가 아니기 때문에 실제로는 일시적인 객체로 변환되는 것이다. 

그리고 이렇게 생성된 객체는 Number.prototype의 속성을 받으므로 3.14를 출력한다.

 

 

prototype 확장하여 사용자 정의 함수

Number.prototype.power = fucnction(n=2) {   // 인자 기본값 2로 설정
	return this.valueOf() ** n;
}

const a = 12;
console.log('a.power():' + a.power());    // 12 제곱값 
console.log('a.power(3):' + a.power(3));  // 12 세제곱값
console.log('a.power(4):' + a.power(4));  // 12 네제곱값
this.valueOf()

객체를 원시 값으로 변환하는 메소드이다. 

 

String.prototype.contain = function(data){
	return this.indexOf(data) >= 0;
}

Array.prototype.contain = function(data){
	return this.indexOf(data) >= 0;
}

const a = '안녕하세요';
console.log('안녕 in 안녕하세요 : ', a.contain('안녕'));            // true
console.log('korea in 안녕하세요 : ', a.contain('korea'));        // false

const b = [273, 32, 103, 75, 33];
console.log('103 in b : ' + b.contain(103));                   // true
console.log('100 in b : ' + b.contain(100));                   // false
indexOf()

문자열이나 배열에서 특정 데이터가 처음으로 발견되는 인덱스를 반환한다.

만약 데이터가 발견되지 않으면 -1을 반환한다.

'JS' 카테고리의 다른 글

document.body.innerHTML  (0) 2024.03.13
배열에 속성 추가(?)  (0) 2024.03.12
object  (0) 2024.03.12
inner function  (1) 2024.03.11
declarative function | anonymous function  (0) 2024.03.11

먼저 객체와 배열의 특징을 보자면,

 

객체

객체(Object)는 키와 값의 쌍으로 이루어진 속성들의 모음이다.

객체는 중괄호({ })를 사용하여 만들며, 각 속성은 클론(:)으로 키와 값으로 구분된다.

 let person = {
    name: "John",
    age: 30,
    city: "New York"
};

 

 

배열

연속된 인덱스를 가지고 있는 값들의 집합이다.

배열(Array)은 대괄호([ ])를 사용하여 만들며, 각 요소는 콤마(,)로 구분된다.

배열의 각 요소는 인덱스를 통해 접근할 수 있다.

배열은 일련의 값들을 순서대로 저장하며, 각 값은 배열 내의 위치(인덱스)에 따라 접근할 수 있다.

let fruits = ["Apple", "Banana", "Orange"];

 

 

 

근데 배열에 속성 추가........?

자바스크립트에서 배열은 객체의 특수한 형태이기 때문에 배열 변수에 속성을 추가하면 해당 배열은 객체로 취급된다.

배열은 객체의 한 유형으로 취급되기 때문에 배열 변수에 속성을 추가하면 배열의 속성으로 추가된다.

const a = [];    // 빈 배열
a.sample = 10;

console.log(typeof a);             // object
console.log(Array.isArray(a));     // true

// Array.isArray() 메소드 : 배열이 주어진 객체인지 확인하는 메소드

a 배열에 sample이라는 속성을 추가하여 10이라는 값을 할당했다.

=> a는 이제 배열이면서 동시에 객체이다.

이것은 JavaScript의 유연성으로 인해 가능한 일이다.

 

그러나 이것은 일반적으로 권장되지 않는 방법이다(?)

'JS' 카테고리의 다른 글

document.body.innerHTML  (0) 2024.03.13
prototype  (0) 2024.03.12
object  (0) 2024.03.12
inner function  (1) 2024.03.11
declarative function | anonymous function  (0) 2024.03.11

설명

데이터와 해당 데이터에 대한 동작(메소드)을 포함하는 복합적인 자료구조이다.

객체는 중괄호 { }를 사용하여 생성되며, 속성(property), 메소드(method)를 포함할 수 있다.

속성은 객체 내의 변수와 비슷하며, 메소드는 객체 내에서 실행되는 함수이다.

 

 

객체 생성

let person = {
    name: 'John',
    age: 30,
    greet: function() {
    	console.log('Hello!');
    }
};

'person' 객체는 'name', 'age', 'greet' 속성을 가지고 있다.

 

자바스크립트의 객체는 동적으로 속성을 추가하거나 제거할 수 있으며, 다른 객체의 속성을 참조하여 사용할 수 있다.

객체는 자바스크립트에서 매우 중요한 개념이며, 웹 개발에서는 DOM(Document Object Model)을 다루거나

서버와 통신할 때 JSON(JavaScript Object Notation) 형식으로 데이터를 주고받는 등 다양한 상황에서 활용된다.

 

 

객체 타입

console.log(typeof person);    // object

 

 

객체 속성에 접근

console.log(person.name);          // 1)
console.log(person['name']);       // 2)

 

 

객체 메소드 호출

person.greet();

 

 

객체 메소드 

const test = {
    a: function() {
    	console.log(this);  // object
    },
    
    b: () => {
    	console.log(this);  // window
    }
}

객체의 메소드로는 주로 '일반 함수'를 사용한다.

 

일반 함수의 this 키워드는 해당 함수를 호출한 객체를 가리키지만

화살표 함수의 this 키워드는 자신의 this를 갖지 않고, 상위 스코프의 this를 그대로 사용하기 때문이다.

 

 

속성 추가

person.hobby = 'tennis'

 

 

속성 제거

delete person.name;

 

 

JSON 형식 문자열로 변경

let str = JSON.stringfy(person);

 

'JS' 카테고리의 다른 글

prototype  (0) 2024.03.12
배열에 속성 추가(?)  (0) 2024.03.12
inner function  (1) 2024.03.11
declarative function | anonymous function  (0) 2024.03.11
var  (0) 2024.03.11

설명

다른 함수 내부에 정의된 함수를 말한다.

주로 외부 함수의 스코프에 접근할 수 있다. 

이러한 함수는 주로 클로저를 만들거나, 특정 작업을 모듈화하거나, 코드의 구조를 개선하기 위해 사용된다.

 

내부함수 

let a=10, b=20, c=30;

let outer_func = function() {
	let b=200, c=300;
    
    let inner_func = function() {
    	let c = 3000;
        
        let inner_func = function() {
        	let c = 3000;
            console.log('a=' + a);
            console.log('b=' + b);
            console.log('c=' + c);
         }
         
     inner_func();
}

outer_func();

'inner_func' 함수가 호출되면, 전역 스코프에서 선언된 'a' 변수와 가장 가까운 스코프에서 선언된 'b' , 'c' 변수를 참조한다.

결과적으로 전역변수 a, 'outer_func' b, 'inner_func' c가 출력된다.

a=10
b=200
c=3000

 

 

클로저(closure)

내부함수가 외부함수의 맥락(context)에 접근할 수 있는 것을 말한다.

클로저는 함수를 저장한 레코드(recode)이며, 스코프의 인수들은 클로저가 만들어질 때 정의된다.

스코프 내의 영역이 소멸되었어도 그에 대한 접근은 독립된 복사본의 클로저를 통해 이루어질 수 있다.

 

[예]

let createHello = function() {
	let hello = function(user) {
    	console.log(`${user}님 방문을 환영합니다.`);
    }
    
    return hello;
}

let result = createHello();    // 반환된 'hello' 함수를 'result' 변수에 할당
result('홍길동');                // 'result'를 호출하여 내부 함수 실행 : 홍길동님 방문을 환영합니다.

'createHello' 함수는 'hello'라는 내부 함수를 반환한다.

이것이 클로저의 핵심이다.

외부 함수의 변수와 내부 함수가 결합하여 내부 함수가 외부 변수에 접근할 수 있게 된다.

 

'hello' 함수는 내부 함수이며, 클로저의 예시이다.

이 함수는 외부 함수인 'createHello' 함수 내부에 정의되어 있으며, 외부에서 접근할 수 있다.

 

 

'JS' 카테고리의 다른 글

배열에 속성 추가(?)  (0) 2024.03.12
object  (0) 2024.03.12
declarative function | anonymous function  (0) 2024.03.11
var  (0) 2024.03.11
Hoisting  (0) 2024.03.11
선언적 함수(declarative function)

무엇(what)을 기술하고, 시스템은 그 명세에 따라 동작 방식을 자동으로 처리한다.

function func() {
	console.log('선언적 함수입니다.');
}

 

 

익명 함수(anonymous function)

이름이 없는 함수를 가리킨다.

func = function() {
	console.log('익명 함수입니다.');
}

 

 

선언적 함수 vs 익명 함수

func = function() {
	console.log('1번째 익명 함수입니다.');
}

function func() {
	console.log('2번째 선언적 함수입니다.');
}

func();         // 1번째 익명 함수입니다.

아래의 선언적 함수가 먼저 호이스팅되고 위의 익명 함수가 나중에 메모리에 로딩되므로 나중에 만들어진 익명 함수를 호출하게 된다.

선언적 함수는 우리가 코드를 읽는 순서와 다른 순서로 함수가 선언된다.

그러므로 개발자들은 코드를 읽는 순서가 같은 익명 함수를 더 선호한다.

'JS' 카테고리의 다른 글

object  (0) 2024.03.12
inner function  (1) 2024.03.11
var  (0) 2024.03.11
Hoisting  (0) 2024.03.11
global variables | local variables  (0) 2024.03.11

설명

JavaScript에서 변수를 선언할 때 사용하는 키워드이다.

 

 

재선언 허용

'var'로 선언된 변수는 같은 스코프 내에서 여러 번 선언할 수 있다.

이 경우 마지막 선언이 이전의 선언을 덮어쓴다.

var aaa = 10;
var aaa = '홍길동';

console.log(aaa);       // 홍길동

 

 

블록 스코프 X

블록 스코프를 갖지 않는다.

따라서 'if', 'for', 'while' 등의 블록 내에서 선언된 변수도 해당 블록 외부에서 접근할 수 있다.

 

=> 이러한 특징으로 인해 예측하기 어려운 버그가 발생할 수 있으므로, let const 를 사용하는 것이 권장된다.

'JS' 카테고리의 다른 글

inner function  (1) 2024.03.11
declarative function | anonymous function  (0) 2024.03.11
Hoisting  (0) 2024.03.11
global variables | local variables  (0) 2024.03.11
timer  (0) 2024.03.11

설명

호이스팅(Hoisting)은 JavaScript에서 변수 및 함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미한다.

이것은 코드가 실행되기 전에 JavaScript 엔진에 의해 처리된다.

 

 

var 변수

변수 호이스팅

변수 선언은 해당 스코프의 최상단으로 끌어올려지지만, 초기화는 끌어올려지지 않는다.

즉, 변수 선언은 호이스팅되지만, 변수에 할당된 값은 호이스팅 되지 않는다.

console.log(i);      // undefined
i = 100;      
console.log(i);      // 100

var i;               // 가장 먼저 실행

 

=> 프로그래밍의 순서의 혼란을 가져오므로 var => let, const를 권장한다.

 

 

function을 이용한 선언적 함수

함수 호이스팅

함수 선언이 해당 스코프의 최상단으로 끌어올려지는 것을 의미한다.

함수 선언문은 전체 함수가 스코프 내부 에디에서도 호출될 수 있음을 보장한다.

declare();         // 2번째 선언적 함수입니다.

function declare() {
	console.log('1번째 선언적 함수입니다.');
}

function declare() {
	console.log('2번째 선언적 함수입니다.');
}

 

[참고]

익명 함수는 호이스팅이 일어나지 않는다.

anonym();  -> Uncaught TypeError: anonym is not a function

anonym = function() {
	console.log('1번째 익명함수입니다.');
}

anonym = function() {
	console.log('2번째 익명함수입니다.');
}

 

 

'JS' 카테고리의 다른 글

declarative function | anonymous function  (0) 2024.03.11
var  (0) 2024.03.11
global variables | local variables  (0) 2024.03.11
timer  (0) 2024.03.11
method chaining  (0) 2024.03.11

+ Recent posts