전체 글 (88) 썸네일형 리스트형 [JS] this란 무엇일까 1. 단독으로 this를 호출하였을때 let x = this; console.log(x); // Window 전역 실행 문맥(global execution context) 에서는 묻지도 따지지도 않고 전역 객체를 반환한다. 즉, Window 객체를 반환한다. 2. 함수에서 this를 호출하였을때 함수 안에서 this는 함수의 주인에게 바인딩된다. 함수의 주인은? window객체이다! function myFunction() { return this; } console.log(myFunction()); //Window var num = 0; function addNum() { this.num = 100; num++; console.log(num); // 101 console.log(window.num); /.. [JS] 클로저가 무엇일까? 클로저 란? 어떤 함수를 렉시컬 스코프 밖에서 호출해도, 원래 선언되었던 렉시컬 스코프를 기억하고 접근할 수 있도록 하는 특성을 클로저라고 한다. function outer(){ let name = 'michelle'; function inner(){ console.log(`hello! ${name}`); } inner(); return inner; } let greeting = outer(); greeting(); outer함수 내부에서 inner 함수를 호출했을 때, 렉시컬 스코프에 따라서 inner함수의 상위 스코프는 outer함수 이다. 따라서 outer함수에 있는 name 변수에 접근할 수 있고 "hello! michelle"을 찍을 수 있다. greeting 변수에는 outer함수의 리턴값인 .. [JS] 함수 스코프(Scope)에 대해 좀 더 알아보자 스코프(Scope, 유효범위)란? 자바스크립트에서 스코프를 번역할때 보통 유효범위라고 번역한다. 어떤 변수들이 어느 시점까지 유효한지를 정의한다.스코프엔 두 가지 종류가 있다. 전역 스코프 자바스크립트 프로그램을 시작 후, 어떤 함수도 호출하지 않았을 때, 실행 흐름은 전역 스코프에 있다. 중괄호 {}의 밖을 전역 스코프라고 하고, 전역 스코프에서 선언된 것들을 전역 변수라고 한다. 전역 변수를 많이 이용한다면 부작용이 발생한다. const name = 'Kwon' const age = 21; function displayName() { console.log(`My name is ${name}`); } function displayAge() { console.log(`I was born in ${new .. [JS] 함수 호이스팅(Hoisting) 함수 호이스팅(hoisting) 자바스크립트에서 함수의 유효 범위라는 것은 함수 안에서 선언된 모든 변수는 함수 전체에 걸쳐 유효하다는 의미이다. 그런데 이 유효 범위의 적용이 변수가 선언되기 전에도 똑같이 적용된다. 이러한 자바스크립트의 특징을 함수 호이스팅(hoisting)이라고 한다. 즉, 자바스크립트 함수 안에 있는 모든 변수의 선언은 함수의 맨 처음으로 이동된 것처럼 동작한다. var globalNum = 10; // globalNum을 전역 변수로 선언함. function printNum() { document.write("지역 변수 globalNum 선언 전의 globalNum의 값은 " + globalNum + "입니다. "); var globalNum = 20; // globalNum을 .. [JS ES6+] var, let, const 차이점과 용도 JavaScript에서 변수 선언 방식인 var, let, const의 차이점에 대해 알아보자. var name = 'bathingape' console.log(name) // bathingape var name = 'javascript' console.log(name) // javascript 위 결과를 볼 때 변수를 한 번 더 선언했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다. 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있겠으나, 코드량이 많아진다면 어디에서 어떻게 사용될지도 파악하기 힘들뿐더러 값이 바뀔 우려가 있다. let name = 'bathingape' console.log(name) // bathingape let name = 'javascr.. JSON이 뭔지 알아보자 JSON ? JSON(JavaScript Object Notation)은 자바스크립트 문법을 빌린 데이터 교환 형식이다. { "title": "기록좀하자 인마", "description": "기록좀하자 인마의 Blog", "owner": "Kwon Hyeok Jin", "createdAt": "2020-03-00", "keyword": ["javascript", "Java", "MySQL", "WEB"], } JSON 함수 -JSON.parse() JSON형태의 String을 객체형 object로 변경하는 메소드이다. 데이터통신시 쿼리스트링 등 교환을 위해서는 문자형으로 변환이 필요하고, 이 주고받은 걸 다루기 위해서 다시 객체형으로 바꾸어 쓸 때 사용한다. const json = '{"result":t.. [JS] DOM(Document Object Model)에 대해서 알아보자 문서 객체 모델(DOM)이란? DOM(Document Object Model)은 웹 페이지에 대한 인터페이스이다. 기본적으로 여러 프로그램들이 페이지의 콘텐츠 및 구조, 그리고 스타일을 읽고 조작할 수 있도록 API를 제공한다. 먼저 DOM을 이해하기 전에 웹 페이지가 어떻게 빌드 되는지 살펴보자. DOM은 어떻게 생성될까 (그리고 어떻게 보여질까)? DOM은 원본 HTML 문서의 객체 기반 표현 방식이다. 둘은 서로 비슷하지만, DOM이 갖고 있는 근본적인 차이는 단순 텍스트로 구성된 HTML 문서의 내용과 구조가 객체 모델로 변환되어 다양한 프로그램에서 사용될 수 있다는 점이다. DOM의 개체 구조는 “노드 트리”로 표현된다. 하나의 부모 줄기가 여러 개의 자식 나뭇가지를 갖고 있고, 또 각각의 나뭇.. [JS] 자바스크립트의 객체 객체 객체란, 현실의 사물을 프로그래밍에 반영한 것이다. var name = { firstName = "gang", lastName = "hodong" }; name이라는 변수에 { }로 감싼 덩어리를 넣었다. 바로 이 덩어리가 객체이다. 여기서 fistName과 lastName은 Key가 되고 각각 gang과 hodong은 Value가 된다. 함수를 클래스처럼 사용하게 해주는 키워드 new 자바스크립트에서는 class가 없다. 하지만 그렇다고 하지만 그 기능을 대신하는 함수가 있다. new 라는 생성자 함수를 사용한다면 함수를 클래스처럼 인스턴스를 생성할 수 있다. 사용 예시 function Person(name, gender) { this.name = name; this.gender = gender;.. 이전 1 ··· 5 6 7 8 9 10 11 다음
