프론트엔드/javascript

-
@2023/10/04 안녕하세요 lika-7입니다이번시간에는 optional chaining에 대해 정리 하겠습니다 optional chaining이란?💡1. 객체의 속성에 안전하게 접근하기 위한 문법입니다. 2. 객체의 속성을 체인으로 접근할 때 발생할 수 있는 오류를 방지하고 코드를 간결하게 유지할 수 있도록 도와줍니다.키워드💡?. 연산자를 사용하여 구현됩니다.반환 내용객체의 중첩된 속성에 접근 할 때 해당 속성이 존재하지 않으면 오류를 발생시키지 않고, ‘undefined’를 반환 합니다코드코드1const user = { id: 1, name: "John", address: { city: "New York" } };const cityName = user.address?.city;?. 연산자는 use..
optional chaining@2023/10/04 안녕하세요 lika-7입니다이번시간에는 optional chaining에 대해 정리 하겠습니다 optional chaining이란?💡1. 객체의 속성에 안전하게 접근하기 위한 문법입니다. 2. 객체의 속성을 체인으로 접근할 때 발생할 수 있는 오류를 방지하고 코드를 간결하게 유지할 수 있도록 도와줍니다.키워드💡?. 연산자를 사용하여 구현됩니다.반환 내용객체의 중첩된 속성에 접근 할 때 해당 속성이 존재하지 않으면 오류를 발생시키지 않고, ‘undefined’를 반환 합니다코드코드1const user = { id: 1, name: "John", address: { city: "New York" } };const cityName = user.address?.city;?. 연산자는 use..
2023.10.04 -
@2023/10/04 안녕하세요 lika-7입니다이번시간에는 Shorthand Property Names/Property Value Shorthand 패턴에 대해 정리 하겠습니다 Shorthand Property Names/Property Value Shorthand 패턴이란?💡객체를 생성 할 때, 객체 리터럴과 변수 이름이 객체의 속성 이름과 일치할 경우, 속성 이름을 생략 할 수 있는 패턴을 Shorthand Property Names/Property Value Shorthand 패턴 이라고 부릅니다.예시코드const name = "John"; const age = 30; const person = { name: name, age: age };위 코드에서 name 변수와 age 변수를 사용해 pers..
Shorthand Property Names/Property Value Shorthand 패턴@2023/10/04 안녕하세요 lika-7입니다이번시간에는 Shorthand Property Names/Property Value Shorthand 패턴에 대해 정리 하겠습니다 Shorthand Property Names/Property Value Shorthand 패턴이란?💡객체를 생성 할 때, 객체 리터럴과 변수 이름이 객체의 속성 이름과 일치할 경우, 속성 이름을 생략 할 수 있는 패턴을 Shorthand Property Names/Property Value Shorthand 패턴 이라고 부릅니다.예시코드const name = "John"; const age = 30; const person = { name: name, age: age };위 코드에서 name 변수와 age 변수를 사용해 pers..
2023.10.04 -
@2023/10/04 안녕하세요 lika-7입니다이번시간에는 document 객체가 무엇인지 정리하겠습니다Document 객체Document 객체는 웹 페이지 그 자체를 의미합니다.💡웹 페이지에 존재하는 HTML 요소에 접근할 때 사용합니다 HTML 요소 생성 메소드const insertTag= document.createElement('태그명')document에 새로운 태그를 만들 때 사용합니다.⚠️만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. append 메소드를 통해 node에 추가 합니다.document.querySelector('붙일 테그명').append(insertTag) HTML 요소 내부 콘텐츠 접근 메소드 Hello, World! 자바스크립트를 사용하여 이 요소의 i..
Document 객체@2023/10/04 안녕하세요 lika-7입니다이번시간에는 document 객체가 무엇인지 정리하겠습니다Document 객체Document 객체는 웹 페이지 그 자체를 의미합니다.💡웹 페이지에 존재하는 HTML 요소에 접근할 때 사용합니다 HTML 요소 생성 메소드const insertTag= document.createElement('태그명')document에 새로운 태그를 만들 때 사용합니다.⚠️만든다고 바로 생기는 게 아니라 변수를 통해 메모리에 저장됩니다. append 메소드를 통해 node에 추가 합니다.document.querySelector('붙일 테그명').append(insertTag) HTML 요소 내부 콘텐츠 접근 메소드 Hello, World! 자바스크립트를 사용하여 이 요소의 i..
2023.10.04 -
@2023/10/03 안녕하세요 lika-7입니다이번시간에는 String.prototype.trim()에 대해 정리 하겠습니다String.prototype.trim() 의 사용 이유💡1. 문자열 양 끝의 공백을 제거하고 반환 합니다.사용방법const greeting = ' Hello world! '; console.log(greeting); // Expected output: " Hello world! "; console.log(greeting.trim()); // Expected output: "Hello world!";
String.prototype.trim()@2023/10/03 안녕하세요 lika-7입니다이번시간에는 String.prototype.trim()에 대해 정리 하겠습니다String.prototype.trim() 의 사용 이유💡1. 문자열 양 끝의 공백을 제거하고 반환 합니다.사용방법const greeting = ' Hello world! '; console.log(greeting); // Expected output: " Hello world! "; console.log(greeting.trim()); // Expected output: "Hello world!";
2023.10.03 -
@2023/10/03 안녕하세요 lika-7입니다이번시간에는 object.defineProperty에 대해 정리 하겠습니다object.defineProperty 의 사용 이유💡1. JavaScript에서 객체의 속성을 정의하거나 수정하는 메서드 2. 속성의 특성을 직접 정의할 수 있다.object.defineProperty 파라메터Object.defineProperty(obj, prop, descriptor)obj: 속성을 정의하거나 수정하려는 객체prop: 정의하거나 수정하려는 속성의 이름descriptor: 속성의 특성을 정의하는 객체value: 속성의 초기값 지정writable: 해당 속성의 값을 변경 할 수 있는지 여부 나타내는 값enumerable: 해당 속성이 열거 가능한지 여부를 나타내는 부..
프로퍼티 정의 object.defineProperty@2023/10/03 안녕하세요 lika-7입니다이번시간에는 object.defineProperty에 대해 정리 하겠습니다object.defineProperty 의 사용 이유💡1. JavaScript에서 객체의 속성을 정의하거나 수정하는 메서드 2. 속성의 특성을 직접 정의할 수 있다.object.defineProperty 파라메터Object.defineProperty(obj, prop, descriptor)obj: 속성을 정의하거나 수정하려는 객체prop: 정의하거나 수정하려는 속성의 이름descriptor: 속성의 특성을 정의하는 객체value: 속성의 초기값 지정writable: 해당 속성의 값을 변경 할 수 있는지 여부 나타내는 값enumerable: 해당 속성이 열거 가능한지 여부를 나타내는 부..
2023.10.03 -
@2023/09/18 안녕하세요 lika-7입니다이번시간에는 this가 무엇인지 정리하겠습니다this를 볼때마다 내 표정this가 들어간 코드를 볼 때마다 이게 무엇인지 모르겠습니다.이에 관련한 내용을 찾아봐도 이해하기 어렵더군요…나름 이해하기 쉽게 정리해보겠습니다JavaScript에서 this는JavaScript에서 this는 현재 실행중인 코드에서 참조하는 객체를 나타냅니다. this는 다양한 상황에서 동적으로 결정되어 다른 값을 가질 수 있습니다💡this 값은 호출한 코드 블럭 또는 함수와 호출 컨텍스트에 의존합니다.전역 컨텍스트(Global Context)에서 this컨텍스트란💡실행 컨택스트란 코드가 실행되는 환경으로 이해 할 수 있습니다//JavaScript console.log("전역 컨텍스트..
this@2023/09/18 안녕하세요 lika-7입니다이번시간에는 this가 무엇인지 정리하겠습니다this를 볼때마다 내 표정this가 들어간 코드를 볼 때마다 이게 무엇인지 모르겠습니다.이에 관련한 내용을 찾아봐도 이해하기 어렵더군요…나름 이해하기 쉽게 정리해보겠습니다JavaScript에서 this는JavaScript에서 this는 현재 실행중인 코드에서 참조하는 객체를 나타냅니다. this는 다양한 상황에서 동적으로 결정되어 다른 값을 가질 수 있습니다💡this 값은 호출한 코드 블럭 또는 함수와 호출 컨텍스트에 의존합니다.전역 컨텍스트(Global Context)에서 this컨텍스트란💡실행 컨택스트란 코드가 실행되는 환경으로 이해 할 수 있습니다//JavaScript console.log("전역 컨텍스트..
2023.09.18 -
@2023/09/18 안녕하세요 lika-7입니다이번시간에는 스코프가 무엇인지 정리하겠습니다스코프란💡스코프(scope)란 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프란 ‘변수에 접근 할 수 있는 범위’ 라고 할수 있습니다스코프 스코프 타입은 2가지가 있습니다전역(global) 타입전역 스코프(Global Scope)는 전역에 선언되어 있어서 어느 곳에서든 해당 변수에 접근 할 수 있다는 의미 입니다.//JavaScript const globalVariable = 'I am a global variable'; function globalFunction() { console.log(globalVariable); // 전역 스코프에서의 변수 접근 } globalFunction();glob..
스코프 scope@2023/09/18 안녕하세요 lika-7입니다이번시간에는 스코프가 무엇인지 정리하겠습니다스코프란💡스코프(scope)란 우리말로 번역하면 ‘범위’라는 뜻을 가지고 있습니다. 즉, 스코프란 ‘변수에 접근 할 수 있는 범위’ 라고 할수 있습니다스코프 스코프 타입은 2가지가 있습니다전역(global) 타입전역 스코프(Global Scope)는 전역에 선언되어 있어서 어느 곳에서든 해당 변수에 접근 할 수 있다는 의미 입니다.//JavaScript const globalVariable = 'I am a global variable'; function globalFunction() { console.log(globalVariable); // 전역 스코프에서의 변수 접근 } globalFunction();glob..
2023.09.18