javascript7 [JavaScript] this 제대로 이해하고 사용하기 Node 환경에서 코딩을 하면서 this를 사용해야 하는 경우가 있었습니다. 그런데 경우에 따라서 이 this의 동작이 달랐습니다. 다른 언어에서와는 달리 JavaScript는 this의 의미가 다르게 동작하는 경우가 있어서 제대로 이해하고 사용하고자 정리해 두었습니다. 1. this 란? 컴퓨터 프로그래밍 언어에서 this는 현재 실행 중인 코드가 속한 객체, 클래스 또는 기타 엔티티를 참조하는 데 사용하는 키워드입니다. this가 참조하는 엔티티는 실행 콘텍스트(예: 해당 메서드가 호출되는 객체)에 따라 달라집니다. 문제는 프로그래밍 언어마다 이 키워드를 약간 다른 방식으로 사용합니다. 많은 프로그래밍 언어에서 this는 한 가지 의미로 사용하는 경우가 많습니다만, JavaScript의 경우에는 사용.. 2023. 11. 19. [JavaScript] 데이터 타입(data type)과 형 변환(Type Conversion), Implicit coercion vs Explicit coercion 1. JavaScript 데이터 타입 1.1 동적 타입(dynamic type) JavaScript(JS)는 느슨한 타입(loosely typed)의 동적(dynamic) 언어다. JS의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당(및 재할당)이 가능하다. let foo = 42 // number foo = 'barr' // String foo = true // boolean 1.2 데이터 타입의 종류 JS에서 데이터 타입은 원시 값(Primitive values)과 객체(Object)로 나뉜다. 원시 값(Primitive values) - 객체(Object)를 제외한 모든 타입은 불변 값(immutable value : 변경할 수 없는 값)이다. - JS에서는 String도 원시.. 2023. 2. 25. [Javascript] ES5+ 기초강의 6 - class vs object, 객체지향언어 1. Class, Object, JavaScript class Class 란 - 실 세계의 물건들을 속성과 행동으로 정의한 것 - filed와 method를 묶어주는 컨테이너 - field : 속성 - method : 행동 - template - 한 번만 선언 - 실제 데이터는 없음 : no data in Object (instance) - class가 실체화한 것 : instance of a class - 여러 개를 만들 수 있음 - 실제 데이터를 가지고 있음 : data in class : template (템플릿) object : instance of a class (템플릿의 실체화) JavaScript Class ES6에서 추가됨 클래스가 도입되기 전에는 object를 바로 생성할 수 있었음 sy.. 2022. 7. 1. [Javascript] ES5+ 기초강의 5 - Arrow Function? 함수의 선언과 표현 1. Function 프로그램을 구성하는 기본적인 블록. 서브 프로그램으로 여러 번 재사용할 수 있음. 한 가지 task(작업)이나 value(값)을 연산하는 역할을 수행. 1.1 Function declaration : 함수 선언 함수는 프로그램을 구성하는 기본적인 블록 하나의 기능을 수행하는 프로그램 블록을 하나의 함수로 작성 다수의 기능을 수행하는 이름으로 작성해야 한다면, 각각의 기능을 수행하는 함수로 나누고 기능에 맞는 이름을 변경. Javascript에서 함수(function)는 object 타입. // 1. Funtion declaration // funcation name(param1, param2, ...) { body... return; } // 하나의 function은 한가지의 일만 .. 2022. 6. 26. [Javascript] ES5+ 기초강의 4 - 연산자, 조건문, 반복문, 코드 리뷰 팁 1. 연산자 1.1 String concatenation : 문자열 연결 // 1. String concatenation console.log('my' + ' cat'); // 'my cat' console.log('1' + 2); // '12' // Grave Accent(`) 사용시 홑따옴표(')는 그냥 표시됨 console.log(`string literals: ''' 1 + 2 = ${1+2}`); // 'string literals: ''' 1 + 2 = 3' // 홑따옴표 사용(')하여 문자열 지정할 경우 // 문자열 중간에 홑따옴표는 (\')를 사용 console.log('ellie\'s book'); // 'ellie's book' // 쌍따옴표(")도 사용할 수 있다 // 특수문자는 백슬.. 2022. 6. 21. [Javascript] ES5+ 기초강의 2 - Hello World!, Preparation, async vs defer 1. Hello Javascript! 1.1 node.js 에서 확인 // heloo javascript console.log('Hello Javascript!'); 위의 코드를 main.js로 저장하고 node.js를 이용하여 실행해봅니다. 실행은 소스파일이 있는 경로에서 실행해야 합니다. node.js 는 Javascript 엔진이 있어서 브라우저 없이 Javascript를 실행할 수 있습니다. node.js가 설치되어 있지 않다면 홈페이지에 접속하여 node.js를 설치합니다. https://dev-handbook.tistory.com/61 [nodejs] node.js 다운로드 및 설치 간단하게 Javascript 공부를 위해서 시작하다 보니 실습환경으로 node.js를 요구하고 있어서 급하게 다.. 2022. 6. 16. [JavaScript] 모니터, 듀얼 모니터 및 브라우저 기준으로 팝업창 가운데 띄우기 요즘은 브라우저에서 사용자 인터페이스를 구현할 때 팝업창을 띄우는 일이 많이 줄었습니다. 그래도 가끔은 필요하기에 간단하게 팝업창을 띄우는 방법은 비교적 간단합니다. Javascript에서 window.open() 함수를 사용하면 됩니다. 팝업창을 띄우는 자세한 방법에 대해서는 아래 링크를 참고해주세요. [Javascript] window.open(), window.opener() 부모창 자식창 간의 제어 방법 그런데 팝업창을 화면의 중앙에 띄울 경우는 조금 더 복잡하게 팝업창을 띄울 위치를 계산해야 합니다. 게다가 듀얼 윈도를 사용하는 사용자들이 많아지면서 일반적인 방법의 계산으로는, 팝업창이 듀얼 윈도를 기준으로 계산이 되어, 엉뚱한 위치에 띄워지게 됩니다. 그리고 전체 화면으로 사용하고 있지 않은 .. 2022. 5. 30. 이전 1 다음
