다루는 내용

1. 문법
2. 데이터 타입
3. 제어문
4. 함수

1. 문법

• 대소문자를 구분
• 식별자 -> 변수, 함수, 프로퍼티, 함수 매개변수의 이름으로 관습적으로 카멜 케이스를 사용

  camelCase

• 스트릭트 모드 (엄격하게 체크하는? 것으로 자바스크림트가 실행되는 방식이 매우 많이 바뀜)

  ‘use strict’

• 문장 마지막에 세미콜론을 꼭 써야 하는 건 아니지만, 세미콜론을 쓰길 권장
• 제어문에서 문장 하나만 실행하더라도 항상 코드 블록을 쓰길 권장

1
2
3

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. 객체 타입의 프로퍼티와 메소드

1. constructor - 객체 생성자
2. hasOwnProperty(propertyName) - 해당 프로퍼티를 객체가 가지고 있는지 (고유, 상속x)
3. isPrototpyeOf(object) - 해당 객체가 다른 객체의 프로토 타입인지 확인
4. propertyIsEnumerable(propertyName) - 해당 프로퍼티를 반복문에서 사용할 수 있는지
5. toString() - 객체를 문자열로 반환
6. valueOf() - 객체를 나타내는 타입을 반환(숫자, 문자 등)

2-2. 연산자

• 덧셈연산에서 피연산자 중 하나가 문자열이라면 다른 피연산자를 문자열로 변환하고 두 문자열을 합침

1
2

var result = 5 + "25";
console.log(result) // "525"

• 관계연산에서 피연산자가 모두 문자열이라면 문자열의 코드(아스키 코드) 를 비교

1
2

var result = "Banana" < "apple" // true
// 아스키코드에서 "B"는 66, "a" 는 97

• NaN은 무엇과 비교해도 다 false (심지어 NaN 과 비교해도…)
• == 는 값이 일치하면 true , === 는 값, 타입 다 일치해야 true

3. 제어문

1. if문 (조건문)

1
2
3
4
5

if(condition) {
  statement1
} else {
  statement2
}

2. while문 (반복문)

1
2
3

while(condition) {
statement
} // 조건이 만족하면 계속 실행

3. do-while문
   while 을 실행하기 전에 한 번은 실행

1
2
3
4

var i = 0;
do {
i = i+2
} while(i<10);

4. for문
   while 과 비슷한 반복문

1
2
3
4

for(var i=0; i<10; i++) {
//    초기식;조건식;증감문
statement
}

5. for-in문
   객체의 프로퍼티를 나열하는 반복문

1
2
3

for(var i in arrays) {
console.log(i) // arrays 에 있는 프로퍼티들을 출력(순서 무관)
}

6. break, continue 문
   반복문을 빠져나가거나 (break) 반복문을 한 번 넘기거나(continue) 하며 제어

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

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 를 종료
     }
   }
}

7. switch 문

1
2
3
4
5
6

switch(condition) {
  case value : statement
     break;
  default : statement
} 
// condition 과 case 의 value 가 일치하면 statement 실행 혹은 출력

4. 함수

• 함수는 function 키워드로 정의 그 뒤에 매개변수와 함수 본문을 순서대로 씀

1
2
3

function example(args0 ... argsN) {
  statments
}

• 함수에서 매개변수를 2개 받도록 만들었어도, 꼭 2개 넘겨야 하는 건 아님 (매개변수가 일종의 배열처럼 들어가기 때문)
• 첫 번째 매개변수를 arguments[0] 으로 받을 수도 있음.
• value1 로 받은 매개변수와 arguments[0] 의 값은 같아도, 다른 메모리 공간을 사용함. -> 즉 two-way 바인딩이 아니라 단방향 반영

  value1 의 값을 바꾸더라도 arguments[0] 의 값은 바뀌지 않음

• 함수 시그너처(매개변수의 타입과 개수)가 없기에 오버로딩이 불가능
  (매개변수가 내부적으로 배열로 표현되기에 어떻게 보면 당연한 결과…)

생각해볼 점

• 꽤 길고 많은 내용이 들어있지만 컴퓨터 관련 전공을 들었거나, 다른 언어를 알고 있다면 아, 그렇구나 하고 쭉 훑어보면서 차이점을 알아가는(?) 정도인 것 같다.
• 기초(base)는 아무리 강조해도 지나치지 않듯이 어떻게 보면 가장 중요한 부분인 것 같다.
  (실제로 이정도만 알아도 코드를 짜긴 힘들어도 어느정도 읽을 순 있지 않을까?)
• js 코드는 많이 접할 기회가 없는데, 스트릭트 모드를 얼마나 많이 쓰는 진 잘 모르겠다 (es6 와 타입스크립트인 요즘 추세에)