본문 바로가기
개발 관련/javascript

3. 언어의 기초

by lazysnack 2022. 7. 13.

다루는 내용

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

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

  1. constructor - 객체 생성자
  2. hasOwnProperty(propertyName) - 해당 프로퍼티를 객체가 가지고 있는지 (고유, 상속x)
  3. isPrototpyeOf(object) - 해당 객체가 다른 객체의 프로토 타입인지 확인
  4. propertyIsEnumerable(propertyName) - 해당 프로퍼티를 반복문에서 사용할 수 있는지
  5. toString() - 객체를 문자열로 반환
  6. 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. 제어문

  1. if문 (조건문)

    if(condition) {
    statement1
    } else {
    statement2
    }
  2. while문 (반복문)

    while(condition) {
    statement
    } // 조건이 만족하면 계속 실행
  3. do-while문
    while 을 실행하기 전에 한 번은 실행

    var i = 0;
    do {
    i = i+2
    } while(i<10);
  4. for문
    while 과 비슷한 반복문

    for(var i=0; i<10; i++) {
    //    초기식;조건식;증감문
    statement
    }
  5. for-in문
    객체의 프로퍼티를 나열하는 반복문

    for(var i in arrays) {
    console.log(i) // arrays 에 있는 프로퍼티들을 출력(순서 무관)
    }
  6. 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 를 종료
      }
    }
    }
  7. 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