초보 개발자 자바스크립트 정복기

초보 개발자 자바스크립트 정복기.

 

안녕하세요. 독일 개발자 초록이입니다.

오늘은 전에 언급했듯이 자바스크립트 기초들

그리고 ES6에서 바뀌고 추가된 사항들 몇 가지를

아주 쉽게 전혀 비전문적이게 알아보려 합니다.

 

 

목차

• var?? 대신 let과 const
• function?? arrow function!!

 

1. var?? 대신 let과  const

 

 자바스크립트를 배워 보신 분들은 var에 대해서 알고 계실 텐데요.

var의 장점이자 단점 중 하나는 같은 이름의 변수가 여러 번 정의되어도

작동한다는 것입니다.

 

Code :

var land = 'korea';
console.log(land);

var land = 'germany';
console.log(land);

Result :

korea
germany

 이는 같은 변수의 이름을 계속 선언하여 사용할 수 있어 편리해 보이고 외우기 쉬워 보이나,

사실 실제로 코드를 작성, 개발 과정에서는 골칫덩어리입니다.

그러하여 ES6에서 let과 const라는 개념이 도입되었습니다.

 

자 그렇다면 이렇게 let 혹은 const를 같은 이름의 변수로 2번 사용하면 어떻게 될까요?

Code : 

let land = "korea";
console.log(land);

let land = "germany";
console.log(land);

const country = "korea";
console.log(country);

const country = "germany";
console.log(country);

Result : Uncaught SyntaxError: Identifier 'land' has already been declared
          Uncaught SyntaxError: Identifier 'country' has already been declared

 

 각각 모두 변수가 이미 선언되었음을 알리는 에러가 뜨게 됩니다.

그렇다면 let과 const의 차이는 무엇일까요??

 

Code : 

let land = "korea";
console.log(land);

land = "germany";
console.log(land);

 

Result : 

korea
germany

 이번에는 에러 없이 올바른 값이 출력되는 걸 볼 수 있습니다.

그렇다면 const는 어떨까요??

 

Code:

const country = "korea";
console.log(country);

country = "gemany";
console.log(country);

Result : Uncaught TypeError: Assignment to constant variable.

 

 그렇습니다.

let은 변수를 중복 선언하는 것은 불가하나, 이미 선언된 변수의 값을 새로운 값으로 할당하는 게 가능합니다.

const는 변수를 중복 선언하는 것이 불가하며, 이미 선언된 변수의 값을 바꾸는 것도 불가합니다.

 

 이로 개발자 스스로 필요에 따라 추후 값이 변경될 변수를 let 그렇지 않은 변수를 const로 사용할 수 있습니다.

더 이상 var 보다는 최신 ES6를 이용해서 let과 const로 사용하는 것을 추천드립니다.

 

2. fcuntion?? arrow function!!

 

 ES5에서 ES6로 넘어오면서 가장 크게 변화한 것 중 한 가지가 function입니다.

이로 인해 코드가 짧아져 가독성이 좋아지게 되었는데, 사실 가장 큰 변화는 this 키워드입니다.

(this 키워드는 처음 헷갈릴 수 있습니다. 이해가 안 되신다고 머리 아파하지 마시고 넘어가세요.

추후 프로그래밍에 익숙해 지신 뒤 다시 보시거나,

실제 프로젝트에서 언젠가 사용하게 되신다면 그때는 이해가 빠르게 되실 겁니다.

참고로 객체지향 언어에서 많이 사용합니다. ex: 자바, C#.. 등등)

 

그렇다면 간략하게나마 알아봐야겠죠?

1. arrow function은 어떻게 사용하는 걸까요?
2. this에 관한 간략한 정보.

 

무슨 말인지 알아보시죠.

 

ES5 :

function sayHello() {
	console.log("hello");
}

sayHello();

function sayBye(text) {
	console.log(text);
}

sayBye("bye bye");

 

ES6 :

const sayHello = () => {
	console.log("hello");
}

sayHello();

// or

const sayHello = () => console.log("hello"); // 바로 리턴하기 때문에 중괄호 생략가능.

sayHello();

//-------------------------------------------------

array.map((el) => console.log(el));

array.map(el => console.log(el)); // el을 감싸는 괄호 생략가능.

 이렇게 바로 return을 하려고 할 때 ES6에서는 중괄호를 생략할 수 있습니다.

그 외에 파라미터가 하나일 때도 그 주변의 괄호를 생략 가능하기에,

코드를 최대한 간결하고 가독성 좋게 읽고 사용할 수 있다. 

 

 

그렇다면 this키워드에 대해서도 알아보죠.

 

ES5 :

const person = {
    name: 'Mike',
    age : 20,
    getInfo: function() {
        console.log(this);      
        console.log(this.name); 
        console.log(this.age);
    }
}

person.getInfo();

 

Result :

{name: "Mike", age: 20, getInfo: ƒ}
Mike
20

 

 

 이렇게 this 키워드를 이용하여 자기 자신을 불러올 수 있습니다.

여기서 this 키워드 없이 name과 age를 불러온다면,

undefined 혹은 에러를 일으킬 수 있습니다.

 

ES6:

const person = {
  name: "Mike",
  age : 20,
  getInfo: () => console.log(this),
}

person.getInfo();

이렇게 arrow function으로 this를 부른다면??

ES5의 this처럼 {name: "Mike", age: 20, getInfo: ƒ} 이 아닌,

 

Result :

Window {0: Window, 1: Window, 2: Window, window: Window, self: Window, document: document, name: "", location: Location, …}

person이 아닌 window객체를 불러옵니다. 그러하여 arrow function에는 따로 this 키워드를 사용하지 않습니다.

 

3. 마치며

 

 코딩은 오래, 자주 할수록 당연히 늘게 되며, 처음부터 너무 좋은 코드를 짜려고 머리 아파하지 마세요.

좋은 코드란 짧고, 누가 봐도 알기 쉬우며, 나중에 다시 보더라도 이해하기 쉬운 코드라고 볼 수 있습니다.

(이 부분도 어떻게 코드를 짧고, 가독성 좋게, 변수, 함수 이름은 어떻게 짜는 게 좋은지 포스팅하겠습니다.)

 

가령 예를 들면, 

이 코드와

const checker = true;

if(checker) {
	console.log("this is true");
}else {
	console.log("this is not true");
}

이 코드는

const checker = true;
checker ? console.log("this is ture") : console.log("this is not true");

 정확히 동일한 작업을 합니다.

하지만 밑에 있는 코드가 위에 있는 코드보다 훨씬 간결하고 가독성도 좋다는 것을 알 수 있죠.

이건 아주 쉬운 예중 하나이며 당연히 직접 프로그래밍을 하게 되면 더 복잡한 구조의 코드들을 짜게 됩니다.

다시 한번 말하지만 오래, 자주 하는 것이 가장 중요하며, 그 후 퀄리티는 차츰 자연스럽게 높아질 것입니다.

 

언제나 개발이란 길은 열려있습니다. 그게 직업이든 취미이든 말이지요.

개발자로서 큰 장점은 나만의 지식을 꽁꽁 숨기지 않고,

많은 대중과 항상 다른 개발자들이 많다는 것입니다.

이로써 항상 새로운 기능들을 누구나 쉽게 사용해 볼 수 있고,

개발자들도 새로운 기술들을 빠르게 적용할 수 있습니다.

그렇기에 윈윈 전략입니다.

 

처음 시작이 가장 어렵습니다. 

항상 건강하시고 도전하세요.

 

완벽한 준비란 없다, 완벽한 준비란 영원히 시작하지 않는 것과 같다.