대부분의 프로그래밍 언어는 운영체제 위에서 실행되지만
웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS 와 함께 실행
→ 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능
간단한 브라우저 동작원리
💡 브라우저는 **동기(Synchronous)**적으로 HTML, CSS, Javascript를 처리script
태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있기 때문에 태그의 위치가 중요
자바스크립트의 가장 적절한 위치는?
body 요소의 가장 아래
메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)
var x; // 변수 선언
x = 6; // 정수 6 이라는 값을 할당
리터럴 표기법(literal notation)
값을 생성하는 가장 간단한 방법
var str = 'Hello World';
// str이라는 이름의 변수 선언 + 문자열 리터럴 'Hello World'라는 값 할당
// 숫자 리터럴
10.50
1001
// 문자열 리터럴
'hello'
"hi"
// 불리언 리터럴
true
false
// null 리터럴
null
// undefined 리터럴
undefined
// 객체 리터럴
{ name: 'Lee', gender: 'male' }
// 배열 리터럴
[ 1, 2, 3 ]
// 정규표현식 리터럴
/ab+c/
// 함수 리터럴
function() {}
연산에 의해 하나의 값이 될 수 있음
// 산술 연산
10.50 + 1001
7가지의 데이터 타입
자바스크립트의 모든 값은 데이터 타입을 가짐
number
string
boolean
null
undefined
symbol
object
동적 타이핑
C나 Java와 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않고,
변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정
// Number
var num1 = 1001;
var num2 = 10.50;
// String
var string1 = 'Hello';
var string2 = "World";
// Boolean
var bool = true;
// null
var foo = null;
// undefined
var bar;
// Object
var obj = { name: 'Lee', gender: 'male' };
// Array
var array = [ 1, 2, 3 ];
// function
var foo = function() {};
*
+
=
>
<
&&
typeof
new
연산의 대상 : 피연산자(Operand)
// 산술 연산자
var area = 5 * 4; // 20
// 문자열 연결 연산자
var str = 'My name is ' + 'Lee'; // "My name is Lee"
// 할당 연산자
var color = 'red'; // "red"
// 비교 연산자
var foo = 3 > 5; // false
// 논리 연산자
var bar = (5 > 3) && (2 < 4); // true
// 타입 연산자
var type = typeof 'Hi'; // "string"
// 인스턴스 생성 연산자
var today = new Date(); // Sat Dec 01 2018 00:57:19 GMT+0900 (한국 표준시)
암묵적 타입 강제 변환
자바스크립트는 암묵적 타입 강제 변환을 하기 때문에 피연산자의 타입은 반드시 일치할 필요는 없음
var foo = 1 + '10';
var bar = 1 * '10';
console.log(foo) // "100"
console.log(bar) // 10
console.log(typeof foo) // "string"
console.log(typeof bar) // "number
var
function
return
while
등
예를 들어 var
키워드는 새로운 변수를 생성할 것을 지시
// 변수의 선언
var x = 5 + 6;
// 함수의 선언
function foo (arg) {
// 함수 종료 및 값의 반환
return ++arg;
}
var i = 0;
// 반복문
while (1) {
if (i > 5) {
// 반복문 탈출
break;
}
console.log(i);
i++;
}
// 한줄 주석
/*
여러줄
주석을
하고싶으면
이거
*/
프로그램(스크립트) : 컴퓨터에 의해 단계별로 수행될 명령들의 집합
→ 여기서 각각의 명령을 문(statement)라고 하며 문이 실행되면 일이 발생함
var x = 5;
var y = 6;
var z = x + y;
console.log(z);
문은 코드 블록(code block, {})으로 그룹화해서 함께 실행되어야 하는 문을 정의
function myFunction(x, y) {
// 코드 블럭
return x + y;
}
// if 문
if(x > 0) {
// 코드 블럭
// do something
}
// for 문
for (var i = 0; i < 10; i++) {
// 코드 블럭
// do something
}
문들은 일반적으로 위에서 아래로 순서대로 실행됨
하지만 흐름제어(Control Flow) 가능
var time = 10;
var greeting;
if (time < 10) {
greeting = 'Good morning';
} else if (time < 20) {
greeting = 'Good day';
} else {
greeting = 'Good evening';
}
console.log(greeting);
다른 언어와 달리 자바스크립트에서는 블록 유효범위(Block-level scope)를 생성하지 않음
함수 단위의 유효범위(Function-level scope)만 생성
값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은
모두 표현식이며 하나의 값으로 평가됨
→ 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있음
5 // 5
5 * 10 // 50
5 * 10 > 10 // true
(5 * 10 > 10) && (5 * 10 < 100) // true
// 위의 표현식들은 전부 결국 5, 50, true, true라는 하나의 값으로 평가됨
// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.
// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.
어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록
이름
과 매개변수
를 갖으며, 필요할 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행 가능
// 함수의 정의(함수 선언문)
function 이름(매개변수) {
// 작업 수행 코드
}
function square(number) {
return number * number;
}
// 함수의 호출
square(2); // 4
함수는 호출에 의해 실행되는데, 한번 이상 호출될 수 있음
동일한 작업을 반복적으로 수행해야 하는 경우, 미리 정의한 함수를 재사용하는 것이 효율적
= 코드의 재사용
데이터를 의미하는 프로퍼티(property)
와
데이터를 참조하고 조작할 수 있는 동작(behavior)을 의미하는 메소드(method)
로 구성된 집합
키(이름)
와 값
으로 구성된 프로퍼티(property)의 집합 이라고도 할 수 있음객체(object) 기반의 스크립트 언어
자바스크립트를 이루고 있는 거의 모든 것이 객체
원시타입(Primitives number
string
boolean
null
undefined
symbol
)을 제외한
나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체
var person = {
name: 'Lee',
gender: 'male',
sayHello: function () {
console.log('Hi! My name is ' + this.name);
}
};
console.log(typeof person); // object
console.log(person); // { name: 'Lee', gender: 'male', sayHello: [Function: sayHello] }
person.sayHello(); // Hi! My name is Lee
1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용
// array
var arr = [1, 2, 3, 4, 5];
console.log(arr[1]); // 2
var integer = 10; // 정수
var double = 10.12; // 실수
var negative = -20; // 음의 정수
var binary = 0b01000001; // 2진수
var octal = 0o101; // 8진수
var hex = 0x41; // 16진수
console.log(binary); // 65
console.log(octal); // 65
console.log(hex); // 65
// 표기법만 다를뿐 같은 값이다.
console.log(binary === octal); // true
console.log(octal === hex); // true
console.log(1 === 1.0); // true
var result = 4 / 2;
console.log(result); // 2
result = 3 /2;
console.log(result); // 1.5
var pInf = 10 / 0; // 양의 무한대
console.log(pInf); // Infinity
var nInf = 10 / -0; // 음의 무한대
console.log(nInf); // -Infinity
var nan = 1 * 'string'; // 산술 연산 불가
console.log(nan); // NaN
var str = 'Hello';
str = 'world';
var str = 'string';
console.log(str); // string
str = 'String';
console.log(str); // String
str += ' test';
console.log(str); // String test
str = str.substring(0, 3);
console.log(str); // Str
str = str.toUpperCase();
console.log(str); // STR
var foo;
console.log(foo); // undefined
// 예시 //
var element = document.querySelector('.myElem');
// HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(element); // null
→ 자바스크립트의 설계상의 오류
// 오류
var foo = null;
console.log(typeof foo); // object
//아래처럼 일치연산자 사용!
var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null); // true
object
데이터와 데이터에 관련한 동작을 모두 포함할 수 있는 개념적 존재
프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체
var score; // 변수의 선언
score = 80; // 값의 할당
score = 90; // 값의 재할당
score; // 변수의 참조
// 변수의 선언과 할당
var average = (50 + 100) / 2;
3.141592653589793 * 2 * 2; // 12.566370614359172
⇒ 원의 넓이 구함.. → 결과 기억 X ..? → 다시 구해야함
❗ 변수를 사용하여 원의 넓이를 기억 ⇒ 기억된 원의 넓이를 재사용
var circleArea = 3.141592653589793 * 2 * 2;
// 원주율 변수에 저장
// 변수이름을 대문자로 하여 상수임을 암시
var cylinderVolume = circleArea * 5;
// 반지름과 원기둥의 높이도 의미 명확, 변화 대처에 유용하도록 변수에 저장
var PI = 3.141592653589793; // 상수
var radius = 2; // 변수
var circleArea = PI * radius * radius;
var cylinderHeight = 5;
var cylinderVolume = circleArea * cylinderHeight;
// 예시//
console.log(foo); // ① undefined
var foo = 123;
console.log(foo); // ② 123
{
var foo = 456;
}
console.log(foo); // ③ 456
①에서 foo 선언되지 않았음. → 'foo가 정의되지 않았디'가 아닌 undefined 출력
⇒ ❗ 자바스크립트의 특징으로 모든 선언문이 호이스팅 되기 때문
①이 실행되기 전, var foo = 123;이 호이스팅 되어 ① 앞으로 옮겨짐
⇒ 변수 선언이 코드레벨로 옮겨진 것은 아니고 변수 객체에 등록되고 undefined로 초기화
⇒ 변수 선언단계와 초기화 단계가 할당단계와 분리되어 진행되기 때문에 foo에는 undefined 할당
② 에서 foo에 값이 할당 → 123 출력
⇒ 코드 블록 내의 변수 foo는 전역변수, → 변수 foo에 할당된 값을 재할당하기 때문에 ③의 결과는 456!