본문 바로가기
반응형

JavaScript

❶ 변수, 호이스팅, TDZ(Temporal Dead Zone) | 자바스크립트 중급 문법
JavaScript 2023. 11. 3. ❶ 변수, 호이스팅, TDZ(Temporal Dead Zone) | 자바스크립트 중급 문법 var & let var는 한번 선언된 변수를 다시 선언할 수 있다. let name = 'hanseul'; console.log(name); let name = 'duseul' console.log(name); //에러 var는 선언하기 전에 사용할 수 있다. console.log(name); // undefined var name = 'hanseul'; 왜 에러가 일어나지 않는가 ? var name; //선언부 console.log(name); // undefined name = 'hanseul'; //할당부 왜냐하면 var는 이렇게 동작하기 때문이다. 이를 호이스팅이라고 한다. (호이스팅 : 스코프내부 어디서든 변수 선언은 최상위에 선언된 것처럼 행동) 그렇다면 왜 undefined를 반환할까? 선..
[ES6 문법] 전개 연산자, 기본/참조형 데이터 타입
JavaScript 2023. 8. 13. [ES6 문법] 전개 연산자, 기본/참조형 데이터 타입 1. 객체에 전개 연산자 적용 먼저 itemList라는 객체 배열을 생성하고 이 배열을 전개 연산자를 사용하여 새로운 배열 newItemList에 복사해보자. var itemList = [ { no: 1, todo: '두부', done: false}, { no: 2, todo: '계란', done: false}, { no: 3, todo: '라면', done: false}, ]; var newItemList = [ ...itemList ]; 전개 연산자를 통해 newItemList 배열이 생성되며, itemList와 동일한 내용을 가지게 된다. 이때, 기존 객체와는 서로 다른 메모리 주소를 가리키기 때문에 독립적으로 동작한다. 다음으로 새로운 배열 newItemList의 두 번째 요소만을 복사하여 수정해..
[ES6 문법] 구조 분해 할당(Destructuring assignment)
JavaScript 2023. 8. 12. [ES6 문법] 구조 분해 할당(Destructuring assignment) 구조 분해 할당(Destructuring assignment) 구조 분해 할당은 배열과 객체의 값을 더욱 쉽게 추출하거나 변수에 할당할 수 있게 도와준다. var itemList = [ { no: 1, todo: '두부', done: true}, { no: 2, todo: '계란', done: false}, { no: 3, todo: '라면', done: true}, ]; 위 코드는 여러 할 일을 나타내는 객체가 포함된 itemList 배열을 선언하고 있다. 각 객체엔 no, todo, done 속성들이 있다. 1. 배열 구조 분해 할당(Array Destructuring) 일반적으로 배열 요소에 접근하려면 인덱스를 사용해야 한다. console.log(itemList[0]); console.log(it..
[ES6 문법] 화살표 함수(Arrow Function)
JavaScript 2023. 8. 11. [ES6 문법] 화살표 함수(Arrow Function) 화살표 함수(Arrow Function)란? 화살표 함수는 ES6(ECMAScript 6)에서 도입된 새로운 함수 작성 방식이다. 기존에 사용하던 function 키워드를 생략하고 => 기호를 사용하여 간결한 문법으로 함수를 표현할 수 있다. 일반 함수 표현법 function (a, b) { return a + b; } 화살표 함수 표현법 (a, b) => a + b 화살표 함수는 주로 익명의 함수를 간략하게 작성할 때 사용한다. 배열 요소 제곱하기 주어진 배열의 각 요소를 제곱하여 새로운 배열을 만드는 예제를 살펴보자. var arr = [10, 20, 30]; 방법 1. forEach와 화살표 함수 사용하기 아래 코드는 forEach() 함수를 사용하고 인자로 화살표 함수를 전달했다. var arr2..
[JavaScript] 클로저 | 정의, 동작원리, 데이터은닉, 비동기작업
JavaScript 2023. 6. 29. [JavaScript] 클로저 | 정의, 동작원리, 데이터은닉, 비동기작업 클로저의 정의 클로저란 내부 함수가 외부 함수의 변수에 접근할 수 있는 기능이다. 다른 말로, 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합이다. 이로 인해 클로저는 변수의 값이 사라져도 그 값을 기억할 수 있다. 클로저의 동작 원리 function outer() { let count = 0; function inner() { count++; console.log(count); } return inner; } const counter = outer(); counter(); // 1 counter(); // 2 위 예제에서 outer 함수는 inner 함수를 반환한다. inner 함수는 count 변수에 접근하고 수정할 수 있는 클로저이다. 이로 인해 counter 변수에 할당된 함수를 호출할 때마..
[JavaScript] this | 전역, 함수호출, 객체, 생성자함수, 이벤트핸들러
JavaScript 2023. 6. 28. [JavaScript] this | 전역, 함수호출, 객체, 생성자함수, 이벤트핸들러 전역 컨텍스트에서의 this 전역 컨텍스트에서 'this'는 전역 객체를 참조한다. 웹 브라우저에서 전역 객체는 'window' 객체이고, Node.js에서는 'global' 객체이다. *컨텍스트(context): 프로그래밍에서 언어의 일부가 작동하는 맥락이나 범위를 나타냄 console.log(this); // window (브라우저) 또는 global (Node.js) 일반 함수 호출에서의 this 일반적인 함수 호출에서 'this'는 기본적으로 전역 객체를 참조한다. 그러나 strict mode를 사용할 경우 'this'는 undefined를 참조한다. * strict mode: 코드 실행 환경으로, 기존의 자바스크립트 구문 및 동작에 대한 제한을 추가하여 코드의 안정성과 성능을 높이는 데 도움 f..
[JavaScript] 변수선언 | var, let, const + 호이스팅
JavaScript 2023. 6. 27. [JavaScript] 변수선언 | var, let, const + 호이스팅 var var 키워드는 자바스크립트에서 가장 오래된 변수 선언 방식이다. var로 선언된 변수는 함수 레벨 스코프를 가지며, 호이스팅이 발생한다. function example() { console.log(message); // undefined (호이스팅 발생) var message = 'Hello, JavaScript!'; console.log(message); // 'Hello, JavaScript!' } example(); var로 선언된 변수는 호이스팅이 발생하여 변수 선언이 해당 스코프의 최상단으로 끌어올려진다. 이로 인해 변수를 선언하기 전에 참조하게 되면 undefined 값을 출력한다. let ES6에서 도입된 let 키워드는 블록 레벨 스코프를 가진 변수를 선언하는 데 사용된다. 또한,..
[JavaScript] 스코프 | 전역스코프, 지역스코프, 스코프체인, 함수레벨스코프, 렉시컬 스코프
JavaScript 2023. 6. 26. [JavaScript] 스코프 | 전역스코프, 지역스코프, 스코프체인, 함수레벨스코프, 렉시컬 스코프 스코프는 변수 또는 함수의 유효한 범위이다. 특정 스코프 내에서 선언된 변수는 해당 스코프에 종속되며, 이를 통해 변수의 가시성과 생명주기를 제어할 수 있다. 자바스크립트는 전역 스코프와 지역 스코프의 두 가지 주요 스코프를 가지고 있다. 전역 스코프 전역 스코프는 특별한 스코프로서 모든 코드 영역에서 변수에 접근할 수 있다. 전역 변수는 전역 객체의 프로퍼티로 선언된다. JavaScript에서 전역 객체는 웹 브라우저의 경우 window 객체에, Node.js의 경우 Global 객체에 해당한다. 전역 스코프에서 선언된 변수는 애플리케이션 전체에서 사용할 수 있다. 단, 전역 스코프에 무분별하게 변수를 선언하지 않는 것이 좋다. 이로 인해 메모리 낭비, 충돌 등의 문제가 발생할 수 있기때문이다. 지역 ..
[JavaScript] 함수 호출 (호출 방식, 매개변수와 인수, 반환 값(return))
JavaScript 2023. 6. 25. [JavaScript] 함수 호출 (호출 방식, 매개변수와 인수, 반환 값(return)) 호출 방식 : 함수를 호출하기 위해 함수 이름 다음에 소괄호를 사용 function greet() { console.log("Hello, World!"); } greet(); // 출력: "Hello, World!" 매개변수와 인수 : 매개변수는 함수 선언 시 정의, 인수는 함수 호출 시 전달되는 값 function greet(name) { // "name"은 매개변수입니다. console.log(`Hello, ${name}!`); } greet("Alice"); // "Alice"는 인수입니다. function add(a, b) { // "a"와 "b"는 매개변수입니다. return a + b; } const result = add(3, 4); // "3"과 "4"는 인수입니다. console.log(..
[JavaScript] 함수 정의 (함수 선언, 함수 표현식, 화살표 함수, return)
JavaScript 2023. 6. 24. [JavaScript] 함수 정의 (함수 선언, 함수 표현식, 화살표 함수, return) 함수 선언(function declaration) 함수 표현식(function expression) 화살표 함수(arrow function) 함수 선언(function declaration) function myFunction(param1, param2) { // 함수 로직 } function greet(name) { console.log(`Hello, ${name}!`); } greet("Alice"); 함수 표현식(function expression) const myFunction = function(param1, param2) { // 함수 로직 }; const greet = function(name) { console.log(`Hello, ${name}!`); }; greet("Bob"); 화살표..
[JavaScript] 타입변환, 객체(objects) 및 프로퍼티(properties)
JavaScript 2023. 6. 23. [JavaScript] 타입변환, 객체(objects) 및 프로퍼티(properties) 명시적 타입 변환 (Explicit Type Conversion) : 값을 특정한 형식으로 변환하는 것을 개발자가 직접 지시하는 방식. String(), Number(), Boolean() let num = 123; let str = String(num); console.log(typeof str); // 출력: "string" 암시적 타입 변환 (Implicit Type Conversion) : 자바스크립트 엔진이 자동으로 값을 적절한 형식으로 변환하는 과정 let num = 123; let str = num + ""; console.log(typeof str); // 출력: "string" 객체(Object) 및 프로퍼티(Properties) : 객체란 프로퍼티(key-value 쌍)의 모음으로 여러..
[JavaScript] 반복문 (for, while, do...while, break, continue)
JavaScript 2023. 6. 22. [JavaScript] 반복문 (for, while, do...while, break, continue) for문 while문 do...while문 break문 continue문 for문 : 주어진 횟수만큼 반복을 수행하는 가장 일반적인 반복문. 초기화, 조건, 그리고 반복 후 작업이 정의 // 예: 0부터 4까지 출력 for (let i = 0; i < 5; i++) { console.log(i); } while문 : 조건이 참인 동안 계속해서 반복. 조건문이 거짓이 될 때까지 블록 내의 코드가 반복적으로 수행 // 예: 0부터 4까지 출력 let i = 0; while (i < 5) { console.log(i); i++; } do...while문 : 코드 블록을 한 번 실행한 뒤 조건이 참인 동안 반복. 따라서 무조건 코드 블록이 한 번 이상 실행 // 예: 0부터 4까지 출력 let i = 0; do..
반응형

티스토리툴바