lessons 5. 자바스크립트 기본 문법

2023.02.01

자바스크립트 스터디 2회차

공부 사이트: https://poiemaweb.com/

 

5. 자바스크립트 기본 문법

1) 변수(Variable)

• 값을 저장하고, 그 저장된 값을 참조하기 위해 사용.
• 한번 쓰고 버리는 값이 아니라 계속해서 사용할 필요가 있는 값은 변수에 담아 사용.
• 메모리 상 값의 위치(주소)를 저장하는 저장소.
• 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)

 

 2) 값

// num이라는 변수와 28이라는 숫자 리터럴
var num = 28;
// str이라는 변수와 hello world라는 문자열 리터럴
var str = 'hello world';

	용어	의미
	데이터 타입	프로그래밍 언어에서 사용할 수 있는 값의 종류
	변수	값이 저장된 메모리 공간의 주소를 가리키는 식별자
	리터럴(literal)	소스코드 안에서 직접 만들어 낸 상수 값 자체. 값을 구성하는 최소 단위

 

- 리터럴의 종류

501231    // 숫자 리터럴

'test', "TEST"  // 문자열 리터럴

true, false    // 불리언 리터럴

null    // null 리터럴

undefined     // undefined 리터럴

{ name: "홍길동", genter: "남자"}     //객체 리터럴

[ 1,2,3,4,5 ]     // 배열 리터럴

/ab+c/     //정규표현식 리터럴

function() {}     //함수 리터럴

 

- 데이터 타입

원시 타입	number	string	boolean
	null	undefined	symbol (New in ECAScript 6)
객체 타입	object

자바스크립트는 다른 프로그래밍 언어와 다르게, 변수 선언 시 데이터의 타입을 미리 지정하지 않음.

변수에 할당된 값의 타입에 의해 동적으로 타입이 결정된다는 것.

▶ 동적 타이핑이라 한다.

 

 

3) 연산자(Operator)

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행하여 하나의 값을 만듦.

연산의 대상을 피연산자(Operand)라고 함.

 

연산 시 피연산자의 타입이 반드시 일치할 필요는 없음. 자바스크립트가 암시적 형변환을 수행하기 때문.

 

---

[TIP] 암시적 형변환(implicit coercion)

1) to string

• 자바스크립트 내장 함수인 String() 사용하는 것과 유사함. → 명시적(explicit) 형변환
• 암시적으로 숫자형 > 문자형 변환 위해 '' 를 더해준다

 

2) to boolean

•  자바스크립트 내장 함수인 Boolean 사용하는 것과 유사함 → 명시적(explicit) 형변환

Boolean(123) //true, 명시적
if (123) { ... } //true일 때, 암시적
!!123     // !!: 다른 타입 데이터를 boolean 타입으로 명시적 형변환 시 사용
123 || 'test'

 

3) to number

• 자바스크립트 내장 함수인 Number() 사용하는 것과 유사함. → 명시적(explicit) 형변환
• Numeric 문자열이라면 동등한 숫자로 변환됨.
• 숫자가 아닌 문자열(Non-Numberic)이 있다면 NaN을 반환함.

문자열 > 숫자형

• + 연산자의 기능: ⓐ수학적인 덧셈, ⓑ문자열 합치기
• 문자열이 + 연산자의 피연산자로 주어졌을 때, 자바스크립트는 숫자로 변환하지 않고 숫자를 문자형으로 변환
• 즉, + 연산자 사용 시 우선순위는 문자형 > 숫자형

---

4) 키워드

수행할 동작을 규정한 것. 기능들이 정의되어 있기 때문에 식별자나 프로퍼티 이름으로 사용할 수 없음.

EX) var 키워드는 새로운 변수를 생성할 것을 지시함.

var 키워드를 식별자로 사용 불가능

• 프로퍼티: 객체의 내부 속성을 의미.
• break, case, catch, class, const, continue, do, else, for, if, new, return, this ....

 

5) 주석

주석은 작성된코드의 의미를 설명하기 위해 사용함. 주석 부분은 해석기(parser)가 무시하며 실행되지 않음.

// 한 줄 주석입니다.

/*
안녕하세요.
여러 줄 주석입니다
*/

 

6) 문과 표현식

프로그램: 컴퓨터(웹 브라우저)에 의해 단계별로 수행될 명령 집합

문(statement): 각각의 명령. 문은 연산자, 표현식, 키워드 등으로 구성되며. 세미콜론으로 끝나야 함.

표현식(Expression): 값, 변수, 객체, 배열, 함수 호출, 피연산자와 연산자의 조합은 모두 표현식임. 하나의 값으로 평가됨.

 

※ 문과 표현식 차이: 문은 변수를 선언, 초기화, 함수를 생성. 표현식은 평가되어 값을 만드는 것으로 끝남. 표현식이 평가된 값을 통해 컴퓨터에 명령을 하는 것은 문이다.

var n1 = 1;
var n2 = 3;
var n3 = n1 + n2;

console.log(n3);


// 문은 코드 블록으로 그룹화할 수 있다.
function f1(n1,n2){
     return n1 + n2;
}

for (var i=0;i<10;i++){
     console.log(i);
}

// 표현식
123
123 * 10
123 * 10 > 10
(123 + 123 > 100) && (452 + 4 < 100)

 

또한, 자바스크립트는 블록 유효범위가 생성되지 않음. 함수 유효범위만 생성됨.

즉, {블록} 안에서 선언된 변수를 블록이 닫힌 후에도 사용 가능하다. 함수 내 변수에는 접근 불가능.

반복문 내에서 선언된 변수도 계속 접근 가능함.  

(함수 레벨 스코프와 블록 레벨 스코프 설명)

 

// 블록 유효범위 -> 계속 사용 가능
{
     var num = 123;
}

// 함수 유효범위 -> 함수 내에서만 사용 가능
function f1(){
     name = '홍길동';
     age = 12;
}

//반복문 -> 계속 사용 가능
for (var i=0;1<10;i++){ } 
console.log(i);

 

 

7) 함수

어떤 작업을 수행하기 위해 필요한 문들의 집합. 해당 작업이 필요할 때마다 호출해서 사용

 

8) 객체

원시 타입(Primitives)을 제외한 나머지 값들(함수, 배열, 정규표현식 ...)은 모두 객체.

객체는 키와 값으로 구성된 프로퍼티의 집합. 프로퍼티 값으로 함수를 사용할 수 있으며, 해당 함수를 메소드라고 부른다.

 

var person = {
     name: '홍길동',
     age: '12',
     sayHello: function() {
          console.log('Hi, My name is ' + this.name);
     }
};

console.log(typeof person); // 객체
console.log(person); 
person.sayHello(); // 메소드 실행

객체 = 데이터를 의미하는 프로퍼티 + 동작을 의미하는 메소드

자바스크립트의 모든 객체는 객체지향 상속을 구현하기 위해 프로토타입이라고 불리는 객체의 프로퍼티와 메소드를 상속받음.

 

---

[TIP] 프로토타입

var obj = new Object(); //이 객체의 프로토타입은 Object.prototype. 

var arr = new Array(); //이 객체의 프로토타입은 Array.prototype

var date = new Date(); //이 객체의 프로토타입은 Date.prototype

자바스크립트에 내장된 모든 생성자는 Object.prototype 객체를 프로토타입으로 가짐.

Date.prototype 객체는 Object.prototype도 프로토타입으로 가진다.

 

이처럼 프로토타입이 상속되는 가상의 연결 고리를 프로토타입 체인(prototype chain)이라고 함.

Object.prototype 객체는 프로토타입 체인에서 가장 상위에 존재하는 프로토타입.

---

9) 배열

하나의 변수에 여러 개의 값을 순차적으로 저장할 때 사용. (객체)

var arr = [1,2,3,4,5];
console.log(arr[1]);