반응형

JS 57

#8 자바스크립트 객체

자바스크립트에서 객체는 **키(key)**와 값(value) 쌍으로 이루어진 데이터를 저장하는 데 사용되는 자료형입니다. 실제 세상의 사물이나 개념을 모델링하는 데 유용하며, 복잡한 데이터를 효과적으로 관리할 수 있게 해줍니다.객체 생성하기객체를 생성하는 방법은 여러 가지가 있습니다.1. 객체 리터럴가장 간단하고 일반적으로 사용되는 방법입니다. const person = { firstName: "홍", lastName: "길동", age: 30, isStudent: false};  2. 생성자 함수객체를 생성하기 위한 템플릿 역할을 합니다. function Person(firstName, lastName, age) { this.firstName = firstName; this.lastName ..

JS/JavaScript 2024.08.28

#7 자바스크립트 함수 : 코드의 재사용과 효율성을 위한 핵심

자바스크립트에서 함수는 특정 작업을 수행하는 코드 블록을 의미합니다.함수를 사용하면 코드의 재사용성을 높이고, 코드를 더욱 모듈화하여 관리하기 쉽게 만들 수 있습니다.함수의 기본 구조 function 함수이름(매개변수1, 매개변수2, ...) { // 함수 내부에서 실행될 코드 return 결과값; // (선택 사항)}  함수 이름: 함수를 호출할 때 사용하는 이름입니다.매개변수: 함수 내부에서 사용할 값을 전달받는 변수입니다.함수 본문: 함수가 실행할 코드를 작성하는 부분입니다.return: 함수의 실행 결과를 반환합니다. return 문을 생략하면 undefined가 반환됩니다.함수 호출 함수이름(인수1, 인수2, ...);  함수 이름 뒤에 괄호를 쓰고, 필요한 인수를 괄호 안에 전달하여 함수를..

JS/JavaScript 2024.08.28

#6 자바스크립트 조건문/반복문

- 조건문자바스크립트에서 조건문은 프로그램의 흐름을 제어하고 특정 조건에 따라 다른 코드를 실행하는 데 사용됩니다. 다양한 종류의 조건문이 있으며, 각 조건문은 고유한 용도와 문법을 가지고 있습니다.1. if 문가장 기본적인 조건문으로, 주어진 조건이 참일 때만 코드 블록을 실행합니다. let age = 20;if (age >= 19) { console.log("성인입니다.");}  2. if...else 문조건이 참일 때와 거짓일 때 각각 다른 코드 블록을 실행합니다. let isMember = false;if (isMember) { console.log("회원입니다.");} else { console.log("회원이 아닙니다.");}  3. if...else if...else 문여러 개의 조건을..

JS/JavaScript 2024.08.28

#5 자바스크립트 연산자

자바스크립트에서 연산자는 데이터를 처리하고 새로운 값을 생성하는 데 사용되는 특수한 기호입니다. 다양한 종류의 연산자가 있으며, 각 연산자는 고유한 기능과 우선순위를 가지고 있습니다. 이번 글에서는 자바스크립트 연산자에 대해 상세히 설명하고, 예제를 통해 이해를 돕겠습니다.1. 산술 연산자숫자 값을 가지고 사칙연산 등의 계산을 수행합니다.덧셈: + let result = 5 + 3; // result는 8  뺄셈: - let result = 10 - 4; // result는 6  곱셈: * let result = 2 * 5; // result는 10  나눗셈: / let result = 10 / 2; // result는 5  나머지: % let result = 10 % 3; // result는 1  증..

JS/JavaScript 2024.08.27

#4 자바스크립트 호이스팅(Hoisting)

자바스크립트 호이스팅이란 무엇일까요?자바스크립트의 호이스팅(Hoisting)은 변수나 함수 선언이 실제 코드에서 작성된 위치와 상관없이 코드의 맨 위로 끌어올려지는 것처럼 동작하는 특징을 말합니다. 즉, 변수나 함수를 선언하기 전에 사용하더라도 에러가 발생하지 않고, 선언된 것처럼 동작하는 현상을 의미합니다.왜 호이스팅이 발생할까요?자바스크립트 엔진은 코드를 실행하기 전에 먼저 코드 전체를 스캔하여 변수와 함수를 메모리에 할당합니다. 이 과정에서 변수와 함수 선언이 코드의 맨 위로 끌어올려지는 것처럼 보이는 효과가 발생하는 것입니다.호이스팅의 종류와 예제1. 변수 호이스팅var 키워드: var로 선언된 변수는 호이스팅이 되며, 선언 전에 사용하면 undefined 값을 가집니다.console.log(x)..

JS/JavaScript 2024.08.27

#3 자바스크립트 타입 변환

자바스크립트는 동적 타입 언어이기 때문에, 변수의 데이터 타입이 실행 중에 변경될 수 있습니다. 이러한 변환을 타입 변환이라고 합니다. 자바스크립트는 암시적 형 변환과 명시적 형 변환 두 가지 방식을 지원합니다.1. 암시적 형 변환 (Implicit Type Conversion)자바스크립트 엔진이 개발자가 의도하지 않더라도 자동으로 데이터 타입을 변환하는 것을 말합니다. 주로 연산 시에 발생하며, 예상치 못한 결과를 초래할 수 있으므로 주의해야 합니다.문자열 연결: 숫자와 문자열을 더하면 숫자가 문자열로 변환되어 연결됩니다.let result = 10 + "20"; // "1020"  비교 연산: 다른 타입의 값을 비교할 때, 자바스크립트는 값을 비슷한 타입으로 변환하여 비교합니다.console.log(..

JS/JavaScript 2024.08.27

#2 자바스크립트 데이터 타입 완벽 정복

자바스크립트에서 데이터 타입은 변수에 저장되는 값의 종류를 의미합니다. 데이터 타입을 정확하게 이해하는 것은 효율적인 자바스크립트 개발을 위해 필수적입니다. 이번 글에서는 자바스크립트에서 사용되는 다양한 데이터 타입에 대해 상세히 설명하고, 예제를 통해 이해를 돕겠습니다.1. 원시 타입 (Primitive Type)원시 타입은 값 자체가 메모리에 직접 저장되는 단순한 데이터 타입입니다.Number: 숫자를 나타냅니다. 정수, 소수, 부동소수점 숫자 등 다양한 숫자를 표현할 수 있습니다. let age = 30; // 정수let price = 9.99; // 소수let bigInt = 1234567890123456789n; // BigInt (큰 정수)  String: 문자열을 나타냅니다. 따옴표(')나 ..

JS/JavaScript 2024.08.27

#1 자바스크립트 변수 선언 : var, let, const 차이점 완벽 정리

자바스크립트에서 변수를 선언하는 방법은 크게 세 가지가 있습니다. 각각의 방법에는 고유한 특징과 사용 용도가 있으며, 올바른 변수 선언은 깨끗하고 효율적인 코드를 작성하는 데 필수적입니다.1. var 키워드특징: 함수 범위를 가집니다. 즉, 함수 내에서 선언된 var 변수는 해당 함수 내에서만 유효합니다.호이스팅: 변수 선언이 코드의 맨 위로 끌어올려지는 현상이 발생합니다. 즉, 변수를 선언하기 전에 사용해도 undefined 값이 할당됩니다.단점: 함수 범위라는 제한적인 스코프와 호이스팅으로 인해 예상치 못한 결과를 초래할 수 있습니다. function myFunction() { console.log(x); // undefined 출력 (호이스팅) var x = 10; console.log(x);..

JS/JavaScript 2024.08.27

Vue.js 디렉티브 directive (v-on, v-bind)

디렉티브 : vue 엘리먼트의 데이터, 함수 또는 event를 html tag와 연결 v-on 엘리먼트에 이벤트 리스너를 연결 DOM에 이벤트가 발생했을때 javascript를 실행 약어 : "v-on" ->> "@" html Hello Hello Hello javascript new Vue({ el: '#app', methods: { hello: function(){ alert('hello'); }, helloMsg: function(msg, e){ e.stopPropagation(); alert('hello' + ' ' + msg); } } }); v-bind html tag의 속성과 vue 데이터를 연결 약어 : "v-bind" ->> ":" html hello javascript new Vue({..

JS/Vue 2021.02.12

Vue.js 디렉티브 directive (v-text, v-html, v-show, v-if)

디렉티브 : vue 엘리먼트의 데이터, 함수 또는 event를 html tag와 연결 v-text 콧수염괄호와 동일 {{ message }} html {{message}} javascript new Vue({ el: '#app', data: { message: 'hello' } }); v-html Vue의 데이터를 html로 삽입 html javascript new Vue({ el: '#app', data: { message: 'hello Vue' } }); v-show css display 속성의 "block"/"none" 또는 jquery의 show()/hide() html show hide javascript new Vue({ el: '#app', data: { show: true, hide: fa..

JS/Vue 2021.02.11
반응형