Javascript 기본 맛보기

처음 시작하기전

자바스크립트 어디에 쓸까?

본래는 웹 브라우저에 복잡한 동적 기능 처리를 목적으로 사용되기 위한 언어이다.

node.js 와 같은 서버 환경에서도 사용되며 자바스크립트를 기반으로하는 많은 웹 앱 프레임워크들이 존재하여 널리 쓰이고 있다.

왜 배울까?

주요 웹 앱 클라이언트 애플리케이션 개발 프레임워크들의 기반 언어일 뿐 아니라

Node.js 같은 백엔드 프레임워크에도 사용되는 언어로 여러 프로그래밍 분야에 사용된다.

특히 최소 ES6 버전 이상으로 자바스크립트와 친해지지 않으면 리액트 같은 건 못한다고 봐도 무방하다.

파이썬 다음으로 가장 범용적인 언어가 아닌가 싶다.

기본 문법 맛보기

최소한의 기본, 그리고 중요하다고 생각했던 것들 위주로 정리했다.

자료형

• 가장 많이 쓰이는 기본 자료형 으로는 number, string, boolean 이 있다.

const integer = 1;
const string = "1";
const boo = 1 === 1;
const booo = 1 == 1; // true
const boooo = '1' === 1; // false
const booooo = '1' == 1; // true
const voo = 1 == true; // true
const vooo = 1 === true; // false
console.log(typeof integer); // number
console.log(typeof string); // string
console.log(typeof boo); // boolean

주의하기

• 문자열과 숫자형 자료의 더하기 연산은 문자열 연결로 간주되어 문자열로 치환된다.

• 논리형 자료 비교 연산자 사용 시 == 은 타입에 엄격하지 않은 비교 연산자로 자동으로 형변환해 비교해준다.

• === 비교 연산자는 엄격한 비교를 수행해 타입 자동 형변환 없이 타입과 값을 모두 비교한다.

변수, 상수

상수 - const

• 한번 할당되면 값 수정이 불가능함.
• 반드시 선언과 동시에 할당이 이루어져야 한다.

변수 - let

• 변할 수 있는 식별자를 만든다. 선언 시 할당하지 않아도 되고 타입과 상관없이 다른 값을 재할당 가능하다.

언제 뭘 쓸까?

• 변할 필요 없거나 변하지 말아야 하는 값을 할당할 때는 반드시 상수를 사용하자

불변성: 변경이 제한되어 의도치 않은 오류에 대한 걱정 없이 안전하게 사용할 수 있다.

var는 왜 안쓰나

let은 특정 블럭에 선언되면 해당 스코프에서만 사용할 수 있는 반면

var는 중복 선언이 가능하고 함수를 제외한 곳에서 선언된 변수는 전역적으로 사용할 수 있게 되어 예측이나 유지보수가 어려워 안정성이 떨어진다.

let 변수를 특정 블럭에 선언하면 해당 블럭에서만 생명주기를 가져 개발자가 의도한 요구 처리에만 사용될 수 있어 보다 안정적이다.

undefined

변수는 존재하지만 값이 할당되지 않았거나 자료형이 정해지지 않은 상태를 말함

null이랑 같을까?

• null 은 null 이라는 값이 할당되어 자료형이 정해진 상태를 말하며 undefined 랑 타입이 다르다. 자바랑 헷갈리지 말자.

typeof(undefined); // undefined
typeof(null); // object
console.log(undefined == null); // true
console.log(undefined === null); // false

자료형 변환

Number(string)

• 파라미터에 있는 문자열 타입 자료를 숫자로 변환하며 반드시 숫자로 변환가능한 문자열이여야 한다.

console.log(Number("21.45")); // 21.45
console.log(Number("214l")); // NaN
console.log(Number("l214")); // NaN

parseInt(string), parseFloat(string) 이랑 뭐가 다를까?

parseInt, parseFloat 은 숫자로 시작하는 문자열이라면 숫자일 때까지만 변환해준다.

console.log(parseInt('123l')); // 123

String(data)

• 해당 자료를 문자열로 변경해줌

console.log(String(123)); // "123"
console.log(String([1,2,3])); // "1,2,3"
console.log(String({})); // [object Object]
console.log(typeof String({})) // string

Boolean(data)

• 해당 자료를 논리형으로 변경해줌

0, NaN, '', null, undefined 는 false 로 변경된다.

1일차 TIL 후기

늘상 의도치 않게 많이 사용해오던 자바스크립트인데
사실 이렇게 기본적인 것들부터 정리해본적이 한 번도 없었다.

자바랑 비슷하겠지 싶어서 대충 때려맞춰서 사용해왔고 다른사람꺼 보고 참고해서 사용해왔고
그렇게 익숙해지지 않았나 생각하고 있었다.

기본기부터 다시 훑다보니 늘 헷갈려서 사용하기전 크롬 개발자 도구에 디버깅 해보던 것들도 있고

처음 알게 된 것도 있기에 익숙해졌다는 그 생각을 뒤집을 수 있게 되어 행복하다.

내일은 내가 또 뭘 모르고 뭘 놓치고 있었는지 알게 될 생각을 하니 기쁘다!

Reference

• 한빛미디어 - 혼자 공부하는 자바스크립트