Javascript - 객체 (객체와 관련된 키워드)

27 Jul 2018 • Javascript
1. in 키워드

문자열 in 객체 형태로 작성 객체 내부에 해당 문자열을 가지고 있는 속성이 있는지 확인 결과값 boolean 형태로 리턴 속성이 존재하면 ‘true’, 속성이 존재하지 않으면 ‘false’ 출력

var student = {
  name : '우고은',
  kor : '96',
  eng : '98',
  math : '94',
  sci : '90'
};

var key = "kor";
"name" in student;  //true
key in student; // true
// 식별자로서 사용하는경우 변수로 선언되어있어야 함."kor"로 인식되어 true 출력

"sex" in student; // false
2. with 키워드

with (객체이름) { 해당 구문 안에서는 속성명으로만 호출 가능} 형태로 작성 복잡하게 사용해야 하는 코드를 짧게 줄여주는 코드

var output= '';
with (student){
  output += name;
  output += kor;
  }
 console.log(output); //우고은 96

Javascript - 객체 (기본)

27 Jul 2018 • Javascript
  • 문자열, 숫자 bool, 객체, 함수, Undefined
  • 배열의 자료형 또한 객체
1.객체 생성하기

객체 내부의 데이터는 속성 : "속성 값"형태로 입력
속성 > 문자열 또는 식별자 형태로 입력 가능
속성 값 > 키에 들어가는 데이터

  var object = {

    key : "value A ",
    key_B : "value B",
    key_C : "value C, value D"

  };
2.객체 접근하기

객체 요소에 접근할 때, 배열과 비슷한 방법으로 요소에 접근할 수 있음.

var key ='key_B';

  document.write("object['key'] : " + object['key']); //키 값을 변수로서 활용할 경우 사용 => 'value A' 출력
  document.write("<br/>object.key : " + object.key);   // 일반적으로 사용하는 접근방법 => 'value A' 출력
  document.write("<br/>object[key] : " + object[key]+"<br/>");  // key를 "변수"로 인식, object['key_B'] => 'value B' 출력
3.객체의 데이터를 반복문으로 출력하기.
  for (var i in object){
    //object.i => undefined 출력
    document.write("<br/>" + i + " : " + object[i]);
  }

See the Pen Javascript - 객체 01 기본 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Javascript - 함수 선언 방식

25 Jul 2018 • Javascript

1. 함수 선언 방식

1.1 ECMAScript 5

function power(n) {
  return n*n ;
}

1.2 ECMAScript 6 : 화살표 함수(람다 식), IE 에서 지원 불가능

var power = (n) => { n*n }; 	//코드가 한 줄일 경우 중괄호 {} 생략 가능

2. 가변매개변수

2.1 ECMAScript 5 : arguments 객체 사용

2.2 ECMAScript 6 : 전개연산자(…) 사용

  • 전개 연산자는 매개변수 마지막에 사용할 수 있음.
(...numbers,a,b) --> X
(a,b,...numbers) --> O
  • 전개 연산자는 함수 당 하나씩만 사용할 수 있음.
var sumAll= (...numbers) => {
  var output = 0 ;
  for (var i=0;i<numbers.length ; i++){
    output += numbers[i];			// 매개변수로 들어온 모든 인자를 더하는 함수
  }
  document.write(output);
}
var array = [1,2,3,4,5,6,7,8];
sumAll.apply(null, array);  		//ECMAScript 5 : 다른 array 자체를 매개변수로 전달.

sumAll(...array); 				  //ECMAScript 6 : 다른 array 자체를 매개변수로 전달.

See the Pen Javascript : Arrow function by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Javascript - 실행 순서

25 Jul 2018 • Javascript

1. 자바스크립트의 실행 순서

  • 다른 프로그래밍 언어 : 쓰레드[Thread] –> 코드를 읽어 내려가는 녀석
  • 자바스크립트 : 쓰레드를 개발자가 따로 생성할 수 없음.
  • 따라서 코드를 읽어내려가는 녀석은 단 1 개

1.1 실행순서 예제 1

//자바스크립트 실행순서
//위에서 아래로 읽어내려감

//1. A를 실행해야 겠다!
alert('A');  // A 출력

//2. 뭔지는 모르겠지만 0초 후에 실행을 해야한다 ==> 기록/예약 걸어둔다
setTimeout(function() {
  alert('B');
},0);

//3. C를 출력해야겠다!
alert('C');  // C 출력

//4.예약된 걸 확인 : B를 출력해야 겠다!
//B 출력

See the Pen Javascript : 실행순서 1 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

  1. 실행순서 예제 2 : 반복문
//1. A를 실행해야 겠다!
document.write('A');  // A 출력

//2. 뭔지는 모르겠지만 0초 후에 실행을 해야한다 ==> 기록/예약 걸어둔다
setTimeout(function() {
  document.write('B');
},0);

//3. C를 출력해야겠다!
document.write('C');  // C 출력

//4. 무한 루프
while(true){
}

//5. 무한 루프에 걸려 실행 끊김 ==> B 출력 X

See the Pen Javascript : 실행순서 2 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

  1. 실행순서 예제 3 : FOR 문
  • var 타입 변수는 블록단위의 스코프를 제공하지 않는다.
  • 따라서 var i 는 전역변수로 취급됨 : 블록 밖에서 사용 가능.
  • 해결방법 1. (let) 사용 : 블록 단위의 스코프 제공
  • 단, ECMA6 문법(let)은 인터넷 익스플로러에서 제공하지 않으므로 사용에 유의해야한다.
  • 해결방법 2. 클로저 사용 : 함수 내의 함수에서 변수를 선언하여 해당 범위 내에서만 사용할 수 있도록 한다.
//0. var i 는 전역변수로서 선언됨
for(var i=0;i<3;i++){
	//1. i=0일때, setTimeout()에 대한 예약을 건다.
	//2. i=1일때, setTimeout()에 대한 예약을 건다.
	//3. i=2일때, setTimeout()에 대한 예약을 건다.
  setTimeout(function(){alert(i),1})
}
	//4. i=3일때, For문을 탈출한다.
	//5. 예약을 걸어둔 setTimeout(function(),1)를 3번 실행
	// 실행하는 시점에서 i의 값이 3이기 때문에 alert(i)=3, 즉 3을 3번 출력하게된다.
	//5-1. alert(i) = 3
	//5-2. alert(i) = 3
	//5-3. alert(i) = 3

( function (i) {
setTimeout( function() { alert(i); } , 0 )
})(i);		// 클로저를 활용하여 해결

// 단, ECMA6 문법(let)은 인터넷 익스플로러에서 제공하지 않으므로 사용에 유의해야한다.

See the Pen Javascript : 실행순서 3 by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.

Javascript - 내장함수 (Timer)

24 Jul 2018 • Javascript
1. 타이머를 설정하는 함수
1.1 setTimeout()
  • 특정 시간 후에 함수를 1번만 실행하는 함수
  • 사용 매개변수
  1. function
  2. 시간(milliseconds): 1000 밀리초 = 1 초
1.2 setInterval()
  • 특정 시간마다 함수를 반복적으로 실행하는 함수
  • 사용 매개변수
  1. function
  2. 시간(milliseconds): 1000 밀리초 = 1 초
2. 타이머를 제거하는 함수
2.1 clearTimeout()
  • setTimeout()으로 설정한 타이머를 제거하는 함수.
  • 사용 매개변수
  1. id
2.2 clearInterval()
  • setInterval()으로 설정한 타이머를 제거하는 함수.
  • 사용 매개변수
  1. id

See the Pen NBjBEq by Cathy Go Eun Woo (@cathy-go-eun-woo) on CodePen.