[Questions about JavaScript Language Basics] JavaScript 기초

1. Javascript

https://ko.javascript.info/intro

자바스크립트란?

"웹페이지에 생동감을 불어넣기 위해" 만들어진 프로그래밍 언어입니다. 자바스크립트로 작성한 프로그램을 스크립트(Script)라고 하는데, 스크립트는 웹페이지의 HTML 안에 작성할 수 있고 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다.

 

자바스크립트는 브라우저뿐만 아니라 서버에서도 실행할 수 있습니다. 브라우저엔 "자바스크립트 가상 머신"이라 불리는 엔진이 내장되어 있습니다. (eg. V8 - Crome)

 

모던 자바스크립트는 "안전한" 프로그래밍 언어입니다. 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않습니다. 

 

자바스크립트의 능력은 실행 환경에 상당한 영향을 받습니다. Node.js 환경에선 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원합니다. 브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있습니다. 페이지에 새로운 HTML을 추가하거나 기존 HTML 혹은 스타일 수정, 마우스 클릭, 포인터의 움직임, 키보드 키 눌림 등과 같은 사용자 행동에 반응, 네트워크를 통해 원격 서버에 요청을 보내거나, 파일 다운로드, 업로드하기 (AJAX, COMET 사용).

 

자바스크립트를 이용하면 페이지를 생성한 서버와 쉽게 정보를 주고받을 수 있습니다. 하지만, 타 사이트나 도메인에서 데이터를 받아오는 건 불가능합니다. (HTTP 해더 등을 이용한 원격 서버의 명확한 승인이 필요합니다.)

 

자바스크립트만의 강점은 HTML/CSS와 완전히 통합할 수 있고, 모든 주요 브라우저에서 지원하고, 기본 언어로 사용됩니다.

 

- Javascript 기초

https://ko.javascript.info/first-steps

자바스크립트 기초

웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용합니다. 

<script>javascript code...</script>

<script type=...>javascript code...</script>

 

<script language=...>javascript code...</script>

<script src="/path/to/script.js">javascript code...</script>

 

Strict mode?

 

- 변수와 상수

(1) 변수

 

https://ko.javascript.info/variables

변수와 상수

var는 let과 거의 동일하게 동작합니다. var도 let처럼 변수를 선언하는 데 사용되는 건 마찬가지입니다. 하지만, var은 "오래된" 방식입니다.

 

* var은 "오래된" 방식

var은 초기 자바스크립트 구현 방식 때문에 let과 const로 선언한 변수와는 전혀 다른 방식으로 동작합니다. 

 

'var'는 블록 스코프가 없습니다. var는 코드 블록을 무시하기 때문에 블록과 상관없이 전역 스코프에서 이 변수에 접근할 수 있습니다.

 

if (true) {
  var test = true; // 'let' 대신 'var'를 사용했습니다.
}

alert(test); // true(if 문이 끝났어도 변수에 여전히 접근할 수 있음)

 

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

alert(i); // 10, 반복문이 종료되었지만 'i'는 전역 변수이므로 여전히 접근 가능합니다.

 

코드 블록이 함수 안에 있다면, var는 함수 레벨 변수에 있습니다.

 

function sayHi() {
  if (true) {
    var phrase = "Hello";
  }

  alert(phrase); // 제대로 출력됩니다.
}

sayHi();
alert(phrase); // Error: phrase is not defined

 

var 선언은 함수가 시작될 때 처리됩니다. 함수 본문 내에서 var로 선언한 변수는 선언 위치와 상관없이 함수 본문이 시작되는 지점에서 정의됩니다. 코드 블록은 무시되기 때문에, 아래 코드 또한 동작합니다.

 

function sayHi() {
  phrase = "Hello"; // (*)

  if (false) {
    var phrase;
  }

  alert(phrase);
}
sayHi();

 

이렇게 변수(var)가 끌어올려 지는 현상을 '호이스팅(hoisting)'이라고 부릅니다. 위의 코드에서 if(false) 블록 안 코드는 절대 실행되지 않지만, 이는 호이스팅에 전혀 영향을 주지 않습니다.

 

히지만, 선언은 호이스팅 되지만, 할당은 호이스팅 되지 않습니다.

function sayHi() {
  console.log(phrase);
  var phrase = "Hello";
}

sayHi();   //undefined

 

var만의 특성은 대부분의 상황에서 좋지 않은 부작용을 만들어 냅니다. let이 표준에 도입된 이유가 바로 이런 부작용을 없애기 위해서입니다. 변수는 블록 레벨 스코프를 갖는 게 좋으므로, let과 const를 이용해 변수를 선언하는 게 대세가 되었습니다.

 

(2) 상수

변화하지 않는 변수를 선언할 땐, let 대신 const 를 사용합니다. 

 

const myBirthday = '18.04.1982';

 

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001';   //error

 

- 자료형

https://ko.javascript.info/types

자료형

(1) 객체와 심볼

객체(object)형은 특수한 자료형입니다. 객체형을 제외한 다른 자료형은 문자열, 숫자 등 한 가지만 표현할 수 있기 때문에 원시 자료형이라 부릅니다. 반면 객체는 데이터 컬렉션이나 복잡한 개체(entity) 를 표현할 때 사용합니다.

 

객체는 중괄호 {...} 를 이용해 만들 수 있습니다. 중괄호 안에는 ‘키(key): 값(value)’ 쌍으로 구성된 프로퍼티(property) 를 여러 개 넣을 수 있는데, 키엔 문자형, 값엔 모든 자료형이 허용됩니다.

 

let user = new Object(); // '객체 생성자' 문법
let user = {};  // '객체 리터럴' 문법

 

let user = {     // 객체
  name: "John",  // 키: "name",  값: "John"
  age: 30        // 키: "age", 값: 30
};

 

프로퍼티 값엔 모든 자료형이 올 수 있습니다. 불린형 프로퍼티를 추가해보겠습니다.

user.isAdmin = true;

 

delete 연산자를 사용하면 프로퍼티를 삭제할 수 있습니다.

delete user.age;

 

객체 리터럴 안의 프로퍼티 키가 대괄호 [] 로 둘러싸여 있는 경우, 이를 계산된 프로퍼티라고 부릅니다.

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");

let bag = {
  [fruit]: 5, // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};

alert( bag.apple ); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.

 

실무에선 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있습니다. 이를 단축 프로퍼티라고 부릅니다.

function makeUser(name, age) {
  return {
    name: name,
    age: age
    // ...등등
  };
}

let user = makeUser("John", 30);
alert(user.name); // John

function makeUser(name, age) {
  return {
    name, // name: name 과 같음
    age   // age: age 와 같음
    // ...
  };
}

let user = {
  name,  // name: name 과 같음
  age: 30
};