코어 자바스크립트 | 자바스크립트 기본 1

※본 포스팅은 개인 학습을 목적으로 작성된 것이므로 정확하지 않은 정보가 포함되어 있을 수 있음을 참고 부탁드립니다.

---

2. 자바스크립트 기본 1

1. Hello, world

- 'script' 태그 : <script> 태그 이용 시 자바스크립트 프로그램을 html 문서 대부분의 위치에 삽입 가능

- 종종 <script type="text/javascript"> 라는 코드를 본 적이 있었던 것 같은데, 이와 같은 처리는 HTML4에서 필수였으며 현재는 타입 명시가 필수가 아님

- 위의 type 속성에 이어서 language 속성도 현재는 자바스크립트가 기본 언어이므로 불필요

- 코드의 양이 많은 경우 파일을 분해하고 src 속성을 통해 HTML에 삽입 가능 

ex) <script src="/path/to/script.js"></script> 와 같이 사용 가능하며  /path/to/script.js 는 절대 경로를 나타냄. 현재 페이지에서의 상대 경로를 사용하는 것도 가능

 

*스크립트가 길어지면 파일을 분리하여 저장하는 것이 좋음. 스크립트를 별도로 저장하면 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에 성능상 이점이 있음(브라우저는 페이지가 바뀔 때마다 스크립트를 다운 받지 않고 캐시에서 가져오기 때문)

즉, 트래픽이 절약되고 웹 페이지의 속도 상승

 

2. 코드 구조

1) 문(statement): 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command) 의미

- 코드 가독성을 높이기 위해 각 문은 서로 다른 줄에 작성하는 것이 일반적

2) 세미콜론- 줄 바꿈이 있다면 세미콜론 생략 가능 (자바스크립트는 줄 바꿈이 있으면  암시적인 세미콜론으로 해석 -> 세미콜론 자동 삽입)

* 줄바꿈이 세미콜론을 의미하지 않는 경우와 세미콜론이 필요하지만 자바스크립트가 추정하지 못하는 상황도 존재 

ex) 대괄호 앞에는 세미콜론이 있다고 가정하지 않음- 코드 컨벤션에 따라 사용 여부를 정하면 될듯

3) 주석

- 스크립트의 어느 곳에나 작성 가능하며, 자바스크립트 엔진은 주석을 무시하기 때문에 주석 위치가 실행에 영향 주지 않음

- 한 줄 짜리 주석은 두 개의 슬래시로 시작  // 여기에 주석 작성

- 여러 줄의 주석은 /* */  내부에 작성         /* 여기에 주석 작성 */ 

-> 주석 단축키는 윈도우의 경우 단축키는 ctrl + / 이고 여러 줄 주석은 ctrl + shift + /   이고 mac은 cmd + / 과 cmd + shift + /

 

3. 엄격 모드
- 자바스크립트의 호환성 이슈를 해결하기 위해 도입

- 2009년까지는 자바스크립트 창시자들의 실수나 불완전한 부분이 언어 안에 영원히 박제되는 위험 지속 -> ES5에서 새로운 기능 추가되고 하위 호환성 문제를 방지하기 위해 변경 사항 대부분이 ES5 기본 모드에서 활성하되지 않도록 설계

** 단 use strict 라는 지시자가 사용될 때만 변경사항이 활성화됨

- 사용법은 'use strict'를 스크립트 최상단에 작성 -> 이 경우 스크립트 전체가 모던한 방식으로 동작

- 'use strict' 위에서는 주석만 사용할 수 있으며, 일단 엄격 모드가 적용될 경우 취소할 수 없음

- 브라우저 콘솔에서는 use strict가 기본 적용되지 않기 때문에 'use strict' 입력 후 줄을 바꾼 후 원하는 스크립트 입력 진행

 

4. 변수와 상수

-  변수(variable): 데이터를 저장할 때 사용

-  아래와 같이 message 라는 이름을 가진 변수를 생성(선언)

let message; // 'message'라는 이름을 가진 변수 선언

message = 'hello' // message 에 'hello' 문자열 저장

alert(message) // 변수와 연결된 메모리 영역에 저장되어 변수를 통해 문자열에 접근

// 변수 선언 시 한 줄에 여러개를 선언하는 것 보다 한 줄에 한 개의 변수를 선언해야 가독성이 높아짐
let user = 'John';
let age = 25;
let message = 'Hello';

- 변수 명명 규칙

1) 변수명에는 문자와 숫자, $, _만 들어갈 수 있음

2) 첫 글자에 숫자 올 수 없음

3) 카멜 표기법(userName), 스네이크 표기법(user_name) 등이 있음

4) 대소문자 구별(apple 과 Apple 은 다름)

5) 예약어는 변수명으로 사용 불가

 

- 상수(constant): 변하지 않는 수(재할당 불가 -> 재할당 시도 시 에러 발생)

const myBirthday = '18.04.1982';

myBirthday = '01.01.2001'; // error, can't reassign the constant!

 

* var, let, const 를 사용해 변수 선언 가능

- let: 모던한 변수 선언 키워드

- var: 오래된 변수 선언 키워드

- const: let과 비슷하지만, 변수의 값 변경 불가

 

 

5. 자료형

1) null

- 다른 언어에서의 null이 '존재하지 않는 객체에 대한 참조', '널 포인터'를 나타낼 때 쓰인다면, 자바스크립트에서는 '존재하지 않는 값', '비어 있는 값', '알 수 없는 값'을 나타냄

- typeof(null)을 호출하면 object로 나오지만, 이는 하위 호환성을 유지하기 위해 이런 오류를 수정하지 않고 남겨둔 것. 언어 자체의 오류이므로 null 이 객체가 아님에 유의할 것

 

2) undefined

- null과 같이 자신만의 자료형을 형성하고 '값이 할당되지 않은 상태'를 나타낼 때 사용 

let age
alert(age); // 변수 선언 후 값을 할당하지 않았으므로 'undefined'가 자동 할당되어 출력

- 개발자가 변수에 undefined를 명시적 할당할 수도 있으나, 권장하지 않음

 

 

6. alert, prompt, confirm을 이용한 상호작용

- alert: 사용자가 '확인' 버튼을 누릴 때까지 메시지를 보여주는 모달 창이 떠있음

*'모달'이라는 단어엔 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미 내포

alert('hello!');

 

- prompt: 브라우저에서 제공하는 prompt 함수는 인수 2개를 받고, 함수가 실행되면 텍스트 메시지와 입력 필드, 확인/취소 버튼이 있는 모달창을 띄워줌. 사용자가 확인 버튼을 누르면 true, 취소나 esc를 누르면 false 반환.

result = prompt(title, [default]);

// title: 사용자에게 보여줄 문자열
// default: 입력 필드의 초깃값(선택값)=> [] 대괄호는 매개변수가 필수가 아닌 선택값이라는 의미


// 예시
let menu = prompt('메뉴를 골라주세요.', 피자);
alert(`주문하신 메뉴는 ${menu} 입니다.`);

*Internet Explorer에서는 '기본값'을 설정해 주면 사용자가 깔끔한 프롬프트를 볼 수 있다.

let test = promprt('test', '');

 

- confirm: 매개변수로 받은 question과 확인 및 취소 버튼이 있는 모달 창 보여줌

사용자가 확인 버튼을 누르면 true,  그 외의 경우는 false 반환

 

=> 위 세 함수들은 모두 모달 창을 띄워주는데, 창이 떠있는 동안 스크립트의 실행이 일시 중단됨. 더불어 두 가지 제약사항이 있음.

1) 모달 창의 위치는 브라우저가 결정하며, 일반적으로 브라우저 중앙에 위치

2) 모달 창의 모양은 브라우저마다 다름. 개발자가 창의 모양을 수정할 수 없음

 

 

7. 형 변환

- 문자형으로 변환

let value = true;
alert(typeof value); // boolean

value = String(value); // value에 'true' 라고 문자열로 저장
alert(typeof value) // string

 

- 숫자형으로 변환

alert('6' / '2'); // 3, 문자열 -> 숫자형으로 자동변환 후 연산

let str = '123';
alert(typeof str); // string

let num = Number(str); // string 123이 number 123으로 변환
alert(typeof num); // number

let age = Number('임의 문자열 123');
alert(age); // 숫자 이외 글자가 들어있는 문자열을 숫자형으로 변환 시 NaN, 형 변환 실패

숫자형으로 변환 시 적용 규칙

전달받은 값	형 변환 후
undefined	NaN
null	0
true / false	1 / 0
string	문자열 처음과 끝 공백 제거. 공백 제거 후 남아있는 문자열 없을 시 0, 그렇지 않을 경우 문자열에서 숫자를 읽음. 변환 실패 시 NaN

 

- 불린형으로 변환

전달받은 값	형 변환 후
숫자 0, 빈 문자열, null, undefined, NaN (직관적으로 비어있다고 느껴지는 값)	false
그 외의 값	true

* 문자열 0은 true

 

 

8. 기본 연산자와 수학

- 크게 단항, 이항, 피연산자로 나뉨

let x = 1; 
x = -x; 
console.log(x); // -1, 단항 마이너스 연산자에 의해 부호가 변경됨

// 피연산자: 연산자가 연산을 수행하는 대상으로 4 * 2의 경우 4와 2가 피연산자가 된다. '인수'라고 불리기도한다.

let x = 1;
let y = 3;
console.log(y - x); // 2, 이항 마이너스 연산자는 뺄셈을 수행

 

- 자바스크립트에서의 수학 연산자

덧셈 연산자	+
뺄셈 연산자	-
곱셈 연산자	*
나눗셈 연산자	/
나머지 연산자	%
거듭제곱 연산자	**

* 나머지 연산자와 거듭제곱 연산자의 경우 별도 예시 추가

// 나머지 연산자 % : a % b 를 수행할 경우 a를 b로 나눈 후 그 나머지를 정수로 반환
console.log(5 % 2); // 5를 2로 나눈 후 나머지 1 출력


// 거듭제곱 연산자 ** : a ** b 를 평가하면 a를 b번 곱한 값이 반환
console.log(2 ** 2); // 4 (2 * 2)
console.log(2 ** 3); // 8 (2 * 2 * 2)

// 거듭제곱 연산자는 정수가 아닌 숫자에 대해서도 동작
console.log(4 ** (1/2)); // 2 (1/2 거듭제곱은 제곱근)
console.log(8 ** (1/3)); // 2 (1/3 거듭제곱은 세제곱근)

 

* 연산자 우선순위 참고

https://developer.mozilla.org/en-US/docs/web/javascript/reference/operators/operator_precedence

Operator precedence - JavaScript | MDN

 

- 할당 연산자

// 무언가를 할당할 때 쓰이는 = 도 연산자이다.
let x = 2*2+1;
console.log(x); // 5

// 값을 반환하는 할당 연산자
// x = value 로 호출하면 value가 x에 쓰여지고, 이에 더하여 value 반환

let a = 1;
let b = 2;

let c = 3-(a=b+1)
console.log(a); // 3
console.log(b); // 0

 

- 증감 연산자

// 숫자를 하나 늘리거나 줄이는 것으로 자주 사용

// 증가 연산자 ++ 사용 시 변수 1 증가
let counter = 2;
counter++; // 이 표현식은 counter = counter + 1 과 동일하게 동작
console.log(counter); // 3


// 감소 연산자 -- 사용 시 변수 1 감소
let counter = 2;
counter--;
console.log(counter); // 1

* 전위형과 후위형의 차이가 있으니 잘 살펴볼 것 (++counter, counter++)

// 기본 동작 외 예시하나 추가(증감 연산자의 우선순위가 다른 대부분의 산술 연산자보다 높기 때문에 평가가 우선 이뤄짐)

let counter = 1;
console.log(2 * ++counter); // 4

let counter = 1;
console.log(2 * counter++) // 2

 

- 쉼표 연산자

let a = (1+2, 3+4)
console.log(a); // 7 즉, 뒤에 이루어진 3+4의 결과값 7만 a에 담김. 첫번째 표션식 1+2가 평가되지만 그 결과는 버려짐

// => 표현식 각각 모두 표현되지만, 마지막 표현식의 평가만 반환

 

 

9. 비교 연산자

- 기본 비교 연산자

// 수학 시간에 배운 연산자와 거의 비슷

a > b, a < b // 보다 큼/작음
a >= b, a <= b // 보다 크거나/작음, 보다 작거나/같음
a == b // 같음(동등) *주의: a = b 는 할당을 의미하기 때문에 다르다는 점
a != b // 같이 않음(부등)

 

- null 과 undefined 비교

// 일치 연산자 === 사용하여 비교
console.log(null === undefined); // false

// 동등 연산자 == 를 사용하여 null과 undefined 비교
console.log(null == undefined); // true => 특별한 규칙이 적용되어 true 반환

 

- null 과 0 비교

// null을 숫자형으로 변환 시: 0
// undefined를 숫자형으로 변환 시: NaN

conosle.log(null > 0) // (1) false
console.log(null == 0) // (2) false
console.log(null >= 0) // (3) true

// (3)에서 null이 0보다 크거나 같다고 했는데, (1)과 (2)는 false가 됐다.
// 그 이유는 == 와 기타 비교연산자(<, >, <=, >=)의 동작 방식이 다르기 때문이다.
// (3)에서는 기타 비교연산자의 동작 원리에 따라 null이 숫자형으로 변환되어 0이 된다.
// 하지만 동등연산자(==)의 경우 피연산자가 undefined 혹은 null일 때 형변환을 하지 않는다. 
// 따라서 아까 null vs undefined의 예시일 때만 true를 반환한다.

 

 

- 주의사항: 개발 시 중요한 예외 처리와 관련하여 아래와 같은 방법을 사용해 예외 상황을 미리 예방할 수 있음

1) 일치 연산자 === 를 제외한 비교 연산자의 피연산자에 undefined 나 null 이 오지 않도록 특별히 주의 할 것

2) 명확한 의도를 갖고 있지 않은 이상 undefined 나 null 이 될 가능성이 있는 변수가 <, >, <=, >= 의 피연산자가 되지 않도록 주의 할 것. 만약 변수가 undefined 나 null 이 될 가능성이 있다고 판단되면, 따로 처리하는 코드 추가해야함

 

 

---

👉공유하면 좋은 내용

1) &&의 우선 순위가 || 보다 높음

 

2) if를 || 또는 &&로 대체하지 말 것

 

3) nullish 병합 연산자 ?? 를 사용하면 피연산자 중 '값이 할당된' 변수를 빠르게 찾을 수 있음. 다만 괄호 없이 ??를 || 나 && 와 함께 사용하는 것은 금지되었음

 

4) ? 오른쪽엔 break나 continue 가 올 수 없음 (때문에 ?를 if 대신 사용하면 안됨)