javascript
-
JavaScript에서 주로 사용하던 변수 키워드는 var이다. 하지만 ES6 문법에서 다양한 변수 선언을 위해 let 과 const를 추가로 만들었다. 그 이유를 알아보자 const testNumber = 10002; //변수명 : testNumber // 해당 변수 값의 메모리 주소 : 123G123X // 변수 값 : 10002 변수에 값을 할당하면 위와 같이 메모리에 저장된다. 자바스크립트는 Managed Language 언어이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 접근하지 않아도 변수 선언을 통해 안전하게 값을 가져올 수 있다. 여기서 변수명(testNumber)은 값을 기억하는게 아닌 메모리 주소값을 기억하고 있어 호출했을 경..
Javascript 변수 선언과 var, let, const 차이JavaScript에서 주로 사용하던 변수 키워드는 var이다. 하지만 ES6 문법에서 다양한 변수 선언을 위해 let 과 const를 추가로 만들었다. 그 이유를 알아보자 const testNumber = 10002; //변수명 : testNumber // 해당 변수 값의 메모리 주소 : 123G123X // 변수 값 : 10002 변수에 값을 할당하면 위와 같이 메모리에 저장된다. 자바스크립트는 Managed Language 언어이기 때문에 개발자가 직접 메모리를 제어하지 못한다. 따라서 개발자가 직접 메모리 주소를 통해 값을 저장하고 접근하지 않아도 변수 선언을 통해 안전하게 값을 가져올 수 있다. 여기서 변수명(testNumber)은 값을 기억하는게 아닌 메모리 주소값을 기억하고 있어 호출했을 경..
2022.05.25 -
JSON(Javascript Object Notation) JSON은 JavaScript Object Notation 의 약자로 데이터를 저장하거나 전송하기 위한 경량 DATA 포맷이다. JSON은 DATA 포맷이라는 단어처럼 데이터를 표현하기 위한 방법일 뿐이다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아 최근에는 XML을 대신해 JSON이 데이터 전송에 많이 사용한다. XML vs JSON XML(eXtensible Markup Language) HTML과 비슷한 문자 기반의 마크업 언어이다. 사람과 기계 모두 읽기 편한 구조로 되어 있다. 하지만 HTML 처럼 데이터를 보여주는게 목적이 아닌 데이터를 저장하고 전달할 목적으로 만들어졌다. XML의 특징은 태그명을 사용자가 직접 ..
JSON 객체 (JSON.parse(), JSON.stringify())JSON(Javascript Object Notation) JSON은 JavaScript Object Notation 의 약자로 데이터를 저장하거나 전송하기 위한 경량 DATA 포맷이다. JSON은 DATA 포맷이라는 단어처럼 데이터를 표현하기 위한 방법일 뿐이다. JSON 표현식은 사람과 기계 모두 이해하기 쉬우며 용량이 작아 최근에는 XML을 대신해 JSON이 데이터 전송에 많이 사용한다. XML vs JSON XML(eXtensible Markup Language) HTML과 비슷한 문자 기반의 마크업 언어이다. 사람과 기계 모두 읽기 편한 구조로 되어 있다. 하지만 HTML 처럼 데이터를 보여주는게 목적이 아닌 데이터를 저장하고 전달할 목적으로 만들어졌다. XML의 특징은 태그명을 사용자가 직접 ..
2022.05.20 -
자바스크립트자바스크립트는 웹페이지에 생동감을 주기 위한 프로그래밍 언어이다. 웹페이지를 그리기 위한 HTML, CSS는정적인 언어이다. 정적이라는 것은 이 언어들은 브라우저를 통해서 웹페이지를 화면에 그려주고 나서 이 화면을변경할 수 있는 방법이 없다는 의미이다. 어떤 버튼을 클릭했을 때 경고창을 띄우는 등 이벤트를 스스로 발생시킬 수없다. 이러한 역할을 하는게 자바스크립트 이다. 자바스크립트를 실행시키기 위해선 자바스크립트 런타임 환경이 필요하다.런타임 환경이라는건 프로그래밍 언어를 실행시키기 위한 환경을 말한다. 이러한 자바스크립트 런타임 환경을만들기 위해선 자바스크립트 엔진이 필요하다.대표적인 예로는 Chrome 웹브라우저와 Nodejs에서 사용하는 Google의 V8 엔진이다.모든 웹브라우저에서 ..
자바스크립트 동작 원리자바스크립트자바스크립트는 웹페이지에 생동감을 주기 위한 프로그래밍 언어이다. 웹페이지를 그리기 위한 HTML, CSS는정적인 언어이다. 정적이라는 것은 이 언어들은 브라우저를 통해서 웹페이지를 화면에 그려주고 나서 이 화면을변경할 수 있는 방법이 없다는 의미이다. 어떤 버튼을 클릭했을 때 경고창을 띄우는 등 이벤트를 스스로 발생시킬 수없다. 이러한 역할을 하는게 자바스크립트 이다. 자바스크립트를 실행시키기 위해선 자바스크립트 런타임 환경이 필요하다.런타임 환경이라는건 프로그래밍 언어를 실행시키기 위한 환경을 말한다. 이러한 자바스크립트 런타임 환경을만들기 위해선 자바스크립트 엔진이 필요하다.대표적인 예로는 Chrome 웹브라우저와 Nodejs에서 사용하는 Google의 V8 엔진이다.모든 웹브라우저에서 ..
2022.03.29 -
$(function(){}) 아래 구문의 축약형이다. 페이지 로딩이 끝났을 때 실행될 함수를 등록한다. 실행 예) $(function(){ }) $(document).ready(funtcion(){}) DOM(Document Object Model)이 완전히 불러와지면 실행되는 이벤트이다. 쉽게 말하자면 페이지가 모두 로드된 후 괄호안의 함수를 실행한다. 실행 예) $(document).ready(function(){ });
$(function(){}) 과 $(document).ready() 의 차이$(function(){}) 아래 구문의 축약형이다. 페이지 로딩이 끝났을 때 실행될 함수를 등록한다. 실행 예) $(function(){ }) $(document).ready(funtcion(){}) DOM(Document Object Model)이 완전히 불러와지면 실행되는 이벤트이다. 쉽게 말하자면 페이지가 모두 로드된 후 괄호안의 함수를 실행한다. 실행 예) $(document).ready(function(){ });
2022.03.14 -
1. forEach 와 return 문 let array = [1,2,3,4]; array.forEach((item, index) => { console.log(item); if(item == 2){ return; } }) 위 코드를 보면 2까지 출력한 후 반복문이 종료될거 같지만 종료되지 않으며, 배열의 크기만큼 출력한 후 종료된다. forEach 반복문의 return은 아무런 영향을 끼치지 않는다. 공식 MDN 문서의 forEach에 관한 내용은 아래와 같다. 예외를 발생시키는 경우를 제외하고는 forEach() 루프를 중단시킬 방법은 없다. 만약 그러한 목적으로 forEach() 메소드를 사용하는것은 잘못된 방법이다. 공식 MDN - forEach 위 설명과 같이 forEach() 반복문은 도중에 ..
반복문과 return1. forEach 와 return 문 let array = [1,2,3,4]; array.forEach((item, index) => { console.log(item); if(item == 2){ return; } }) 위 코드를 보면 2까지 출력한 후 반복문이 종료될거 같지만 종료되지 않으며, 배열의 크기만큼 출력한 후 종료된다. forEach 반복문의 return은 아무런 영향을 끼치지 않는다. 공식 MDN 문서의 forEach에 관한 내용은 아래와 같다. 예외를 발생시키는 경우를 제외하고는 forEach() 루프를 중단시킬 방법은 없다. 만약 그러한 목적으로 forEach() 메소드를 사용하는것은 잘못된 방법이다. 공식 MDN - forEach 위 설명과 같이 forEach() 반복문은 도중에 ..
2021.12.09 -
export(내보내기) Javascript 내부에서 객체, 함수, 원시 값을 내보낼때 사용한다. 외부에서 import를 통해 불러온다. export 방식에는 Named와 default 방식이 있다. named export 방식 export const obo = 'obo'; export const oboArray = [1,2,3,4]; export function oboFunction() {}; export {obo, oboArray, oboFunction}; //동시에 선언 named export 방식으로 사용하면 import 하는곳에서 위에 선언된 이름을 사용해야한다. 다른이름을 사용하기 위해선 as 라는 키워드를 사용해서 변경이 가능하다. export const obo = 'obo'; export c..
ES6 export 와 importexport(내보내기) Javascript 내부에서 객체, 함수, 원시 값을 내보낼때 사용한다. 외부에서 import를 통해 불러온다. export 방식에는 Named와 default 방식이 있다. named export 방식 export const obo = 'obo'; export const oboArray = [1,2,3,4]; export function oboFunction() {}; export {obo, oboArray, oboFunction}; //동시에 선언 named export 방식으로 사용하면 import 하는곳에서 위에 선언된 이름을 사용해야한다. 다른이름을 사용하기 위해선 as 라는 키워드를 사용해서 변경이 가능하다. export const obo = 'obo'; export c..
2021.11.09