다루는 내용
- 문법
- 데이터 타입
- 제어문
- 함수
1. 문법
- 대소문자를 구분
- 식별자 -> 변수, 함수, 프로퍼티, 함수 매개변수의 이름으로 관습적으로 카멜 케이스를 사용
- camelCase
- 스트릭트 모드 (엄격하게 체크하는? 것으로 자바스크림트가 실행되는 방식이 매우 많이 바뀜)
- 'use strict'
- 문장 마지막에 세미콜론을 꼭 써야 하는 건 아니지만, 세미콜론을 쓰길 권장
- 제어문에서 문장 하나만 실행하더라도 항상 코드 블록을 쓰길 권장
if(test) { console.log(test); }
- 키워드 : 특정 조작 목적 (ex. break, case etc)
- 예약어 : 키워드로 쓸 가능성이 있음 (ex. abstract, enum etc)
- 키워드와 예약어는 식별자든 프로퍼티 이름에든 쓰지 않는 편이 과거와 미래 버전 호환에 좋음
2. 데이터 타입
- 느슨한 변수 타입을 사용하기에
var
을 사용 - var 연산자는 변수를 로컬 스코프에서 정의함 (var 사용을 하지 않을 경우 전역이 되는데 관리 및 의도 파악이 어려우므로 지양
스트릭트 모드에서는 ReferenceError) - 기본적인(primitive) 타입이 존재 : Undefined, Null, Boolean, 숫자, 문자열 과 key-value 쌍의 객체 타입이 존재
- 변수를 초기화하지 않으면 자동으로 undefined 가 되지만, 변수는 항상 초기화를 권장
- null 은 빈 객체를 가리키는 포인터, 즉 null 에 typeof 를 하면 object 반환
- null == undefined --> true ( == 연산자가 암시적으로 타입 변환하기 때문)
- Boolean 은 true/false 만 갖는데,
true는 1 이 아니며 false 는 0 이 아님
- 숫자를 0으로 나눌 경우 NaN을 반환
2-1. 객체 타입의 프로퍼티와 메소드
- constructor - 객체 생성자
- hasOwnProperty(propertyName) - 해당 프로퍼티를 객체가 가지고 있는지 (고유, 상속x)
- isPrototpyeOf(object) - 해당 객체가 다른 객체의 프로토 타입인지 확인
- propertyIsEnumerable(propertyName) - 해당 프로퍼티를 반복문에서 사용할 수 있는지
- toString() - 객체를 문자열로 반환
- valueOf() - 객체를 나타내는 타입을 반환(숫자, 문자 등)
2-2. 연산자
- 덧셈연산에서 피연산자 중 하나가 문자열이라면 다른 피연산자를 문자열로 변환하고 두 문자열을 합침
var result = 5 + "25"; console.log(result) // "525"
- 관계연산에서 피연산자가 모두 문자열이라면 문자열의 코드(아스키 코드) 를 비교
var result = "Banana" < "apple" // true // 아스키코드에서 "B"는 66, "a" 는 97
- NaN은 무엇과 비교해도 다 false (심지어 NaN 과 비교해도...)
==
는 값이 일치하면 true ,===
는 값, 타입 다 일치해야 true
3. 제어문
if문 (조건문)
if(condition) { statement1 } else { statement2 }
while문 (반복문)
while(condition) { statement } // 조건이 만족하면 계속 실행
do-while문
while 을 실행하기 전에 한 번은 실행var i = 0; do { i = i+2 } while(i<10);
for문
while 과 비슷한 반복문for(var i=0; i<10; i++) { // 초기식;조건식;증감문 statement }
for-in문
객체의 프로퍼티를 나열하는 반복문for(var i in arrays) { console.log(i) // arrays 에 있는 프로퍼티들을 출력(순서 무관) }
break, continue 문
반복문을 빠져나가거나 (break) 반복문을 한 번 넘기거나(continue) 하며 제어for(var i=0; i<10; i++) { // for1 if(i==4) { continue; // i가 4가 되면 for2를 실행하지 않고 i를 5로 넘김 } for(var j=0;j<10;j++) { // for2 if(j==3) { break; // j가 3이 되면 for2 를 종료 } } }
switch 문
switch(condition) { case value : statement break; default : statement } // condition 과 case 의 value 가 일치하면 statement 실행 혹은 출력
4. 함수
함수는 function 키워드로 정의 그 뒤에 매개변수와 함수 본문을 순서대로 씀
function example(args0 ... argsN) { statments }
함수에서 매개변수를 2개 받도록 만들었어도, 꼭 2개 넘겨야 하는 건 아님 (매개변수가 일종의 배열처럼 들어가기 때문)
첫 번째 매개변수를 arguments[0] 으로 받을 수도 있음.
value1 로 받은 매개변수와 arguments[0] 의 값은 같아도, 다른 메모리 공간을 사용함. -> 즉 two-way 바인딩이 아니라 단방향 반영
- value1 의 값을 바꾸더라도 arguments[0] 의 값은 바뀌지 않음
함수 시그너처(매개변수의 타입과 개수)가 없기에 오버로딩이 불가능
(매개변수가 내부적으로 배열로 표현되기에 어떻게 보면 당연한 결과...)
생각해볼 점
- 꽤 길고 많은 내용이 들어있지만 컴퓨터 관련 전공을 들었거나, 다른 언어를 알고 있다면
아, 그렇구나
하고 쭉 훑어보면서 차이점을 알아가는(?) 정도인 것 같다. - 기초(base)는 아무리 강조해도 지나치지 않듯이 어떻게 보면 가장 중요한 부분인 것 같다.
(실제로 이정도만 알아도 코드를 짜긴 힘들어도 어느정도 읽을 순 있지 않을까?) - js 코드는 많이 접할 기회가 없는데, 스트릭트 모드를 얼마나 많이 쓰는 진 잘 모르겠다 (es6 와 타입스크립트인 요즘 추세에)
'개발 관련 > javascript' 카테고리의 다른 글
7. 함수 표현식 (0) | 2022.07.13 |
---|---|
6. 객체 지향 프로그래밍 (0) | 2022.07.13 |
5. 참조 타입 (0) | 2022.07.13 |
4. 변수, 스코프, 메모리 (0) | 2022.07.13 |
2. HTML 속의 자바스크립트 (0) | 2022.07.13 |