전체 글

[자바스크립트] const, let 키워드

let, const 키워드와 블록 레벨 스코프 1. var 키워드로 선언한 변수의 문제점 변수 중복 선언 허용 var x = 1; var y = 2; //var 키워드로 선언된 변수는 스코프 내에서 중복 선언 허용 // 초기화문 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드 없는 것처럼 동작 var x = 100; //초기화문이 없는 변수 선언문의 무시됨. var y; x // 100 y // 2 함수 레벨 스코프 var 키워드로 선언한 변수는 함수의 코드 블록만은 지역 스코프로 인정(함수 내부 제외한 나머지는 모두 전역 변수) var i = 1; for(var i = 0; i < 5, i++){ console.log(i); } i // 5 변수 호이스팅 변수 호이스팅 - 변수 선언문이 코드..

[CSS] display, position

See the Pen Untitled by Sunyeong (@cozynye) on CodePen. css 박스모델 모든 HTML 요소는 박스 모양으로 구성되며, 이것을 박스 모델이라고 한다. contents - 텍스트나 이미지가 들어가 있는 박스의 실질적 내용 부분 padding - 테두리와 컨텐츠 사이의 간격 border - 컨텐츠를 둘러싸는 테두리 margin - 태그 간의 간격, 테두리 바깥쪽의 공간 display 기본적으로 태그들은 왼쪽에서 오른쪽으로 위쪽에서 아래쪽으로 쌓인다. display 속성은 해당 html 요소가 웹 브라우저에 언제 어떻게 보이는가를 결정 inline 컨텐츠를 감쌀정도의 크기만 갖게 된다. 블락태그와 다르게 줄바끔 X 크기를 변화시킬수 없다.(width, height 값..

[자바스크립트] 전역 변수의 문제점

전역 변수의 문제점 1. 변수의 생명주기 지역 변수의 생명주기 생명주기 - 변수는 생물과 유사하게 생성되고 소멸된다. why? 생명 주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 계속 메모리 공간을 점유하기 때문 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같고, 지역 변수는 함수가 호출되면 생성되고 함수가 종료하면 소멸한다. -> 지역 변수의 생명 주기는 함수의 생명 주기와 일치 함수 내부에서 선언한 지역 변수는 런타임 이전 단계에서 자바스크립트 엔진에 의해 실행되는 전역 변수와 다르게 함수가 호출된 직후 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행된다. 전역 변수의 생명 주기 var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티..

[자바스크립트] 스코프

스코프 1. 스코프란? 스코프 - 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. -> 식별자가 유효한 범위 식별자 결정 - 자바스크립트 엔진은 이름이 같은 변수중에서 어떤 변수를 참조해야 할 것인지를 결정해야 한다. var x = &#39;global&#39;; function foo(){ var x = &#39;local&#39;; console.log(x)//① } foo(); console.log(x);//② 위의 예제에서 코드 가장 바깥 영역의 변수 x는 어디서든 참조할 수 있지만 foo 함수 내부에서 선언된 변수 x는 foo 함수 내부 에서만 참조할 수 있고 외부에서는 참조할 수 없다. -> ..

[자바스크립트] 함수2

함수 6. 참조에 의한 전달과 외부 상태의 변경 원시 값은 값에 의한 전달, 객체는 참조에 의한 전달 방식으로 동작 매개변수도 함수 몸체 내부에서 변수와 동일하게 취급되므로 매개변수도 타입에 따라(원시,객체) 값에 의한 전달, 참조에 의한 전달 방식을 따른다. //primitive는 원시 값을 전달 받고, obj는 객체를 전달 받음 function changeVal(primitive, obj){ // 원시 타입 인수는 값 자체가 복사되어 매개변수에 전달 -> 원본값 훼손시키지 않음 // 객체 타입 인수는 참조 값 복사되어 매개변수에 전달 -> 원본 변경 가능 primitive+=100; // -> 원시 값은 재할당을 통해 할당된 원시 값은 새로운 원시 값으로 교체 why? 원시 값은 변경 불가능한값 ob..

[자바스크립트] 함수 1

함수 1. 함수란? 함수 - 일련의 과정을 문(statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 매개변수(parameter) - 함수 내부로 입력을 전달받는 변수 인수(argument) - 입력 값 반환값(return value) - 함수의 출력 값 함수 이름 - 특정 함수를 구별하기 위한 식별자 2. 함수를 사용하는 이유 코드의 재사용 - 함수는 몇 번이든 호출할 수 있음. 유지보수의 편의성 - 코드의 중복을 억제하고 재사용성을 높임. 코드의 가독성 - 적절한 함수 이름은 코드를 이해하지 않더라도 함수의 역할을 파악할 수 있도록 함. 3. 함수 리터럴 리터럴 - 값을 생성하기 위한 표기법 자바스크립트의 함수는 객체 타입의 값.(함수 리터럴도 평가되어 값을 생성하며 이 ..

[자바스크립트] 원시 타입와 객체 비교

원시 값과 객체의 비교 원시 타입의 값은 변경 불가능한 값 / 객체 타입의 값은 변경 가능한 값 원시 값을 변수에 할당하면 변수(메모리 공간)에는 실제 값이 저장 / 객체를 변수에 할당하면 변수에는 참조 값이 저장 원시 값 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달 -> 다른 메모리 주소를 사용 / 객체 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 -> 변수가 저장된 메모리 공간은 다르지만 같은 참조 값. 즉 객체 값을 공유함. 원시 값 변경 불가능한 값 원시 타입 값은 재할당하면 메모리 공간에 저장되어 있는 재할당 이전의 원시 값을 변경하는게 아니라! 새로운 메모리 공간을 확보하고 재할당한 원시 값을 저장한 후, 변수는 새롭게 재할당한 원시 값을 가리킨다. -> 메모리..

자바스크립트 객체 리터럴

객체 리터럴 1. 객체란? 자바스크립트는 객체기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 모든 것은 객체이다. 객체 - 관련된 데이터와 함수(프로퍼티, 메소드)의 집합. 여러 속성(프로퍼티)을 하나의 변수에 저장할 수 있도록 해주며 key/value의 구조로 저장됨. 함수도 프로퍼티 값으로 사용됨(일반 함수와 구분하기 위해 메서드method라 부름) -> 메서드는 객체에 묶여 있는 함수를 의미 var counter = { num : 1, increase : function(){ this.num++;//this는 counter 객체를 가리킴 } }; 2. 객체 리터럴에 의한 객체 생성 프로토타입(prototype) - 자바스크립트의 모든 객체는 프로토타입이라는 객체를 가지고 있다. 모든 객체는..

자바스크립트 타입변환, 단축 평가

타입 변환과 단축 평가 1. 타입 변환이란? 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것 명시적 타입 변환explicit coercion(타입 캐스팅type casting) - 개발자의 의도에 따라 다른 타입으로 변환 var num = 3; //숫자를 문자열로 타입 변환 -> 기존의 변수 값의 변화는 주지 않음 var toString = num.toString(); 암묵적 타입변환implicit coercion(타입 강제 변환type coercion) - 표현식 평가 도중 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 var num = 10; //기존의 변수 값 변경X var toString = num + &#39;&#39;; 2. 암묵적 타입 변환 문자열 타입으로 변환 +연..