웹 사이트 개발_JavaScript 기초 문법 정리

1. JavaScript

1.1 JavaScript

HTML과 CSS로 구성된 웹 페이지를 동적으로 만들어주는 언어. JS를 이용하면 웹 페이지가 특정 상황(event)에 따라 동적으로 작동할 수 있도록 만들 수 있다.

 

JS의 시작은 정적인 웹을 동적으로 표현하기 위한것 이었다. 현재는 웹 브라우저에서만 동작하는 반쪽짜리 프로그래밍 언어가 아닌, 프론트엔드 영역 그리고 백엔드 영역까지 아루르는 웹 프로그래밍 언어의 표준으로 자리잡고 있다.

 

브라우저의 영역이 아닌 백엔드 영역은 Java, Python 그리고 JS(Node.JS)등 여러 언어로 구성될 수 있지만, 프론트엔드 영역은 앞에서 언급한 세 가지 언어로 구성된다.

 

 

1.2. JS 특징

자바스크립트는 객채(Object) 기반의 스크립트 언어이다. 자바스크립트는 동적이며, 타입을 명시할 필요가 없는 인터프리터 언어이다. 또한 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

---

2. JS의 기본 문법

2.1. 변수

간단한 비유와 함께 변수를 이해해보자. 한 농부가 밭에 심을 씨앗을 여러 종류 구해왔고, 씨앗을 구분할 때 편의를 위해 바구니 여러개에 씨앗을 종류별로 이름표를 붙여 나눠 담으면 좋겠다는 생각을 했다.

 

이때, 변수는 데이터를 담는 바구니, 바구니에 이름표를 달아 주는 것은 변수의 선언, 바구니에 물건을 담는 것은 할당이라고 생각하면 된다. 예를들어, 바구니에 당근이라는 이름표를 붙이고 당근 씨앗을 담는 것은, 당근이라는 변수를 선언하고 이 변수에 당근 씨앗을 할당한 것과 같다.

 

JS로 변수를 선언하고 할당할 때는 다음과 같은 구조를 가진다.

let [변수이름] = [할당할 값];

• let이라는 키워드를 쓰고 변수 명을 정한다
• 할당 연산자(=)를 쓰고 해당 변수에 할당할 값을 적는다

 

 

2.2. 변수명 선언 방법

• 스네이크 케이스(snake_case): 언더바를 넣어 구분한다
• 파스칼 케이스(PascalCase): 모든 단어를 대문자로 시작해 구분한다
• 카멜 케이스(camelCase): 두 번째 단어부터 대문자로 시작해 구분한다

Jacascript에서 영어로 변수명/함수명을 작성할 때는 camelCase를 사용하는 것이 관례이다

---

2.3. 타입

변수에는 데이터를 넣을 수 있다. 데이터에는 여러 종류가 있다.

 

2.3.1. 숫자형

100, -100, 1/100, 3.141592

 

2.3.2. 문자열(string)

문자의 집합으로, 따옴표로 둘러싸여 표시한다. 큰/작은 따옴표 모두 상관 없지만 항상 같은 종류의 따옴표로 닫아줘야한다

'apple', "apple", "1223"

 

2.3.3. 불리언(Boolean)

참과 거짓을 나타내는 타입이다.

True, False

---

2.4. 함수

함수는 입력에 따라 그에 걸맞는 작업을 하는 하나의 단위이다. 함수를 표현할 때는 크게 표현식과 선언식으로 나뉜다.

• 선언식: function keyword를 선두로 함수를 작성한다
• 표현식: 변수에 할당하는 것처럼, 함수 이름을 변수에 할당하고 함수를 작성한다. 예, let name = function(parameter){...}

 

2.4.1. 함수의 구조

function name(parameter) {}

 

• function 키워드를 사용하여 함수를 만든다
• name: 함수를 호출할 때 사용할 이름
• parameter(매개변수): 함수에 필요한 변수가 있다면 여기에 넣는다
• body: 함수가 호출되면 실행할 코드가 들어있는 곳

그리고 함수를 만들 때, 함수 안에 return 키워드가 있어야 값이 반환된다. 함수를 사용하여 원하는 값을 얻고 싶다면 꼭 함수 안에 return 키워드를 작성하자.

 

#function 키워드로 example이라는 함수명을 가지는 함수를 선언한다
function example(){ 
    let stuff = 1; #let 키워드로 변수를 선언한다
    return stuff;
    }

examle() #example 함수를 호출한다

 example이라는 함수 이름만 작성하면 함수는 호출되지 않는다. 이 경우 반환값이 아닌 함수자체가 반환된다.  반드시 함수 뒤에 ()를 붙여 함수를 호출하도록 하자.

 

+) 함수를 생성한다 === 함수를 선언한다/ 함수를 사용하기 위해 -> 함수를 호출한다

 

 

2.4.2. 함수 예시

<매개변수가 없는>
function noParameter(){
    let veg = 'carrot';
    return veg;
}

noParameter();

<매개변수가 있는>
function YesParameter(carrot){
    return carrot;
}

YesParameter('당근');

function add(number){
    number = number +1;
    return number;
}

add(1) //2
add(10) //11

---

3. JS 문법/ 변수 심화/ 타입 심화

3.1. console.log

console.log는 자바스크립트의 가장 기본적인 디버깅(출력) 방법이다.

console.log('apple');

 

 

3.2. var, let, const 차이점

JavaScript에서 사용되는 변수 선언 방식에는 세가지가 있다. var, let, const이다. var은 비교적 오래전부터 사용되어 왔지만, 현재는 잘 사용되지 않는 변수 선언식이고, 주로 let과 cont가 사용된다.

 

 

3.2.1. 중복 선언과 재할당

var은 중복 선언과 재할당이 모두 가능하다.

var a =5;
console.log(a) //5

var a =10;
console.log(a) //10

 

 

let에서는 중복 선언은 허용하지 않고, 재할당 가능하다.

//중복 선언은 불가능하다
let a =5;
let a=10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

//재할당은 가능하다
let a =5;
console.log(a); //5

a= 10;
console.log(a); //10

 

 

const는 중복 선언을 허용하지 않고, 재할당도 불가능하다. 왜냐하면 const는 상수를 선언하는 키워드이기 때문이다. 상수란, 한 번 값이 정해지면 프로그램의 다른 부분에서 변경되지 않는 값이다.

//중복 선언은 허용되지 않는다
const a = 5;
const a = 10;
cnosole.log(a); // SyntaxError: Identifier 'a' has already been declared

//재할당도 불가능하다
const a = 5;
console.log(a); // 5

a = 10;
console.log(a); // TypeError: Assignment to constant variable.

 

 

 

3.2.2. 스코프 범위

var은 함수 단위 스코프(function-level scope)이다. var 변수가 선언된 함수 내부의 어디서든 참조가 가능하지만, 외부로는 참조가 불가능하다. 또한 함수 내부에서 선언된 var은 지역변수로 간주하지만, 함수 외부에서 var가 선언되었다면 전역변수로 간주한다.

function hello(){
    var a = 10;
    console.log(a);
}

hello(); // 10

console.log(a);  //ReferenceError: a is not defined

 

 

let과 const는 블록 단위 스코프(block-level scope)이다. { } 블록 내부에서 선언된 let, const 변수는 외부에서 참조되지 않는다.

function hello() {
	let a = 5;
    console.log(a); // 5
}

console.log(a); // ReferenceError: a is not defined

 

 

 

3.2.3. 호이스팅

JS에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다. 단순하게 설명하자면, 단어 뜻 처럼 스크립트 내 변수와 함수의 선언 순서에 상관 없이 순서가 끌어올려진 듯한 현상이다. 물리적으로 끌어올려지는 것이 아니라 JS 엔진이 먼저 전체 코드를 한 번 스캔하고 실행컨텍스트에 미리 기록해 놓기 때문에 이런 현상이 발생하는 것이다.

 

var은 호이스팅이 발생한다. 뒤에 선언된 변수 a가 앞에 참조되었음에도 error가 아닌 undefined가 호출된다.

console.log(a);  // undefined :: 변수 선언 이전에 변수 참조 가능

var a  // 초기화

console.log(a);  // undefined

a = 10  // 할당

console.log(a);  // 10

 

 

let과 const도 호이스팅이 발생하지만, 다르게 작동한다.

console.log(a);  // ReferenceError :: 변수 선언 이전에 변수 참조 불가능
let a  // 초기화

console.log(a);  // undefined
a = 10  // 할당

consloe.log(a);  // 10

let과 const로 변수를 선언하는 경우에는, 변수의 선언과 초기화 사이에 일시적으로 변수값을 참조할 수 없는 구간인 TDZ(Temporal Dead Zone)가 존재하기 때문에 벌어지는 현상이다. 호이스팅은 발생하지만, 값을 참조할 수 없기 때문에 동작하지 않는 것처럼 보인다.