[JavaScript] 1) 코어 자바스크립트

Yoojin Jeong·2021년 3월 4일

자바스크립트

자바스크립트 특징

객체 지향 언어이다. 상속과 클래스 개념이 없다. ( 프로토타입을 사용해서 구현 가능)
인터프리터 언어로서 클라이언트의 웹 브라우저에 의해 해석되고 실행된다.
-> 작고 빠르고 가벼운 언어.
HTML 소스 코드 내에 기술되고 함께 수행된다.
-> 소스가 클라이언트에게 노출. 보안성이 낮다.
문법이 자바나 C보다 쉽다. 모든 변수의 형식을 검사하지 않기 때문.하지만 에러 발생 시 찾기가 힘들다.
화면 출력이 목적이다.

자바스크립트 형식

함수인 경우 관용적으로 head 태그 안에 있는 편.
스크립트가 너무 길면 확장자를 js로 설정하여 독립된 파일을 만든다.

<script>
// 자바스크립트 코드
</script>

기본 문법

개념	설명
표현식	값을 만들어내는 간단한 코드
문장	하나 이상의 표현식이 모여 구성되는 코드를 읽어 들이는 단위가 되는 것
키워드	예약어,프로그래밍 언어가 처음 만들어질 때 정해진 특별한 의미가 있는 단어
식별자	이름을 붙일 때 사용하는 단어
주석	프로그램 코드를 설명하며, 프로그램의 진행에 전혀 영향을 주지 않는 문장
문자열	문자를 표현할 때 사용하는 자료형
숫자	숫자를 표현할 때 사용하는 자료형
불리언	참과 거짓을 표현할 때 사용하는 자료형
변수	값을 저장할 때 사용하는 식별자

자바스크립트 타입

자료형 종류	설명
숫자형	정수, 실수 데이터
문자형	문자 데이터,큰따옴표("")나 작은따옴표('')로 감싼다.
boolean형	true/false 데이터
함수형	function(){실행구문;} 형태의 데이터 1. 함수 전체를 데이터의 한 종류로 취급 ( 변수에 저장 가능) 2. 이름이 없을 수 있음(익명함수)
객체형	프로퍼티와 메소드로 구성된 단위 프로그램을 객체화했을 때 메모리 공간의 위치 주소값 ex) var a = new Student();
undefined	알 수 없는 데이터. 프로그램에서 사용할 수 없는 데이터를 말한다. (null이 아님)

자바스크립트 변수

var 변수명 = 데이터;

전역변수: 모든 자바스크립트에서 공유 가능한 변수
지역변수 : 함수 안에서 var로 선언되어 블록(함수) 안에서만 사용되는 변수.
매개변수 : 함수 호출 시 전달되는 데이터를 저장하는 변수. 함수 안에서만 사용 가능. var 선언 안함.

자바스크립트 변수 선언

호이스팅
함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것

var의 스코프: 전역 범위나 함수/지역 범위
var 변수가 함수 밖에서 선언될 경우엔 전역 범위(모든 window에서 접근 가능)
var 변수가 함수 안에서 선언될 경우엔 함수 범위로서 해당 함수 안에서만 접근 가능

var a= "hello"
function newA(){
	var b ="hi";
}
console.log(b); //Uncaught ReferenceError: b is not defined

var의 문제점: var 변수의 취약성

var a = "hello"
var condition = 2;
if(condition > 1){
	var a = "bye";
}
console.log(a); //"bye"

condition 조건이 참이므로 a는 bye로 재선언된다. a변수가 이미 정의되었다는 것을 몰랐다면 문제가 될 수 있다.a변수를 다른 부분에서 사용한다면 원치 않은 결과를 볼 수 있으며 버그 유발가능.

전역변수의 문제점
-암묵적 결합 (유효 범위 커짐, 가독성 저하)
-긴 생명주기

블록 범위({})를 갖는다.
값의 재할당은 가능하나 재선언은 불가능(범위가 다른 경우에는 가능)
호이스팅 x, let 선언 전에 해당 변수에 접근하면 Reference Error 발생

let condition = 2;
if(condition > 1){
	let a = "bye";
    console.log(a); //"bye"
}
console.log(a);//Uncaught ReferenceError : a is not defined

let을 사용하면 중복된 이름의 변수를 사용하더라도 범위가 다른 경우에는 명확하게 구분하여 사용할 수 있다.

const

const로 선언된 변수는 상수이다. let과 유사하게 동작함.
블록 범위({})를 갖는다
재선언 및 값 재할당이 불가능하다.(readonly)
호이스팅 x

문장

자바스크립트의 조건문

1.if

조건 성립시 해당 코드 실행
형식: if(조건) { 코드 };
조건문 내 조건문 중첩 가능

2.else if

초기조건 미성립시 다음 조건 설정
형식: if(조건1) { 코드1 } else if(조건2) { 코드2 };
-> 조건1 성립시 코드1 실행, 조건2 성립시 코드2 실행

3.switch

비교값에 따라 실행하는 코드를 나열
형식

switch (변수명){
    case 값A :
        값이 A일 때 실행할 명령문;
        break;
    case 값B :
        값이 B일 때 실행할 명령문;
        break;
    case 값C :
        값이 C일 때 실행할 명령문;
        break;
    default :
        위의 값 A ~ C 모두 아닐때 실행할 명령문;
}

자바스크립트의 반복문

1.while

조건이 만족하는 동안 코드 계속 실행
형태: while(조건식) { 코드 }
-> 조건식이 true일 때 계속해서 코드를 실행함

2.do / while

조건에 상관없이 코드를 한 번 실행 후 while문 실행
형태: do { 코드 } while(조건식)
-> 코드를 1회 실행 후 조건식이 true일 때 계속해서 코드를 실행함

3.for

형태
for(초기식; 조건식; 종결식) {코드}
-> 초기식 실행 -> 조건식 비교 -> 코드 실행 -> 종결식 실행 -> 조건식 비교
조건식 false일 때 까지 계속해서 반복함

for(var i = 0; i < 10; i++){
	console.log(i);
} //  i가 0부터 1씩 증가하며 콘솔창에 i(수)를 출력

4.for / in

배열의 크기만큼 반복
형태: for(변수 in 배열){}
-> 배열의 크기만큼 반복, 변수에는 배열의 index값 저장

for(var i = 0; i < array.length; i++){}

for(i in array){} 

// 동일한 반복문

기타

1.with

특정 객체를 여러번 사용할 경우, 그 특정 객체를 생략할 수 있게 함.
형태: with(반복할 구문){생략된 구문}
->with 구문에 반복할 구문을 명시해줌으로써 이를 생략해도 자동적으로 함께 쓴 것처럼 인식이 된다.
특정 조건에서 작성해야할 코드의 양을 줄이기 위해 사용함.

with(document){ 
	write("반복 사용할 객체가<br>");
   	write("필요없음<br>");
}

함수

자바스크립트의 함수

함수 리터럴로 하나의 함수를 만들고, 여기서 생성된 함수를 변수에 할당하여 함수를 생성하는 것을 함수 표현식이라 한다.

1.(정적)함수

함수명을 붙여 선언하는 함수.
웹 브라우저는 정적함수를 먼저 골라 읽은 후 나머지 코드를 실행하기 때문에 관용적으로 위에 써준다.
동일한 이름의 함수가 2개면, 마지막 정적함수가 진짜 정적함수다.

var f = function sum(x,y){ //이름 있는 함수 형태 =>기명 함수 
	return x+y;
}
console.log(f(3,4)); //7
console.log(sum(3,4))//Uncaught ReferenceError : sum is not defined

함수 표현식에서 사용된 함수 이름이 외부 코드에서 접근 불가능하기 때문에 오류 발생.

2.익명함수

함수명 없이 선언하는 함수로 주로 변수에 저장한다.(=데이터의 한 종류)

var f = function(x,y){ //이름 없는 함수 형태 => 익명 함수
	return x+y;
}
console.log(f(3,4)); //7

3.내장함수

자바스크립트에서 이미 만들어져 제공하는 함수

4.내부함수

함수 내부에 선언된 또 다른 함수
내부함수와 외부함수의 이름이 같을 경우, 부모함수 안에서 내부함수를 호출할 때 내부함수가 우선적으로 호출된다.
프로그램 내 함수간의 충돌을 막을 수 있음

5.콜백함수

매개변수로 전달되는 함수
직접 호출하지 않고 나중에 필요시에 호출해서 사용하라고 전달해주는 함수

function add(a,b,callback){
   callback(a+b);
};

function printResult(value){
   console.log(value);
};

add(3,4,printResult);

6.가변인자 함수

매개변수의 개수가 변할 수 있는 함수
매개변수를 지정하지 않아도 사용 가능
Arguments객체를 통해 활용

Argument 객체
-함수가 호출될 때 넘긴 인자들이 배열 형태로 저장되는 객체를 의미한다.
-매개변수 개수가 정해지지 않은 함수를 구현하거나, 전달된 인자의 개수에 따라 서로 다른 처리를 해줘야하는 함수를 구현할 수 있다.
-ECMASCript 5의 엄격한 모드에서는 매개변수나 지역변수 이름으로 사용할 수 없다.

function sumAll(){
  var result = 0;
  for(i in arguments){
  	result+= arguments[i];
  }
  return result;
}

sumAll(10,10,10) // return 30

재귀함수

자기 자신을 호출하는 함수
함수는 자신을 참조 및 호출이 가능하다.

클로저

함수가 정의되는 순간의 환경을 기억하는 함수, 즉 함수 외부에 선언된 변수를 참조하는 함수
클로저는 변수 자신들이 바인드 되는 환경에 한정되지 않는 변수를 가지는 표현식
-> 자신이 생성된 함수의 context에 직접 접근(참조)할 수 있는 함수
클로저는 함수,상황,유효범위(scope)라고도 한다.
자바스크립트 언어의 단점 중 하나인 '전역변수'로 인한 문제를 해결 할 수 있음

전역변수를 사용하지 않고, 지역변수를 함수 외부에서 사용

function func(){
	var x = 1;
	return {
		func1 : function(){ console.log(++x); },
		func2 : function(){ console.log(-x); }
};
}

var exam = func();
exam.func1();
exam.func2();

결과

2
-2

객체

자바스크립트의 객체

JavaScript는 객체기반의 스크립트 언어이며 JavaScript를 이루고 있는 거의 모든 것은 객체이다.
객체란 여러 속성을 하나의 변수에 저장할 수 있도록 해주는 데이터 타입으로 Key / Value를 쌍으로 저장할 수 있는 구조이다.

var obj1 = new Object(); 	// new 연산자를 이용한 객체 생성
var obj2 = {};  		// 객체 리터럴로 객체를 생성

var user = {
  name: "yoojin",
  gender: "female"
};

자바스크립트 객체 구성

자바스크립트 내장 객체

자바스크립트 엔진이 구동되는 시점에서 바로 제공되며 자바스크립트 코드 어디에서든 사용이 가능하다.

Global
Object
String
Number
Boolean
Date
Array
Math

브라우저 내장 객체

브라우저 내장 객체 또한 자바스크립트 구동되는 시점에서 바로 사용이 가능한 객체들이며 내장 객체이다. 하지만 브라우저마다 브라우저 내장 객체를 사용함에 있어 구성을 달리하는 경우가 있기 때문에 자바스크립트 내장 객체와 분류함. 자바스크립트 내장객체가 구성된 후에 구성이 된다.

브라우저 객체 모델 (BOM)
문서 객체 모델 (DOM)

사용자 정의 객체

말 그대로 사용자가 생성한 객체들로 생성자 함수 또는 객체 리터럴을 통해 사용자가 객체를 정의하고 확장시킨 객체들이기 때문에 내장 객체들이 구성된 이후에 구성되어 진다.

객체 속성

1.prototype

prototype 속성은 프로퍼티를 상속하는 객체를 지정한다.
prototype 속성은 객체가 만들어지는 시점에 설정된다.
ECMAScript5에서는 Object.getPrototypeOf()에 객체를 전달해 객체의 프로토타입을 검사할 수 있다.
__proto__ : 자신의 부모 역할을 하는 프로토타입 객체를 가리키는 __proto__ 프로퍼티를 기본으로 가진다.

function Foo(){

}

Prototype Object는 기본속성으로 constructor와 proto를 가지고 있다. (따라서 정확히 말하자면 Foo.prototype 객체가 프로토타입을 의미하는것은 아니다. constructor도 가지고 있으니! )

constructor는 내가 선언한 생성자 함수(Foo)를 가리킨다. new 키워드와 함께 함수를 호출할 경우 constructor함수를 실행하고 부수효과로 객체가 생성된다.
생성자 함수가 아니라 함수를 생성하는 호출이라고 생각하는것이 맞다
prototype은 생성자 함수에 정의한 모든 객체가 공유할 원형이다.
proto는 [[Prototype]]링크이다. 생성자 함수에 정의해두었던 prototype을 참조한다.

Prototype 사용 이유
메모리 낭비를 막기 위함.
->prototype은 모든 객체가 공유하고 있어서 한 번만 만들어지지만, this에 넣은 것은 객체 하나를 만들 때마다 메소드도 하나씩 만들어지기 때문에 불필요한 메모리 낭비가 발생한다.

2.class

객체의 타입에 대한 정보를 담고 있는 문자열이다.
어떠한 방법으로도 이 속성을 변경할 수 없기 때문에 객체의 클래스 정보를 알아보기 위해서는 객체의 toString() 메서드를 호출하면 된다.

3.extensible

객체에 새 프로퍼티를 추가할 수 있는지 여부를 결정한다.
ECMAScript5에는 객체의 확장 여부를 검사하고 설정하는 함수들이 정의되어 있다. 확장할 수 있는 객체인지 알아보려면 Object.isExtensible() 함수에 해당 객체를 인수로 넘긴다.

연산자

자바스크립트 연산자

동등(==) , 일치(===) 연산자

자바스크립트에서 동등 연산자(==)를 사용하면 연산이 되기 전에 피연산자들을 먼저 비교할 수 있는 형태로 변환시킨다.

25 == '25' // return true
true == 1 // return true
undefined == null // return true

일치 연산자(===)는 타입 변환이 안되는 것을 제외하고 동등 연산자(==)와 동일하게 동작한다.

25 === '25' // return false
true === 1 // return false
undefined === null // return false

문자 결합 연산자

"+" 연산자

"a" + "b" = "ab" // 문자끼리 더하면 문자.
"a" + 1 = "a1" // 문자+숫자는 문자화된다.

3.삼항 조건 연산자

조건 ? 값1 : 값2

condition > 3 ? "a" : "b";

if문과 삼항 연산자의 차이

1. 할당
- 삼항 연산자는 조건에 대한 결과값을 바로 변수에 할당할 수 있다.
- if문의 경우에는 변수에 바로 할당할 수 없고 조건식 안에서 할당 처리를 해줘야 한다.
2.유효 범위(scope)
- if문은 중괄호로 감싸진 블록문으로 이루어져 있고, 삼항 연산자는 블록문을 만들 수 없다. 그렇기 때문에 자연스럽게 전역변수는 참조할 수 있지만, 지역변수를 생성할 수는 없다.
- if문이 삼항 연산자보다 조금 더 다양한 제어를 할 수 있다.

** 1.할당 **

//삼항 연산자 사용
greeting = "hello" + (username ? username : "there")

//if문 사용
greeting = "hello";
if(username)
	greeting += username;
else
	greeting += "there";
    
** 2.유효 범위 **

let firstName = yoojin";
let needFullName = true;

//삼항 연산자 사용
needFullName? (
	let lastName = 'jeong'; //Uncaught SyntaxError; Unexpected identifier
    console.log(lastName + fristName);
): (
    console.log(firstName)
)

//if문 사용
if(needFullName){
   let lastName = "jeong";
   console.log(lastName + firstName); // jeongyoojin
}else{
   console.log(firstName);
}

정규 표현식

특수기호 (메타문자)

정규표현식은 문자열에서 특정 내용을 찾거나 대체 또는 발췌하는데 사용한다.
정규표현식은 리터럴 표기법으로 생성할 수 있다.
정규표현식은 주석이나 공백을 허용하지 않고 여러가지 기호를 혼합하여 사용하기 때문에 가독성이 좋지 않다.

플래그

플래그	의미	설명
i	ignore case	대소문자를 구별하지 않고 검색한다.
g	Global	문자열 내의 모든 패턴을 검색한다.
m	Multi Line	문자열의 행이 바뀌더라도 검색을 계속한다.

패턴

패턴에는 검색하고 싶은 문자열을 지정한다. 이 때 문자열의 따옴표는 생략한다. 따옴표를 포함하면 따옴표까지도 검색한다.

const targetStr = 'AA BB Aa Bb';

// 임의의 문자 3개
const regexr = /.../;

.은 임의의 문자 한 개를 의미한다. 문장의 내용은 무엇이든지 상관없다. 위 예제의 경우 .를 3개 연속하여 패턴을 생성하였으므로 3자리 문자를 추출한다.

자주 사용하는 정규표현식

특정 단어로 시작하는지 검사한다.

const url = 'http://example.com';

// 'http'로 시작하는지 검사
// ^ : 문자열의 처음을 의미한다.
const regexr = /^http/;

console.log(regexr.test(url)); // true

숫자인지 검사한다.

const targetStr = '12345';

// 모두 숫자인지 검사
// [^]: 부정(not)을 의미한다. 얘를 들어 [^a-z]는 알파벳 소문자로 시작하지 않는 모든 문자를 의미한다.
// [] 바깥의 ^는 문자열의 처음을 의미한다.
const regexr = /^\d+$/;

console.log(regexr.test(targetStr)); // true

Yoojin Jeong

이전 포스트

[자바스크립트 완벽 가이드] 1) 코어 자바스크립트

다음 포스트