자바스크립트 7

[Javascript] this

this의 값은 함수가 호출되는 방식에 따라 다름객체 내 this객체 내 this를 호출하는 경우 해당 객체를 가리킴// 스코프 내 this 호출 const temp = { inner : function(){ console.log(this) } } temp.inner() // 해당 객첼ㄹ 가리킴전역 범위에서의 this전역 범위에서 this 호출 시 Window 객체를 가리킴 'use strict' 를 활용하여 Window 객체 참조 방지 가능strict 모드에서 window 객체 대신 undefined로 값을 설정하는 규칙이 적용되어 undefined가 되는 경우 bind() 함수를 활용하여 this 값을 수동으로 설정 할 수 있음// 전역 범위에서 this 호출 function temp02(){ con..

JS/Javascript 2024.06.07

[Javascript] 브라우저 객체 모델 (BOM)

브라우저 객체 모델자바스크립트 프로그램을 통해 브라우저 창을 관리할 수 있도록 브라우저 요소를 객체화해 놓은 것 주요 브라우저 내장객체Window : 브라우저 창이 열릴 때마다 하나씩 생성되는 객체 Document : 웹 문서에서 태그를 만나면 만들어지는 객체, HTML 문서 정보를 가지고 있음History : 현재 창에서 사용자 방문 기록을 저장하고 있는 객체Location : 현재 페이지에 대한 URL 정보를 저장하고 있는 객체Navigator : 현재 사용 중인 웹 브라우저의 정보를 저장하고 있는 객체Screen : 현재 사용 중인 화면 정보를 저장하고 있는 객체Window 객체브라우저 창이 열릴 때마다 하나씩 생성되는 자바스크립트 최상위 객체 자바스크립트의 모든 객체는 window객체에 포..

JS/Javascript 2024.06.05

[Javascript] 데이터와 데이터 타입

const func = (x) => (x = x + 1); let a = 10; // 함수 내 처리결과는 원시 타입 변수값에 영향을 주지 않음 func(a); console.log(a); // ⇒ 10 const func2 = (x) => (x[0] = 1); let b = [0, 2, 3]; // 함수 내 참조타입의 경우 값 변경됨 func2(b); console.log(b); // ⇒ [ 100, 2, 3 ] 데이터 분류 1. 원시 타입(Primitive Type) 원형데이터로 더이상 단순화 할 수 없는 값으로 데이터 및 정보의 가장 단순한 형태 Boolean, String, Number, Undefined, Null, Symbol 2. 객체 타입(Object Type) 참조데이터로 기본 타입을 제외..

JS/Javascript 2024.01.24

[Javascript] 배열

배열자바스크립트의 기본 데이터 타입 []안에 데이터 입력타입에 상관없이 사용 가능배열에 배열, 객체도 저장 가능배열 초기화// 빈 배열const arr1 = []// 데이터가 있는 배열 정의const arr2 = [2,3,1]// 배열 안에 배열 정의const arr3 = [[11,22], [33,44]]// 배열 안에 객체 정의const arr4 = [{name :'a'}, {name:'b'}]// new Array 활용 (단, 인수를 1개 정의 시 배열에 넣을 수 있는 데이터 수가 결정됨)const arr5 = new Array('1', '2')배열 길이 확인메서드설명결과배열.length배열 길이 반환숫자배열 요소 추가/삭제배열 요소 삭제 시 삭제 가능한 요소가 없을 경우 undefined 반환메서드..

JS/Javascript 2024.01.20

[Javascript] 객체와 배열 다중 할당, 전개 연산자

속성 존재 여부 확인 객체에 없는 속성 접근 시 undefined가 리턴 되므로 해당 조건을 통한 존재여부 확인 가능 특정 속성이 false로 반횐될 수 있는 값(0, false,빈 문자열)이 아닐 떄에는 단순 조건문 처리로 처리 const person = { name: 'John', age: 20, hobby: '', }; person.gender === undefined ? console.log('속성 존재하지 않음') : console.log('속성 존재'); // false로 반환될 수 있는 경우를 대비한 전제한 상태로 조건 처리 person.hobby || console.log('속성존재') // false로 변환될 수 있는 값이 들어오지 않을 것이라는 전제가 있을 시 기본 속성을 지정해둠 pe..

JS/Javascript 2023.11.02

[Javascript] 객체

객체데이터를 { }로 감싸 객체를 정의데이터 타입의 제한이 없음키를 사용하여 데이터를 불러오거나 값을 변경할 수 있음const로 선언할 경우 객체 자체를 변경할 수는 없으나, 객체 안의 프로퍼티나 메서드는 변경이 가능객체의 키와 속성 값이 같을 경우 하나로 입력가능 객체 선언중괄호로 생성하면 쉼표로 연결하여 입력객체 생성 시 key는 식별자와 문자열 모두 사용가능하나 식별자로 사용할 수 없는 단어 사용 시 문자열로 선언객체 생성 시 new 예약어를 사용변수로 선언된 key와 value를 객체 속성으로 활용 시 key는 []로 감싸 활용 //  객체 초기화 const 객체명 = {}const 객체명 = new Object()//  객체 초기화 const 객체명 = {    key: value,    key..

JS/Javascript 2023.11.02

[함수] 클로저 함수 (Closure Function)

◎ 클로저 함수 : 함수가 종료되어도 함수 내부에 만든 지역변수가 사라지지 않고, 계속 값을 유지하는 상태를 클로저라고 하며, 내부에 있는 함수를 클로져 함수라고 함 - 연관있는 변수와 기능(중첩함수)을 하나의 함수로 묶어 독립적으로 실행 가능 - 함수 내부에 데이터가 만들어지기 떄문에 함수 외부에서 수정할 수 없는 보호된 데이터를 만들 수 있음 - 객체지향 프로그래밍에서는 private data, 캡슐화된 data라고 칭함 * 기본 문법 function name(callback){ 로직구현 callback(결과) // 로직 처리 부분을 다른 함수에 넘겨줌 } • Sources function createCounter() { let cnt = 0; // 지연 변수 선언 후 // add()가 클로저 함수가..

JS/Javascript 2023.02.25
반응형