React 공부 전 알아두면 좋은 Javascript 정보

'use strict'

2009년 ES5가 등장했을 때, 이전 자바스크립트와 호환되지 않은 기능들이 많이 추가됐습니다. 이는 실행시 문제를 일으킬수 있었습니다. 그래서 ES5의 기본모드에서는 변경사항들이 활성화되지 않도록 설정해서, 하위 버전들과의 호환성 문제를 해결했습니다. 근데, 최신 변경사항들을 사용하고 싶은 사람들이 있지 않겠습니까? 자바스크립트 최상단에 'use strict'라고 적어주면, 최신 변경사항들이 활성화돼서 최신 버전을 사용할 수 있습니다. 하위 버전과의 호환성 문제는 생기겠죠. 참고로 함수만 엄격모드를 사용하고 싶을 때는, 함수 제일 앞에 'use strict'를 쓰면 됩니다. 

 

변수에 하이픈(-)을 사용할 수 없습니다

HTML이나 CSS 속성에 하이픈(-)이 들어가는게 많습니다. background-color, font-size 등이 있죠. 그래서 이런 것들의 이름을 변경해서 사용합니다. 카멜케이스 형식으로 말이죠. 카멜케이스는 변수에 여러단어가 들어가 있으면 첫 단어를 제외하고, 중간단어의 첫글자만 대문자로 만드는 형식입니다. 앞의 케이스에서 background-color는 backgroundColor가 되고, font-size는 fontSize가 될 것입니다. 속성에 카멜케이스를 써야한다고 배웠는데, 하이픈(-)을 사용할 수 없으니, 카멜케이스를 쓸 수밖에 없다고 말하는게 맞겠네요. class는 한 단어이지만, 예약어로 돼 있기 때문에 className을 사용합니다.

 

화살표 함수

화살표함수는 기존 함수형태를 축약한 방식입니다. 짧게 줄여졌기 때문에 쓰기 쉽지만, 동시에 축약시킨부분이 많기 때문에 모르면 소스코드를 이해하기 힘듭니다. 아래 세가지 예는 동일한 결과값을 리턴합니다. 기본적인 내용을 모르는 상태에서 세번째 함수 선언문을 본다면 멘붕에 빠지기 쉽죠. 제가 그랬거든요.

 

typeof

자바스크립트 결과물만보고는 이게 문자열인지, 객체인지 헷갈릴때가 많습니다. 그럴때는 typeof 명령어를 이용해서 그 결과값이 무엇인지를 정확하게 아는것이 필요합니다. 문자열이라면 문자열 내장함수를 쓸 수 있을 것이고, 배열이라면 map이나 filter같은 함수를 쓸 수 있을테니까요. 타입을 잘 몰라서 왜 이 함수를 쓸수 없지라고 고민하는 시간이 많이 줄었으면 합니다. 변수나 리턴값의 정확한 타입을 알고 있는 것이 중요합니다.