<그냥하자> JavaScript (1) console & 변수 & 엄격모드

JavaScript

출처 : 인프런 얄팍한 코딩사전

인터프리터 언어 , 동적자료형 포함한다. C나 자바 등의 컴파일언어와는 달리 코딩을 한 결과를 사용자에게 건네주기 전에 컴파일과정을 거치지 않음

컴파일한다는 것은 코드를 실행하기 전에 기계어나 다른 코드로 먼저 '번역' 하는 것.

컴파일 과정이 없기 때문에 프로그램 작성 즉시 브라우저에 결과를 시가적으로 표현할 수 있고, 흥미와 프로그래밍 감각과 논리를 키울수 있다고 하는데,,, 누가 배우기 쉽다고 그랬을까 ㅎㅅㅎ

여하튼, HTML, CSS 살짝 개념정도 잡혔으니 Js를 시작해보려 한다...

conesole

console.log('출력할 값');

타 언어의 print와 같은 역할

사전적 의미 :

브라우저 디버깅 콘솔은 자바스크립트의 오류나 비정상적인 연산의 원인을 밝히기 위해 제공되는 도구 / 콘솔 창에 직접 구문을 입력하고 실행할 수 있으나 개발자를 위한.

자주 사용되는 콘솔 메서드

• console.log() : 메시지를 출력하는 일반적인 방법
• console.table() : 표 형태로 정보를 표현
• console.warn() : 경고 메시지 출력
• console.error() : 오류 메시지 출력

변수

값을 저장하기 위한 저장소와 저장된 값을 사용하기 위해 해당 저장소를 가리키는 식별자로서의 이름이 있는 형태

// 키워드 변수병 = 변수값;
var name = '홍길동';
let myName = '일지매';
const yourName = '임꺽정'; 

var는 거의 사용하지 않는 옛날 변수 키워드
--------------------------------
let x = 1;
console.log(x);

일반적으로 이렇게 변수선언과 값넣기를 동시에 하며 이를 초기화라고 부른다.

이미 만들어진 주머니를 다시 재선언 할 수 없으며 선언하기 전 코드를 사용할 수는 없움

let : 변수 - 넣은 데이터를 바꿀 수 있음
const : 상수 - 넣은 데이터를 바꿀 수 없음 (보통 대문자로)

자바스크립트는 데이터의 종류에 있어 엄격하지 않음

키워드

keyword란 javascript 프로그래밍 언어에서 어떤 역할이나 기능이 정해진 특별한 단어. 다른 용어로 예약어(reserved word) 라고도 한다.

---

let 키워드

1. 한 번 선언하면 동일한 변수 이름으로 다시 선언될 수 없음(재선언 불가)
2. 재할당은 가능하나 사용하기 전에 반드시 선언되어야 함
3. 유요한 범위로 블록 스코프를 가짐

const 키워드 (상수?)

1. 한 번 선언하면 동일한 변수 이름으로 다시 선언할 수 없음(재선언 불가)
2. 한 번 선언하면 값을 변경할 수 없음(재할당 불가)
3. 유요한 범위로 블록 스코프를 가짐

   상수는 따라서 값이 바뀔 일이 없는 데이터로 주로 사용

var 키워드

오늘날에는 사용하지 않는다(let과 const가 생기기 전 변수 선언에 사용되던 문)

1. 선언 없이도 사용 가능

2. 재선언 가능

코딩 중 실수의 여지가 됨

var 키워드는 선언한 변수명을 중복해서 생성할 수 있다. 멋쟁이 개발자가 공을 들여 특정 변수명을 사용했는데 타 개발자가 동일 변수명을 다시 선언하고 재할당하게 되면 문법에서는 오류가 나지는 않지만 멋쟁이 개발자가 만든 특정 변수명을 의도하지 않는 방향으로 사용될수 있다라는 것이다.

3. 블록 레벨 스코프 무시
   

함수의 스코프는 유효함

4. 호이스팅

엄연히는 let도 호이스팅 되지만 undefined로 초기화되지 않는 것

초기화되기 이전의 영역: TDZ에 속함 MDN 문서

식별자 identifier 명명 규칙

• 영문, 한글 및 유니코드(대부분의 문자 표현) 글자, 숫자 사용 가능
• 특수문자는 $ 또는 _
• 숫자로 시작할 수 없음
• 공백(스페이스) 사용 불가
• 예약어 사용 불가 - 이 사이트에서 Keywords 항목 확인

식별자 (+++ 08.09)

식별자(identifier)는 자바스크립트 내부에서 변수, 함수 등에 부여되는 이름을 의미.

식별자는 앞에 사용된 키워드의 역할에 따라 다르게 부르나 변수를 생성하는 let, const 등의 키워드와 함께 사용하면 식별자라는 용어보다는 변수명이라고 한다. 아울러 키워드는 식별자로 사용할 수 없다.

매개변수

함수의 매개변수 갯수를 넘어가는 인수, 오류를 일으키지 않고 무시됨

1. 기본값 매개변수 default parameter
   

2. arguments - 함수 내에서 사용가능한 지역 변수

배열의 형태를 한 객체
함수 호출 시 전달된 모든 인수들을 배열 형태로 가짐

3. ...변수그룹명 - 나머지 변수 rest parameters

특정 매개변수들 뒤에 정해지지 않은 수의 매개변수들을 받을 때
마지막 인자로만 사용 가능
arguments와는 달리 실제 배열임

엄격 모드 strict mode

기존의 느슨한 모드에서 허용되던, 문제를 유발할 수 있는 코드들에 오류를 발생시킴

1. 선언되지 않은 변수 사용시 오류 발생 + 범위별 적용 방법

위와 같이 자바스크립트 문서 최상단에 작성 - 문서 전체에 적용
문서, script 태그별로만 적용 - 여러 .js파일이 페이지에 사용될 시 각각 작성해야 함

위와 같이 특정 함수의 최상단에 작성 - 해당 함수에만 적용

2. 변수, 함수, 인자 등 삭제불가한 것을 삭제시 오류 발생

3. 인자명 중복시 오류 발생

기타 강력모드 MDN 문서

실무에서의 엄격 모드
클래스나 모듈(등 ES6와 그 이후의 기능들) 사용시 엄격 모드가 기본으로 적용됨
모든 문제를 방지하는 수단이 되지 않음 기억
기존 코드에 엄격모드 적용시 주의 - 예기치 못한 오류 발생 가능

---

+++ 08.09

출처 : 코딩 자율학습 도서

script 태그 사용 위치

script 태그는 항상 body 태그의 종료 태그 바로 전에 사용된다. 내부, 외부 스크립트와 방법 모두 동일

body 요소의 종료 태그 전에 script 태그를 작성하는 이유는 style 태그에서와 같다. javascript는 화면에 표시되는 웹 구성 요소에 동적 효과를 부여하는 데 더 큰 목적이 있어 웹 브라우저에 구성 요소를 처음 표시할 때 당장 실행할 필요가 없다. 따라서 HTML과 CSS해석이 끝나는 시점인 body 요소의 종료 태그 전에 script 태그를 사용하는 것이 적절하다.

당연하듯(?) 실무에서는 외부 스크립트 방식을 이용한다. (유지보수가 편하기에)

자바스크립트 오류 확인 방법

프로그래밍 언어를 실행하는 방법에는 크게 두가지 방식이 있다.

1. compile

   코드를 실행하기 전에 모든 코드를 컴퓨터가 이해할 수 있는 기계어로 한 번 변환한 후 실행하는 방식

2. interpreter

   코드를 한 번에 한 줄씩 실행하는 방식

javascript interpreter 방식으로 코드를 한 번에 한 줄씩 실행하다 보니 오류가 발생하면 오류가 발생한 시점과 줄 번호를 알려 주고, 오류 발생 시점부터 실행을 멈춘다.

선언, 할당, 초기화

변수는 초기에 값을 할당하지 않고 선언만 할 수 있다. 선언과 할당을 같이 하는 것도 가능한데, 선언과 할당을 한 번에 하면 변수를 초기화한다 부른다.

var num; => 변수를 선언

var num = 10 + 20; => 변수 num을 선언하고 할당 즉 초기화