분류 전체보기 (49) 썸네일형 리스트형 [JS] 모던 자바스크립트 - 09. 전역 변수의 문제점 변수의 생명 주기 지역 변수 - 함수의 생명 주기와 일치 - 함수 내부의 변수 선언은 함수가 호출된 직후에 함수 몸체의 코드가 한 줄씩 순차적으로 실행되기 이전에 자바스크립트 엔진에 의해 먼저 실행 (호이스팅, 스코프 단위로 동작) 전역 변수 - 전역 객체의 생명 주기와 일치 - var 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티 - 브라우저 환경에서의 window 전역 객체는 웹페이지를 닫기 전까지 유효 전역 객체 : 코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체. 브라우저에서는 window, Node.js에서는 global 객체를 의미. 표준 빌트인 객체(Object, String, Number, Function, Array...)와 환경에 따른.. [JS] 모던 자바스크립트 - 08. 스코프(전역 변수와 지역 변수, 스코프 체인, 렉시컬 스코프) 스코프 - 식별자가 유효한 범위 - 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙 - 모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정 - 자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정 - 식별자 이름이 같아도 스코프가 다르다면 별개의 변수 - var로 선언된 변수는 같은 스코프 내에서 중복 선언 허용, 중복 선언 시 변수값 재할당 전역 변수 - 전역(코드의 가장 바깥 영역)에서 선언된 변수 - 어디서든지 참조할 수 있음 ※ 참고 - 전역 변수의 문제점 [JS] 자바스크립트 개념 - 09. 전역 변수의 문제점 변수의 생명 주기 지역 변수 - 함수의 생명 주기와 일치 - 함수 내부.. [JS] 모던 자바스크립트 - 07. 함수 함수 - 일련의 과정을 문(statement)로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 - 함수 내부로 입력을 전달받는 변수는 매개변수(parameter), 입력을 인수(argument), 출력을 반환값(return value)이라 한다 - 함수는 객체타입의 값, 함수가 객체라는 사실은 다른 프로그래밍 언어와 구별되는 자바스크립트의 중요한 특징 - 함수는 일급객체, 값의 성질을 갖는 객체다 - 함수 이름은 함수 몸체 내에서만 참조할 수 있는 식별자 - 변수는 선언한다고 하지만, 함수는 정의한다고 한다 - 일반 객체는 호출할 수 없지만 함수는 호출 가능 함수 정의 함수 선언문 function add(x,y){ return x + y ; } - 함수 이름을 생략할 수 없다 - 표현식이 .. [JS] 모던 자바스크립트 - 06. 객체 리터럴 객체 - 자바스크립트는 프로토타입 기반 객체지향 언어로, 다양한 객체 생성방법을 지원(객체 리터럴, Object 생성자 함수, 생성자 함수, Object.create 메서드, 클래스(ES6)) - 원시 값을 제외한 나머지값은 모두 객체(함수, 배열, 정규 표현식 등) - 원시 값은 변경 불가능한 값(immutable value)이지만 객체는 변경 가능한 값(mutable value) - 함수는 일급객체이므로 값으로 취급할 수 있음 - 객체는 프로퍼티와 메서드로 구성된 집합체 - 인스턴스란 클래스에 의해 생성되어 메모리에 저장된 실체 - 객체 리터럴은 중괄호({...}) 내에 0개 이상의 프로퍼티를 정의 - 변수에 할당되는 시점에 객체 리터럴을 해석해 객체를 생성 - 객체 리터럴의 중괄호는 코드 블록을 의.. [JS] 모던 자바스크립트 - 05. 타입 변환과 단축 평가 타입 변환 - 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성. 기존 원시 값을 직접 변경 X 암묵적 타입 변환 - 개발자의 의도와는 상관 없이 자바스크립트 엔진에 의해 타입이 변환되는 것, 타입 강제 변환(type coercion)이라고도 함 - 자바스크립트 엔진은 표현식을 에러 없이 평가하기 위해 암묵적 타입 변환으로 새로운 타입의 값을 만들어 단 한 번만 사용 후 버림 1. 문자열 타입 변환 - 문자열 연결 연산자 사용 시 피연산자 중 문자열이 아닌 타입이 있을 경우, 문자열 타입으로 암묵적 타입 변한 - ES6에 도입된 템플릿 리터럴의 표현식 삽입은 표현식의 평가 결과를 문자열 타입으로 암묵적 타입 변환 2. 숫자 타입 변환 - 산술 연산자 사용 시 피연산자 중 숫자 타입이 아닌 경우,.. [JS] 모던 자바스크립트 - 04. 제어문 제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용 블록문 - 0개 이상의 문을 중괄호로 묶은 것 - 코드 블록 또는 블록이라고 부름 - 자바스크립트는 블록문을 하나의 실행 단위로 취급 - 문의 끝에는 세미콜론을 붙이는 것이 일반적이지만, 블록문은 자체의 종결성을 갖기 때문에 세미콜론을 붙이지 않는다 조건문 - 평가 결과에 따라 코드 블록의 실행을 결정 if문 - 조건식은 불리언 값으로 평가되어야 함. 아닌 경우엔 불리언 값으로 강제 변환 - 코드 블록 내의 문이 하나라면 중괄호 생략 가능 var num = 2; var kind; if(num>0){ kind = '양수'; } if(num>0) kind = .. [JS] 모던 자바스크립트 - 03. 연산자 ※ 부수효과 : 피연산자의 값을 바꾸는 것. 산술 연산자 - 산술 연산이 불가능한 경우, NaN을 반환 - 산술 연산하여 숫자 값을 만듦 1. 이항 산술 연산자 - 2개의 피연산자를 산술 연산하여 숫자 값을 만든다 - + (덧셈), - (뺄셈), * (곱셈), / (나눗셈), % (나머지) - 부수 효과 X 2. 단항 산술 연산자 - 1개의 피연산자를 산술 연산하여 숫자 값을 만든다 - +,- 단항 연산자는 부수효과 X - 증가/감소(++,- - 연산자)는 부수효과 O - 증가/감소 연산자는 위치에 따라 의미가 달라짐 전위 증가/감소 연산자(prefix increment/decrement operator) : 피.. [JS] 모던 자바스크립트 - 02. 데이터 타입 데이터 타입 자바스크립트(ES6)는 기본형과 참조형으로 나뉘는 7개의 데이터 타입을 제공. - 기본형 데이터 (원시 타입) - 할당이나 연산 시 복제됨. - 메모리 저장 시 변수 영역과 데이터 영역을 활용하여 저장. - 불변성을 띈다 → 재할당 시 저장된 값을 변경 하는 것이 아니라 새로운 데이터를 만든 뒤 그 데이터의 주솟값을 저장함. 1. 숫자 타입 (Number) - 모든 수를 실수로 처리, 정수만 표현하기 위한 데이터타입이 별도로 존재하지 않음. - 2진수, 8진수, 16진수를 포현하는 데이터 타입이 없으므로, 이 값들을 참조할 경우 모두 10진수로 해석. - 숫자 타입은 세 가지 특별한 값도 표현 가능하다. - Infinity : 양의 무한대 - -Infinity : 음의 무한대 - NaN : .. [JS] 모던 자바스크립트 - 01. 변수, 네이밍 컨벤션, 표현식과 문 변수 : 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름 : 값의 위치를 가리키는 상징적인 이름 - 변수명 : 메모리 공간에 저장된 값을 식별할 수 있는 고유한 이름 - 변수 값 : 변수에 저장된 값 - 할당(assignment) : 변수에 값을 저장하는 것 - 참조(reference) : 변수에 저장된 값을 읽어 들이는 것 - 식별자(identifier) : 메모리 상에 존재하는 어떤 값을 구별해서 식별할 수 있는 고유한 이름, 값이 아닌 메모리 주소를 기억 - 선언(declaration) : 변수를 생성하는 것. 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것 - 상수(c.. [css] iOS 모바일에서 scroll-behavior smooth 속성이 적용되지 않을 때, 부드러운 스크롤 효과 적용하기 CSS에서 scroll-behavior에 smooth 속성을 직접 지정하거나, 자바스크립트에서 scrollTo 메서드 사용 시 behavior 속성을 추가 해주면 스크롤 이동 시 부드럽게 이동하는 효과를 줄 수 있다. 1. CSS scroll-behavior:smooth; 2. JS에서 코드로 적용 window.scrollTo({ top: 0, left: 0, behavior: "smooth" }); 하지만, 브라우저에서는 분명히 잘 작동이 되는데, 모바일에서는 scroll-behavior:smooth 속성이 적용되지 않는 문제가 생겼다. 모바일 스크롤 smooth를 검색해보았더니, iOS나 OSX에서의 safari에서는 Smooth Scrolling이 적용되지 않아,이를 해결하기 위해서는 자바스크립트 .. 이전 1 2 3 4 5 다음
