다진 Javascript (3)

Kyle·2022년 5월 29일
JavaScript
0

Javascript

목록 보기
3/11
post-thumbnail

✔모던 자바스크립트 4,5,6장

참고 - https://poiemaweb.com/

대부분의 프로그래밍 언어는 운영체제 위에서 실행되지만

웹 애플리케이션의 자바스크립트는 브라우저에서 HTML, CSS 와 함께 실행

→ 브라우저 환경을 고려할 때 보다 효율적인 자바스크립트 프로그래밍이 가능

1. 브라우저 동작 원리

브라우저

💡 사용자가 참조하고자 하는 웹페이지를 서버에 request 하고 서버의 response를 받아서 표시

간단한 브라우저 동작원리

💡 브라우저는 **동기(Synchronous)**적으로 HTML, CSS, Javascript를 처리

script 태그의 위치에 따라 블로킹이 발생하여 DOM의 생성이 지연될 수 있기 때문에 태그의 위치가 중요

자바스크립트의 가장 적절한 위치는?

body 요소의 가장 아래

    1. HTML 요소들이스크립트 로딩 지연으로 인해 렌더링에 지장 받는 일이 발생하지 않아 페이지 로딩 시간이 단축됨
    1. DOM이 완성되지 않은 상태에서 자바스크립트가 DOM을 조작하면 에러 발생

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

1) 변수

💡 위치(메모리 상의 주소)를 기억하는 저장소

메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 지정한 식별자(identifier)

  • 값을 저장(할당)하고 그 저장된 값을 참조
  • 한번 쓰고 버릴 값이 아닌 유지해야 하는 값
var x; // 변수 선언
x = 6; // 정수 6 이라는 값을 할당

2) 값

💡 프로그램에 의해 조작될 수 있는 대상

리터럴 표기법(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가지의 데이터 타입

자바스크립트의 모든 값은 데이터 타입을 가짐

  • 원시 타입 (primitive data type) number string boolean null undefined symbol
  • 객체 타입 (Object data type) 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() {};

3) 연산자 Operator

💡 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입 연산 등을 수행해 하나의 값을 만드는 것

* + = > < && 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

4) 키워드

💡 수행할 동작을 규정

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++;
}

5) 주석

💡 작성된 코드의 의미를 설명하기 위해 사용 
// 한줄 주석

/*
  여러줄
	주석을
	하고싶으면
	이거
*/
  • 과도한 주석은 오히려 가독성을 해칠 수 있으니, 주석 없이도 읽을 수 있는 코드를 짜자

6) 문

프로그램(스크립트) : 컴퓨터에 의해 단계별로 수행될 명령들의 집합

→ 여기서 각각의 명령을 문(statement)라고 하며 문이 실행되면 일이 발생함

  • 리터럴, 연산자(operator), 표현식(expression), 키워드(keyword) 등으로 구성
  • 세미콜론(;)으로 끝
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) 가능

  • 조건문(if, switch)
  • 반복문(while, for)
  • 함수호출
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)만 생성

7) 표현식

💡 하나의 값으로 평가(Evaluation)되는 것

값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은

모두 표현식이며 하나의 값으로 평가됨

→ 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있음

5             // 5
5 * 10        // 50
5 * 10 > 10   // true
(5 * 10 > 10) && (5 * 10 < 100)  // true

// 위의 표현식들은 전부 결국 5, 50, true, true라는 하나의 값으로 평가됨

8) 문과 표현식의 비교

// 선언문(Declaration statement)
var x = 5 * 10; // 표현식 x = 5 * 10를 포함하는 문이다.

// 할당문(Assignment statement)
x = 100; // 이 자체가 표현식이지만 완전한 문이기도 하다.
  • 표현식 문을 구성하는 요소로, 그 자체로 하나의 문이 될 수 있음 평가되어 값을 만들지만 그 이상의 행위는 할 수 없음
  • 문 표현식으로 평가한 값을 통해 실제로 컴퓨터에게 명령을 해서 무언가를 하는 것 var, function과 같은 선언 키워드를 사용하여 변수나 함수를 생성하기도 하고 if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도

9) 함수

어떤 작업을 수행하기 위해 필요한 문(statement)들의 집합을 정의한 코드 블록

이름과 매개변수를 갖으며, 필요할 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행 가능

// 함수의 정의(함수 선언문)
function 이름(매개변수) {
	// 작업 수행 코드
}

function square(number) {
  return number * number;
}

// 함수의 호출
square(2); // 4

함수는 호출에 의해 실행되는데, 한번 이상 호출될 수 있음

동일한 작업을 반복적으로 수행해야 하는 경우, 미리 정의한 함수를 재사용하는 것이 효율적

= 코드의 재사용

10) 객체

💡 **객체**

데이터를 의미하는 프로퍼티(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
  • 데이터(프로퍼티)와 데이터에 관련되는 동작(메소드)를 모두 포함할 수 있기 때문에 데이터와 동작을 하나의 단위로 구조화할 수 있어서 용이
  • 자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 '프로토타입'이라고 불리는 객체의 프로퍼티와 메소드를 상속받을 수 있다

11) 배열

1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용

// array
var arr = [1, 2, 3, 4, 5];

console.log(arr[1]); // 2

3. 데이터 타입과 변수

데이터 타입

💡 데이터 타입(Data Type) → 프로그래밍 언어에서 사용할 수 있는 데이터의 종류

1) 원시 데이터 타입 (변경 불가능한 값 / 값에 의한 전달)

1-1) number

  • 하나의 숫자타입만 존재
  • 모든 수를 실수로 처리, 정수만을 표현하기 위한 데이터 타입이 존재하지 X
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
  • Infinity : 양의 무한대
  • -Infinity : 음의 무한대
  • NaN : 산술 연산 불가(not a number)
var pInf = 10 / 0;  // 양의 무한대
console.log(pInf);  // Infinity

var nInf = 10 / -0; // 음의 무한대
console.log(nInf);  // -Infinity

var nan = 1 * 'string'; // 산술 연산 불가
console.log(nan);       // NaN

1-2) string

  • 텍스트 데이터를 나타내는데 사용
  • 작은따옴표('') 또는 큰따옴표("")안에 텍스트를 넣어 생성
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

1-3) boolean

  • 논리적 참, 거짓을 나타내는 true , false로 나뉨
  • null/undefined/0(숫자) = false로 간주

1-4) undefined

  • undefined 타입의 값은 undefined가 유일
  • 선언 이후 값을 할당하지 않은 변수는 undefined 값을 가짐
    • 선언은 되었지만. 할당하지 않은 변수에 접근/존재하지 않은 객체에 접근할 경우 반환
  • undefined는 자바스크립트 엔진에 의해 초기화 된 값
    • 변수의 값이 없다는 것을 명시하고 싶은 경우 , null 할당
var foo;
console.log(foo); // undefined

1-5) null

  • null 타입의 값은 null이 유일
  • Null (X) / NULL ( X )
  • 의도적으로 변수에 값이 없다는 것을 명시할 때 사용
  • 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우 명시적으로 반환하기도 함
// 예시 // 
var element = document.querySelector('.myElem');
// HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.
console.log(element); // null
  • 타입을 나타내는 문자열을 반환하는 typeof 연산자, null 값을 연산하면 object가 나온다?
    → 자바스크립트의 설계상의 오류
  • null 타입을 확인할 때는?
// 오류
var foo = null;
console.log(typeof foo); // object

//아래처럼 일치연산자 사용!
var foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

1-6) symbol

  • ES6에서 새롭게 추가된 7번째 타입
  • 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키를 만들기 위해 사용
  • Symbol 함수를 호출해 생성

2) 객체 데이터 타입 (거의 모든 것 / 참조에 의한 전달)

  • object

  • 데이터와 데이터에 관련한 동작을 모두 포함할 수 있는 개념적 존재

  • 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적 주체

3) 변수

💡 변수(variable) → 값이 위치하고 있는 메모리 주소에 접근하기 위해 사람이 이해할 수 있는 언어로 명명한 식별자 ** 식별자 : 어떤 대상을 유일하게 식별할 수 있는 이름을 말한다.
  • 값의 위치(주소)를 기억하는 저장소
    • 값이 위치하고 있는 메모리 상의 주소
  • var , let, const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당
var score;  // 변수의 선언
score = 80; // 값의 할당
score = 90; // 값의 재할당
score;      // 변수의 참조

// 변수의 선언과 할당
var average = (50 + 100) / 2;
  • 식별자는 데이터가 저장된 메모리 상의 주소를 기억 ⇒ 식별자를 통해 메모리에 저장된 값을 참조할 수 있고 변수명을 통해 데이터의 의미를 명확히 할 수 있어 코드의 가독성이 좋아지는 효과

3-1) 변수 선언해보기

  • 원의 넓이 구하기
3.141592653589793 * 2 * 2; // 12.566370614359172

⇒ 원의 넓이 구함.. → 결과 기억 X ..? → 다시 구해야함

❗ 변수를 사용하여 원의 넓이를 기억 ⇒ 기억된 원의 넓이를 재사용

  • 변수를 지정하여 높이가 5인 원기둥의 부피를 구해보기
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;
  • 일정 기간 유지할 필요가 있는 값에 변수 이용

3-2) 변수 호이스팅

  • 호이스팅 : 위로 끌어올린다.
  • var 선언문이나 function 선언문 등 모든 선언문이 해당 Scope의 선두로 옮겨진 것처럼 동작하는 특성
  • 호이스팅은 어떻게 이루어지나?

// 예시//

console.log(foo); // ① undefined
var foo = 123;
console.log(foo); // ② 123
{
  var foo = 456;
}
console.log(foo); // ③ 456

  1. ①에서 foo 선언되지 않았음. → 'foo가 정의되지 않았디'가 아닌 undefined 출력

    ⇒ ❗ 자바스크립트의 특징으로 모든 선언문이 호이스팅 되기 때문

  2. ①이 실행되기 전, var foo = 123;이 호이스팅 되어 ① 앞으로 옮겨짐

    ⇒ 변수 선언이 코드레벨로 옮겨진 것은 아니고 변수 객체에 등록되고 undefined로 초기화

    ⇒ 변수 선언단계와 초기화 단계가 할당단계와 분리되어 진행되기 때문에 foo에는 undefined 할당

  3. ② 에서 foo에 값이 할당 → 123 출력

  • 자바스크립트가 갖는 스코프 ; 함수레벨 스코프

⇒ 코드 블록 내의 변수 foo는 전역변수, → 변수 foo에 할당된 값을 재할당하기 때문에 ③의 결과는 456!
profile
Kyle
불편함을 고민하는 프론트엔드 개발자, 박민철입니다.
이전 포스트

다진 Javascript (2)

다음 포스트

다진 Javascript (4)

0개의 댓글