🚀 JavaScript 변수와 상수: 기본 개념부터 명명 규칙까지 완벽 정리!
·
Javascript
1. 변수 (Variable)와 상수 (Constant)의 이해변수와 상수는 모두 프로그램이 실행되는 도중에 값을 저장하는 저장소입니다. 하지만 두 가지에는 중요한 차이점이 있습니다.📝 변수(Variable)변수는 프로그램 실행 중에 값을 자유롭게 바꿀 수 있는 저장소입니다. 자바스크립트에서 변수는 주로 let 키워드를 사용해 선언합니다.선언 및 초기화: let 키워드와 함께 변수 이름과 저장할 값을 지정합니다.let age = 27; // age라는 변수를 선언하고 값 27로 초기화console.log(age); // 출력: 27변수 선언: let age; 와 같이 변수를 새로 만드는 행위.초기화: 변수를 선언함과 동시에 값을 할당하는 행위 (age = 27).값 변경 (재할당): 변수는 프로그램 실..
자바스크립트 자료형과 형 변환 가이드
·
Javascript
자바스크립트는 다른 프로그래밍 언어와 달리 변수를 선언할 때 자료형을 명시하지 않아도 됩니다. 이러한 특성을 이해하려면 자료형의 개념과 형 변환의 원리를 정확히 알아야 합니다. 자바스크립트의 자료형 체계와 형 변환 메커니즘을 자세히 살펴보겠습니다.자바스크립트의 자료형 체계원시 타입 vs 비원시 타입자바스크립트의 모든 자료형은 크게 원시 타입(Primitive Type)과 비원시 타입(Non-Primitive Type)으로 나뉩니다.// 원시 타입 예제let number = 123; // 숫자let text = "hello"; // 문자열let isTrue = true; // 불린let empty = null; // nulllet notDefined; ..
자바스크립트 변수와 상수 가이드
·
Javascript
프로그래밍에서 데이터를 저장하고 관리하는 가장 기본적인 방법이 바로 변수와 상수입니다. 자바스크립트 학습의 첫걸음인 변수와 상수의 개념부터 실제 사용법까지 자세히 알아보겠습니다.변수란 무엇인가?변수의 정의변수(Variable)는 이름을 가진 저장소입니다. 마치 상자에 이름표를 붙여놓고 그 안에 물건을 보관하는 것과 같습니다.// myBox라는 이름의 변수에 'Robot' 저장let myBox = 'Robot';변수를 사용하면 복잡한 데이터를 의미있는 이름으로 관리할 수 있어 코드의 가독성과 유지보수성이 크게 향상됩니다.변수 명명 규칙자바스크립트에서 변수 이름을 정할 때는 다음 규칙을 반드시 지켜야 합니다.필수 규칙특수문자 제한: $와 _를 제외한 다른 기호는 사용 불가숫자 시작 금지: 변수명의 첫 글자는..
모바일에서 키보드 열림 닫힘 감지
·
Javascript
if ('visualViewport' in window) { const VIEWPORT_VS_CLIENT_HEIGHT_RATIO = 0.75; window.visualViewport.addEventListener('resize', function (event) { if ( (event.target.height * event.target.scale) / window.screen.height < VIEWPORT_VS_CLIENT_HEIGHT_RATIO ) console.log('keyboard is shown'); else console.log('keyboard is hidden'); }); }
템플릿 리터럴(Template Literal)
·
Javascript
ES6부터 새로 도입된 문자열 표기법입니다. 문자열 생성시 작은따옴표(')나 큰따옴표(") 대신 백틱(`)으로 감싸줍니다. 템플릿 리터럴은 또한 플레이스 홀더를 이용하여 표현식을 넣을 수 있는데, 이는 $와 중괄호( $ {expression} ) 로 표기할 수 있습니다. 템플릿 리터럴의 기본 문법 `string text` // 한줄 표현 `string text line 1 string text line 2` // 개행된 표현 var expression; `string text ${expression} string text` // 변수값 문자열 조합 function tag() { }; tag `string text ${expression} string text` // 함수 호출 Expression inte..
ES6 - 자식노드 인덱스 가져오기
·
Javascript
Array.from(element.parentNode.children).indexOf(element) element.parentNode.children → element해당 요소를 포함하여 의 형제를 반환합니다. Array.fromchildren → 생성자 를 Array객체 로 캐스트합니다. indexOf → 이제 대상[Array]이 있으므로 indexOf를 신청할 수 있습니다.