Skip to content

Latest commit

 

History

History
138 lines (119 loc) · 12 KB

20210310.md

File metadata and controls

138 lines (119 loc) · 12 KB
Raw

JavaScript

인상 깊은 조언

  • Library나 Framework의 공식문서를 꼭 읽어볼 것
  • 예습할 때 이해 안되는 부분은 일단 넘어가고 수업시간에 설명을 듣고 질문할 것
  • 면접이나 발표 시 설명할 때는 떨려서 무엇부터 해야하는지 당황하게 된다. 머릿속에 이미지를 그려두어야 한다.
  • 이력서를 전략적으로 낼 것. 넣어도 안 갈 회사에 지원을 먼저 해서 면접연습을 한 후 적당히 괜찮은 곳에 지원하여 나의 실력을 가늠해보고, 합격했더라도 꼭 가고싶은 곳에 추가적으로 지원하려면 포기할 줄 알아야 한다.

변수(Variable)

할당 (Assignment)

  • 대입, 저장으로도 불리는 할당의 개념을 알아보자.
var score = 80;

위 코드는 아래 두 줄의 코드와 같이 나눠서 실행되는데, 그 이유는 변수 선언문의 실행 시점은 런타임 이전에 실행해야만 하기 때문이다.

var score;
score = 80;
  • 선언: var score;으로 변수가 선언되는 순간 score라는 식별자는 undefined라는 값을 가진 메모리 주소를 가리킨다.
  • 할당: score에 80이라는 값을 할당하면 같은 주소의 메모리공간에 있는 값을 지운 후 새 값을 쓰는 것이 아니라 비어있는 메모리 공간에 값을 넣고 해당 공간을 가리키게끔 식별자와 매핑된 주소만 바꾼다.
    • 비어있는 메모리공간을 찾아내 값을 넣는다는 것은 곧 어떤 식별자도 가리키고 있지 않는(=사용되고 있지 않은) 공간을 찾아낸다는 것.
    • 할당된 값은 allocate된 공간으로 가서 lock이 걸려 안전하게 보호된다. 보호가 풀리는 것을 해제(release)된다고 한다. 별도로 '지운다'는 행위는 들어가지 않음.
    • 재할당 하는 경우 또다른 메모리 공간에 값이 씌여지고 새로운 메모리 주소를 식별자가 가리키는 것이다.
  • 최적화: 많이 쓰는 값들(e.g. 정수 1~100)을 미리 메모리공간에 만들어두는 것. ECMAScript에는 따로 규정되어있지 않지만 브라우저에서 나름 최적화를 했을 것으로 추정
    • 그러나 원시값은 항상 새롭게 만든다는 것이 원칙이다. 원시값을 할당한 변수를 또다른 변수에 할당했을 때, 두 변수에 담긴 원시값이 바뀌면 혼란이 초래되니까.

식별자와 네이밍

  • 식별자는 일정 범위(파일명은 해당 폴더, 변수는 해당 스코프) 안에서 고유한 이름을 갖는다.
  • 변수 이름은 문자, 숫자, 언더스코어(_)와 달러기호($)로 이루어져있으나, 첫 글자로 숫자는 올 수 없다.
    • 대문자와 소문자를 구분한다.
    • 변수 이름에 한글 등의 다른 언어도 사용 가능하긴 하지만 권장하지 않음
  • JS엔진이 쓰려고 이미 선점해둔 예약어는 식별자로 쓸 수 없다.(=유효하지 않은 식별자)
  • 변수의 의미와 목적을 이해할 수 있도록 명확히 네이밍해야하며, 네이밍 컨벤션은 다음과 같이 나뉜다.
    • 카멜케이스: firstName처럼 두번쨰 단어 첫 글자부터 대문자, 가장 일반적인 변수/함수 네이밍
    • 스네이크케이스: first_name처럼 언더스코어와 소문자로 구성, JS에서는 잘 안 쓰인다.
    • 파스칼케이스: FirstName처럼 대문자로 시작, 생성자함수 클래스 이름으로 쓰임
    • 헝가리언케이스: strFirstName... 근데 잘 안쓰임

표현식(expression)과 문(statement)

  • 값(value): 표현식이 평가되어져서 만들어진 결과물로, 메모리 안에 들어가는 알맹이
  • var a = 1 + 2;에서 1+2는 3이라는 값을 만들어내는 명령의 표현식이다.
    • 이 때 1+2라는 식이 3이 되는 행위를 평가(evaluation)인데, 계산이라고 하지 않는 이유는 숫자에 국한되지 않기 때문이다.
  • 리터럴(literal): 사람이 이해하는 기호로 값을 만들어내는 표기방식. JS엔진이 유니코드 1을 읽을 경우 사람들이 이해하는 '숫자 1'로 인식되는 작업이 이미 되어있다.
    • ;(semicolon)은 명령의 끝을 나타내는 기호, 실행단위를 구분하는 기준으로 기능한다.
    • 리터럴 자체도 곧 표현식이다. 값으로 평가되기 때문이다.
  • 표현식은 값이라고 할 수 있을까? 표현식은 값으로 평가되는 문이기 때문에 값이라고 할 수 있다. 또한 값이기 때문에 변수에 할당할 수 있다. (하지만 값이 표현식인 것은 아니다.)
  • 문(statement): JS엔진에게 내리는 명령의 최소 실행단위, 세미콜론으로 끝난다.
    • 문법적읜 의미가 있는 최소 단위는 토큰(token)이라고 부른다.
    • 표현식은 문(값으료 평가되는 문이 곧 표현식이니까)이지만, 표현식이 아닌 문도 있다.
    • 표현식인 문인지 아닌지는 변수에 할당할 수 있는지 여부와 동일하므로 변수에 할당해보면 된다.
  • 삼항조건문은 표현식인 문이다. var x = 10 > 5 ? '커' : '안커'; 가능

데이터타입

  • JavaScript에는 7개의 데이터타입이 있는데, 크게는 원시타입(Primitiva type)과 객체 타입(Object/Reference type)으로 나뉜다.

원시 타입 (Primitive Type)

  1. number(숫자): C언어와 같은 다른 프로그래밍 언어에서는 정수(integer)와 실수(float)로 나누어 관리하는데, JS는 비개발자의 실수를 막기 위해 number라는 타입 하나로 같이 관리한다. (더 정확히는 모든 숫자를 실수로 만들어 부동소수점형으로 관리하므로 메모리 측면에서는 손해)
  • 숫자 타입은 다 리터럴이며, Infinite, -Infinite, NaN도 숫자 타입으로 취급
1 * 'a';
  • 위 코드에서 다른 언어들은 타입에러가 뜨지만 JS에서는 NaN이 결과값으로 주어진다.
  1. string(문자열): 다른 언어(C언어)에서는 문자열을 배열, 즉 객체로 취급하여 관리하기 어렵지만, JS에서는 편하게 관리할 수 있도록 객체가 아닌 원시타입으로.
  • 따옴표를 꼭 붙여줘야 하는데, 붙이지 않을 경우 식별자로 인식한다. 따옴표는 '나 "나 `를 일관되게 써야한다.
  • template literal : 벡틱(`)으로 묶인 문자열로, 개행시 ASI (자동 세미콜론 처리)되느라 multiline이 안 되던 그냥 따옴표와는 달리 이제는 줄바꿈이 가능해졌다.
    • 표현식을 삽입하는 것이 가능해졌다. My name is {$first} {$last}.
  1. boolean(true or false): 판별과 관련된 2진 값
  2. undefined: 암묵적으로 var 키워드로 선언된 변수에 할당되는 값으로, 내가 할당할 일은 없다.
  3. null: 굳이 내가 값이 없다는 것을 명시하고 싶을 때 할당하는 값. 그러나 굳이 null을 할당할 시간에 변수의 스코프를 좁게 만들어 변수 자체를 지역변수로 돌리고 빨리 소멸시키는 것이 낫다.
  4. symbol: ES6에서 도입되어 객체의 property key가 중복되지 않도록 하는 특별한 값인데, 알 필요 없고 어려워서 지금은 쓸 일 없으니 SKIP
  • 좌/우항 둘 다 숫자인 경우가 아니면 + 연산자로 문자열을 이어붙일 수 있다.

데이터 타입의 필요성

  • 저장: 데이터 타입을 알아야 필요한 메모리공간을 알고 확보할 수 있다.
  • 읽기: 꺼내올 때 또한 데이터 타입이 무엇인지 알아야 선두주소 이후의 몇바이트를 꺼내와야 하는지 알아야.
  • 해석: 2진수 형태로 봤을 때 숫자1과 문자1은 천지차이. 데이터 타입이 뭔지 알아야 제대로 해석할 수 있다
  • 모든 언어는 다 데이터 타입이 있다. 구분기준과 몇 바이트를 쓰는지 속도만 좀 다를뿐.
    • 그래서 첫 언어를 깊이있게 배우면 다른 언어 배울 때 수월.

동적 타이핑

  • 타입이 동적으로 결정되는 것
  • var x = 1;에서 변수 x는 타입이 없다. 데이터에 타입이 있는 것.
  • typeof x;처럼 typeof 뒤에 표현식을 입력하면 해당 표현식의 타입이 나온다.
  • 위에서 number이 나오지만, 이후 문자열이나 불리언을 할당 할 수 있다.
  • 이와 반대로 정적 타입 언어인 C언어나 Java는 int x = 1;의 형태로 변수 선언 시 타입을 지정하며, 그 외의 타입을 할당할 땐 에러가 난다.
  • 동적 타입 언어는 타입을 할당할 때 신경쓰지 않아도 되어 사용하기는 편하겠지만, 교차하며 할당하는 경우 현재 들어있는 값을 추정하기 어렵고 이는 에러로 이어진다.
    • 이를 보완하기 위해 JS를 정적타입언어처럼 쓸 수 있는 TypeScript가 생겼다.
    • 재할당을 하지 않는 것이 가장 좋은 방법. 변수를 그냥 새로 만들어라.
    • 변수를 만들 때는 꼭 필요할 때만 만들고, 스코프를 좁게 설정해 사용 후 빨리 소멸되게끔 하며, 재할당하지 않도록 const 상수를 사용한다.

연산자

  • 연산자의 부수효과 (side effect)를 주의할 것
    • var x = 1;하고 x++;이나 x--;을 실행시키면 변수에 값이 재할당되는데 실제 변수 값에 영향을 주는 부수효과 때문에 실수리스크가 커진다. 컨벤션상 금지시킨 회사도 있을 정도니 x = x+1;로 풀어서 쓸 것
  • 비교연산자 =도 두개만 오면 아래와 같이 타입을 자동으로 일치시키니 쓰지 말고, ===을 사용할 것
var x = 1;
console.log(x == 1);	//true
console.log(x == '1');	//true
  • 삼항조건연산자는 표현식인 문이기 때문에 변수에 할당할 수 있다.
  • 연산자 우선순위는 굳이 외울 필요 없이 우선하는 연산을 그룹연산자로 묶어주자.

제어문(control flow statement)

  • 제어문은 나쁘다. 가독성을 떨어지게 하기 때문이다. 함수형 언어인 JS에서 피할 수 있는 방법이 있으니 제어문은 피해야 한다.
  • if문은 3항조건연산자로 대체하거나 단축평가문 등으로 대체한다.
  • for문은 콜백(lambda)함수로 대체한다.

블록문: 0개 이상의 문이 중괄호로 묶여있는 것.

  • 블록문 안의 문들은 항상 함께 실행된다.
  • scope의 의미를 가지게 된다.

if문: true/false로 평가되는 표현식(=조건식)과 항상 함께 온다.

  • 조건식이 true일 때 실행된다.
  • c.f. 함수에도 코드블록이 있지만 정의만 되고 호출되기 전까진 실행되지 않는다.
    • 호출되면 다시 함수선언 코드위치로 올라가 실행되므로 가독성이 나빠진다.
  • if... else문: else문은 if문의 조건식이 false로 평가될 때 실행시킬 코드가 있으면 쓰는 옵션이다.
  • else if로 또다른 조건식을 추가할 수 있다.
  • if문과 else문에서는 문이 1개인 경우 코드블럭 생략 가능
  • 삼항조건연산자: if... else문을 대체하여 쓸 수 있으며 괄호를 통해 else if도 만들 수 있다.

switch문: 표현식이 들어와서 값이 같은 case의 코드로 가서 실행한다. 그러나 break를 걸어주지 않으면 코드블럭을 빠져나가지 않고 해당 case 이후의 코드를 실행시켜나간다.

반복문 (while, do ... while)

  • front-end에서 서버에게 받는 데이터는 무조건 배열이기 때문에 반복문으로 순회하며 해결해야 하므로 반복문을 잘 사용해야만 한다.
  • for (선언과 할당문; 조건문; 증감문){코드블럭}
    • for문 안 선언과 할당을 처음으로 한다.
    • 조건문이 true일 경우 코드블록을 실행 후 증감문을 실행한다.
    • 증감문 실행 후에는 다시 조건문으로 간다.
  • 순서가 뒤죽박죽이기 때문에 실무에선 쓰지 않는 가독성 나쁜 코드. 게다가 증감문이 i++의 형태로 올경우 더더욱 가독성 저하

느낀 점

  • 가독성은 아무리 강조해도 부족하지 않다.
  • JS 특성이나 바람직하지 않은 코딩 때문에 실수가 잦아지는 포인트를 잘 설명해주셔서 큰 도움이 된다.