Javascript

unzinzanda·2023년 3월 18일

JavaScript 프론트엔드

Front-end

목록 보기

1/4

JavaScript?

웹 브라우저에서 동작하는 유일한 프로그래밍 언어.
개발자가 별도로 컴파일 작업을 수행하지 않는 인터프리터 언어.
각 브라우저별 JavaScript 엔진은 인터프리터와 컴파일러의 장점을 결합하여 비교적 처리 속도가 느린 인터프리터의 단점 해결.
명령형, 함수형, 프로토타입 기반 객체지향 프로그래밍을 지원하는 멀티 패러다임 프로그래밍 언어.

JavaScript 선언

<script> 태그 사용
src 속성을 사용하여 외부의 JavaScript 파일을 HTML문서에 포함.
<script>는 HTML 파일 내부의 <head>나 <body> 안 어느 곳에서나 선언 가능하지만 <body> 안의 끝부분에 둘 것을 권장.
<head> 안에 위치한 JavaScript는 브라우저의 각종 입/출력 발생 이전에 초기화되므로 브라우저가 먼저 점검함.
<body> 안에 위치하면 브라우저가 HTML부터 해석하여 화면에 그리기 때문에 사용자가 빠르다고 느낌.

JavaScript 기본 문법

주석(Comment)

JavaScript 코드에 대한 부연 설명이므로 실행 코드에 포함되지 않음.
종류
1. 한 줄 주석 : //code로 표기
2. 블록 주석 : /* code */로 표기

변수(Variable)

변수를 선언할 때 타입을 명시하지 않고 var keyword를 사용하여 선언.
JavaScript는 동적타입 언어로 변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정.
→ 같은 변수에 여러 타입의 값을 할당 가능.
변수 이름은 함수 이름과 혼동되지 않도록 유일한 이름 사용.(변수는 형용사, 명사, 함수는 동사)
변수 이름은 키워드나 공백 문자를 포함하거나 숫자로 시작할 수 없음.
특수 문자는 _와 $만 허용.

자료형(Data type)

primitive type
: 숫자, 문자열, boolean, null, undefined
object type
: primitive type을 제외한 모든 값

자료형 - 숫자

JavaScript는 숫자를 정수와 실수로 나누어 구분하지 않음.
→ 모든 숫자를 8byte의 실수 형태로 처리.(정수만을 표현하기 위한 데이터 타입은 없음)
편의성을 위해 정수 리터럴과 실수 리터럴을 제공.
숫자의 연산 처리 시, 실수 형태로 하기 때문에 특정 소수점을 정확하게 표현하지 못함.
기본 연산 기호는 Java와 같음.
JavaScript는 언더플로우, 오버플로우, 0으로 나누는 연산에 대한 예외를 발생 시키지 않음.
숫자와 관련된 특별한 상수 존재
1. Infinity : 무한대를 나타내는 상수, 어떠한 수를 0으로 나누거나 Infinity를 어떠한 수로 사칙연산한 결과.
2. NaN(Not a Number) : 계산식의 결과가 숫자가 아님을 나타내는 상수

자료형 - 문자열

JavaScript에서 문자열은 16비트의 Unicode 문자 사용.
문자 하나를 표현하는 타입은 제공하지 않고 한 글자도 문자열로 표현.
작은 따옴표(', single quotes)와 큰 따옴표(", double quotes) 둘 다 사용 가능하지만 혼용 불가.
이스케이프 시퀀스()도 사용 가능.
백틱(`)을 이용한 문자열 표현 가능.

자료형 - boolean, null과 undefined

boolean : 연산의 결과값으로 true 또는 false 중 하나의 값을 가짐.
비어 있는 문자열, null, undefined, 숫자 0은 false로 간주.
null : 값이 없거나 비어 있음.
undefined : 값이 초기화 되지 않았음(정의되지 않음)

자료형 - 자동 형 변환(Dynamic Typing)

어떤 자료형이든 전달할 수 있고 그 값을 필요에 따라 변환 가능.
서로 다른 자료형 간의 연산 가능.
→ 모든 자료형을 var로 선언하기 때문에 변수 선언은 쉽지만 혼란을 야기.

변수 호이스팅(Variable Hoisting)

var 키워드를 사용한 변수는 중복해서 선언이 가능하기 때문에 var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 처음으로 옮겨진 것처럼 동작하는 특성.
즉, JavaScript는 모든 선언문이 선언되기 이전에 참조가 가능.
함수의 선언만 끌어올려지며 할당은 끌어올려지지 않음.

  func1();
  func2();

  function func1() { // 함수선언문
          console.log("hello");
  }
  var func2 = function() { // 함수표현식
          console.log("hello2");
  }

위의 예시처럼 실행하면 함수 선언문은 호이스팅되어 func1()은 호출되지만 함수표현식은 호이스팅되지 않기 때문에 func2() 호출에서 에러가 발생함.

상수(constant)

값이 변경되면 안되는 변수는 const keyword를 통해 선언.
상수의 표기법은 모든 문자는 대문자를 사용하고 단어 사이는 '_'으로 표기

변수 선언 키워드

let은 선언된 변수는 var로 선언된 변수와 달리 재선언이 불가능함.
const는 상수를 위한 키워드로 역시 재선언이 불가능함.

연산자(operator)

산술 연산자, 논리 연산자, 비교 연산자, 기타 연산자 등을 제공.
표현식에서 2개 이상의 연산자를 동시에 사용했을 경우 우선순위별로 해석.
괄호를 사용한 우선순위 조절 가능.
연산자는 연산의 대상이 되는 값(타입)에 따라서 동작 결정.
종류

연산자	설명
++	선행 ++은 현재 값을 반환하고 값을 증가. 후행 ++은 값을 증가하고 결과값을 반환.
--	선행 --은 현재 값을 반환하고 값을 감소. 후행 --은 값을 감소하고 결과값을 반환.
-	부호를 전환해서 결과값 반환.
+	숫자로 값을 반환
~	비트단위 연산에서 사용하며 NOT 연산 수행.
~	논리연산에서 사용하며 boolean 결과를 반환.
delete	프로퍼티를 제거.
typeof	피연산자 타입을 리턴.
void	Undefined 값을 알려줌.
*, /, %	곱하기, 나누기, 나머지 연산결과 반환.
+, -	값이 숫자일 때는 더하기, 빼기의 연산결과 반환.
+	값이 문자열이면 문자열을 서로 결합.
<<	비트연산자로 값을 왼쪽으로 이동.
>>	비트연산자로 값을 오른쪽으로 이동.
>>>	부호비트 확장 없이 값을 오른쪽으로 이동.
<, <=, >, >=	숫자의 대소비교.
instanceof	객체가 특정 객체의 타입인지를 확인.
in	프로퍼티가 존재하는지 확인.
==	동등 관계인지 확인.
!=	동등하지 않은지 확인.
===	값이 일치하는지 확인.(자료형까지 비교)
!==	값이 일치하지 않는지 확인.(자료형까지 비교)
&	비트 단위 연산자로 AND 연산.
^	비트 단위 연산자로 XOR 연산.
\|	비트 단위 연산자로 OR 연산.
&&	AND 연산.
\|\|	OR 연산.
조건 ? true일 때 : false일 때	조건에 해당하는 구문을 수행.
=	변수 또는 프로퍼티에 값을 할당.
,	1번째 구문은 버리고 다음 구문 값을 반환.

조건문(conditional) - if

표현식의 값에 따라 특정 구문들을 실행하거나 실행하지 않도록 제어.

조건문(conditional) - switch

동일한 표현식이 반복될 때 효과적인 구문
값이 case와 동일할 경우 해당 구문 내용이 실행. → break문을 만날 때까지 case문 실행.(원하는 지점에서 break를 적어주는 걸 까먹지 말자)
동일한 case가 없을 경우 default문 실행.

반복문(loop) - while

조건식의 값이 참일 때 선언된 구문을 수행.
조건식의 값이 거짓일 때 while문 종료.
while문은 무한 루프에 빠지는 상황에 쉽게 노출되어 있으므로 조건식의 값이 거짓이 될 수 있는 상황을 잘 만들어야 함.

반복문(loop) - do/while

조건식의 값을 확인하는 시점이 구문의 마지막이므로 최소 한 번 이상 반복 구문을 수행.
최초 1회 실행 구문 수행 후 while문과 동일하게 동작.

반복문(loop) - for

카운터 변수를 사용하는 for 구문
: 카운터 변수가 조건식에 명시된 조건에 거짓이 되는 순간 반복 종료.
in 키워드를 사용하는 for 구문
: 배열 또는 객체가 가진 프로퍼티를 순회하면서 key(index)값을 조회.

JavaScript 객체

객체(Object)

key와 value로 구성된 property들의 집합.
전역 객체를 제외한 JavaScript 객체는 프로퍼티를 동적으로 추가하거나 삭제 가능.
JavaScript의 함수는 일급 객체이므로 값으로 사용.
→ 따라서 프로퍼티의 값으로 함수 사용 가능.
JavaScript의 객체는 prototype이라는 특별한 프로퍼티 포함.

객체(Object) - 생성

객체 리터럴

- 가장 일반적인 방법
- { } 내에 하나 이상의 프로퍼티를 추가하여 객체를 생성.
Object 생성자 함수

- new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성.
- 빈 객체 생성 후 프로퍼티 또는 메소드를 추가하여 객체 완성.
생성자 함수

- 생성자 함수를 만들어 템플릿(클래스)처럼 프로퍼티가 동일한 객체를 생성.
- 동일한 프로퍼티를 갖는 객체를 여러 개 생성하려면 동일한 코드를 반복해야 하는 위 두 방법과 달리 쉽게 동일한 프로퍼티의 여러 객체 생성 가능.

객체(Object) - 속성 값 조회

dot(.)을 사용하거나 대괄호([ ])를 사용하여 속성 값에 접근.
대괄호 내에 들어가는 속성 이름은 반드시 문자열이어야 함.
dot은 속성 이름에 연산자가 들어가는 경우 제대로 동작하지 않음.
→ 대괄호 사용.
객체에 없는 속성에 접근하면 undefined 반환.
객체 속성 값을 조회할 때, || 연산자 사용도 가능.

객체(Object) - 속성 값 변경, 추가, 제거

변경
: dot(.)이나 대괄호 사용
추가
: 객체에 값을 할당하려는 속성이 없는 경우, 그 속성을 추가
제거
: delete 연산자 사용

객체(Object) - 참조

객체는 복사되지 않고 참조.
따라서 위의 예시에서 x.city의 값을 바꾸면 member의 city가 바뀌는 것

함수(function)

JavaScript에서 함수는 일급(first-clas) 객체.

함수(function) - 선언, 호출

함수를 변수, 객체, 배열 등에 저장할 수 있고 다른 함수에 전달하는 전달인자(콜백함수) 또는 리턴 값으로 사용 가능.
함수는 프로그램 실행 중 동적으로도 생성 가능.

함수 정의 방법
1. 함수 선언문

function 함수이름(매개변수1, 매개변수2, ..., 매개변수n) {
	// 함수 내용
}

2. 함수 표현식

var 함수이름 = function (매개변수1, 매개변수2, ..., 매개변수n) {
	// 함수 내용
}

3. Function 생성자 함수

var 함수이름 = new Function("매개변수1", "매개변수2", ..., "매개변수n", "함수내용");

함수(function) - 함수 호이스팅

함수 선언문의 경우 호이스팅되어 함수 선언의 위치와 상관없이 코드 내 어느 곳에서든지 호출 가능.
함수 선언문으로 정의된 함수는 JavaScript 엔진이 스크립트가 로딩되는 시점에 이를 변수 객체에 저장하고 함수 선언, 초기화, 할당이 한 번에 이루어짐.
함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생.

함수(function) - 매개변수

함수의 정의 부분에 외부로부터 전달받을 변수.
함수를 호출 할 때 전달하는 값을 전달인자(argument)라고 함.
JavaScript에선 함수 정의 시 매개변수에 대한 타입을 명시하지 않음.
함수 호출할 때 정의된 매개변수와 전달인자의 개수가 일치하지 않더라도 호출 가능.

함수(function) - 콜백 함수

함수를 명시적으로 호출하는 방식이 아니라 특정 이벤트가 발생했을 때 시스템에 의해 호출되는 함수.
매개변수를 통해 전달되고 전달받은 함수의 내부에서 어느 특정시점에 실행.
콜백 함수는 주로 비동기식 처리 모델에서 사용.
→ 처리가 종료되면 호출될 함수(콜백 함수)를 미리 매개변수에 전달하고 처리가 종료되면 콜백 함수를 호출.

Web Browser와 Window 객체

Window 객체( = BOM )

웹 브라우저에서 작동하는 JavaScript의 최상위 전역 객체.
Window 객체에는 브라우저와 관련된 여러 객체와 속성, 함수가 있음.
JavaScript에서 기본으로 제공하는 프로퍼티와 함수도 포함.

Window 객체 - alert, confirm, prompt

window 객체의 함수를 호출하면 브라우저에서 제공하는 창을 엶.
alert() : 브라우저의 알림창.
confirm() : 브라우저의 확인 / 취소 선택창.
prompt() : 브라우저의 입력창.

Window 객체 - navigator

브라우저 정보가 내장된 객체.
이 정보로 서로 다른 브라우저를 구분할 수 있으며 브라우저 별로 다르게 처리 가능.
위치 정보를 알려주는 역할 가능.

Window 객체 - location, history

location 객체를 이용하여 현재 페이지 주소(URL)와 관련된 정보를 알 수 있음.
- location.href : 프로퍼티에 값을 할당하지 않으면 현재 URL을 조회하고 값을 할당하면 할당된 URL로 페이지 이동.
- location.reload() : 현재 페이지를 새로고침.
history 객체는 브라우저의 페이지 이력을 담는 객체.
- history.back() / history.forward() : 브라우저의 뒤로 가기 / 앞으로 가기 버튼과 같은 동작.

새 창 열기 - open()

window.open('페이지 URL', '창 이름', '특성', 히스토리 대체여부)
- 창 이름(string) : open할 대상(_blank, _self 등) 지정 혹은 창의 이름

- 특성(string) : 새로 열릴 창의 너비, 높이 등의 특성 지정
- 히스토리 대체 여부(boolean) : 현재 페이지 히스토리에 덮어쓸지 여부

창 열고 닫기

이벤트를 이용하여 특정 시점에 창을 열 수 있음.
close() 함수로 현재 창 닫기도 가능.

부모 창 컨트롤

opener 속성을 이요하여 부모 창에 값을 전달하거나 새로고침하거나 페이지 이동하는 등 부모 창을 컨트롤 가능.
opener 객체는 부모 창의 window 객체.

window 객체 프로퍼티

screen 객체로 화면의 가로, 세로 크기 정보를 알 수 있음.
pageYOffset 등과 scroll() 함수를 이용하면 현재 화면의 크기를 계산하여 페이지 단위로 스크롤 제어 가능.

window 객체의 함수

함수명	설명
alert()	경고용 대화상자를 보여줌.
confirm()	확인, 취소를 선택할 수 있는 대화상자를 보여줌.
prompt()	입력창이 있는 대화 상자를 보여줌.
open()	새로운 창을 오픈.
scroll()	창을 스크롤 함.
find()	창 안에 지정된 문자열이 있는지 확인. 있으면 true, 없으면 false. IE 지원 안함.
stop()	불러오기를 중지. IE 지원 안함.
print()	화면에 있는 내용을 프린터로 출력.
moveBy()	창을 상대적 좌표로 이동. 수평방향과 수직방향의 이동략을 픽셀로 지정.
moveTo()	창을 절대적 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정.
resizeBy()	창의 크기를 상대적인 좌표로 재설정.
resizeTo()	창의 크기를 절대적인 좌표로 재설정. 창의 크기를 픽셀로 지정.
scrollBy()	창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정.
scrollTo()	창을 절대적인 좌표를 스크롤 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정.
setTimeout()	지정한 밀리초 시간이 흐른 후에 함수 호출.
clearTimeout()	setTimeout 함수를 정지.
setInterval()	지정한 밀리초 주기마다 함수를 반복적으로 호출.
clearInterval()	setInterval 함수를 정지.
eval()	문자열을 JavaScript 코드로 변환하여 실행.

브라우저에서 버튼을 제공하는 기능인 find, stop, print와 같은 함수도 존재.
move 함수로 현재 열려 있는 창의 위치를 이동 가능.
resize 함수로 현재 열려 있는 창의 크기를 조절.
window 객체에는 브라우저와 관련된 함수 뿐만 아니라 setTimeout(), setInterval(), eval() 등 순수 JavaScript에서 필요한 객체나 함수도 존재.

unzinzanda

안녕하세요 :)

다음 포스트

Javascript

Front-end

JavaScript?

JavaScript 선언

JavaScript 기본 문법

주석(Comment)

변수(Variable)

자료형(Data type)

자료형 - 숫자

자료형 - 문자열

자료형 - boolean, null과 undefined

자료형 - 자동 형 변환(Dynamic Typing)

변수 호이스팅(Variable Hoisting)

상수(constant)

변수 선언 키워드

연산자(operator)

조건문(conditional) - if

조건문(conditional) - switch

반복문(loop) - while

반복문(loop) - do/while

반복문(loop) - for

JavaScript 객체

객체(Object)

객체(Object) - 생성

객체(Object) - 속성 값 조회

객체(Object) - 속성 값 변경, 추가, 제거

객체(Object) - 참조

함수(function)

함수(function) - 선언, 호출

함수(function) - 함수 호이스팅

함수(function) - 매개변수

함수(function) - 콜백 함수

Web Browser와 Window 객체

Window 객체( = BOM )

Window 객체 - alert, confirm, prompt

Window 객체 - navigator

Window 객체 - location, history

새 창 열기 - open()

창 열고 닫기

부모 창 컨트롤

window 객체 프로퍼티

window 객체의 함수

JSON

0개의 댓글

관련 채용 정보