JavaScript

JavaScrit를 배워야 하는 이유

웹 브라우저에서 발생하는 event를 핸들링 하기 위해서 배워야 한다.

JavaScript를 적용하는 방법

<script>

</script>

var 사용을 지양하자

중복으로 변수명을 사용해도 에러가 발생하지 않기 때문에 코딩에 치명적일 수 있기 때문이다.

따라서, let이나 const를 통해서 선언하는 것이 바람직하다.
여기서 const는 재할당이 안된다는 특징이 있다.

scope

var로 선언하게 되면 변수가 오염되기가 쉽다.

var global = '전역'

if(global=='전역'){
	var global = '지역'
    
    console.log(global); //지역
}
console.log(global); //var로 선언했기 때문에 '지역' 으로 출력

실행결과
지역

block scope

const global = '전역'

{
	const global = '지역'
    
    console.log(global); 지역
}
전역
console.log(global); 전역 

const를 주로 쓰는 이유

변경이 안되기에 쓰면 안되는 거 아닌가? 이런 생각이 들 수도 있다.
하지만,

const person = {
	name : 'jang',
    age : '30'
}

person = {
	name : 'jang2',
    age : '40'
};
//에러

/*-----------------------------*/

const persons = {
	name : 'jang',
    age : '30'
}

pseson.name='jang2'
person.age= '40'

이런 식으로 변수 값을 새롭게 할당할 수 있기 때문에 const를 지향하는 코드를 작성하는 것이 좋다.

전역공간 사용 최소화

주니어 개발자들은 스코프의 범위가 js파일마다 다르다고 생각하는 오류를 범하기가 쉽다.

전역공간이 더럽혀질 가능성이 있어 어디서든 생성이 가능하다.

이는 전역공간을 최소화해서 코드작성 하면 해결할 수 있다.

자바스크립트에서의 객체

객체 선언

<script>
  var coworkers = {
      "programer" : "egoing",
      "designer" : "leezche"
  };
</script>

객체 출력

<script>
  var coworkers = {
      "programer" : "egoing",
      "designer" : "leezche"
  };

  document.write(coworgers.programer+'<br/>');
  document.write(coworkers.designer);

  for(var key in coworkers){
      document.write(key + ':' + coworkers[key] + '<br/>');
  }
</script>
///////////
출력결과
egoing
leezche
programer : egoing
designer : leezche

객체 삽입

<script>
  //객체 선언
  var coworkers = {
      "programer" : "egoing",
      "designer" : "leezche"
  };

  //객체 추가
  coworkers.ceo = "duru";
  coworkers["data scientist"] ="taeho";

  //객체 출력
  document.write(coworgers.ceo+'<br/>');
  document.write(coworkers[data scientist]);
</script>


////출력결과
duru
taeho

객체로 함수 다루기

<script>
  	var coworkers = {
      "programer" : "egoing",
      "designer" : "leezche"
  	};
  
  
	coworkers.showAll = function()
    {
    	for(var key in this )
        {
        	document.write(key + ':' + this[key] + '<br>');
        }
    }
</script>

////
출력결과
programer:egoing
designer:leezche

객체 API화 하기

script태그 내의 자바스크립트 코드를 .js파일에 작성하고 이 코드를 가져와서 쓸 때는 적용하고자 하는 파일에

<script src="파일명.js"></script>

를 사용하여 src로 지정한 경로의 script 코드를 적용할 수 있다.

1. 유지보수를 더 쉽게 할 수 있다.
2. 가독성을 향상할 수 있다.