Acorn academy 12/20 자바스크립트

Bae Seong Jun·2023년 12월 20일

Acorn academy

목록 보기
22/70

연산자

산술연산자

사칙연산자와 나머지값을 구하는 연산자를 말한다.

주의할점은 문자열과 다른 데이터형이+ 연산을 하면 문자열이 연결된다.

비교연산자 (관계연산자)

변수나상수의값을비교할때쓰이는연산자로서결과가항상true
또는false인 논리값(boolean)이어야 한다

특이사항

가. == , !=
equal 연산자로서 필요하면형변환하고 비교한다.
예> var w = 10; var w2 = “10”; console.log( w == w2 ); // true

나. === , !==
identical 연산자로서 형 변환하지않고비교한다.
예> var w = 10; var w2 = “10”; console.log( w === w2 ); // false

논리연산자

기본적으로 true나 false인 논리값을 가지고 연산하는 연산자이다.
&& 논리곱
|| 논리합
! 부정

주의할점

자바스크립트에서는 다른 프로그램 언어와 다르게 논리값만 논리연산자를
사용하지 않고 다른 데이터도 논리연산자를 사용할수 있다.
이유는 숫자나 문자열 등이 논리값으로 자동 형변환 될 수 있기 때문이다.
또한 최종적으로 반환되는 값은 true/false값이 아닌 좌측 또는 우측 피연산
자의 최종 평가값이다.

좌객체|| 우객체
==> 좌객체가 참이면 우객체를 평가하지않고 좌객체값을 리턴한다.
좌객체가 거짓이면 우객체값을 리턴한다.
예> console.log ( “123” || 0 ); è “123”
좌객체 && 우객체
==> 좌객체가 참이면 우객체값을 리턴한다.
좌객체가 거짓이면 좌객체값을 리턴한다.
예> console.log( “123” && 0 ) ; è 0

활용예
예> 어떤 함수가 인자를 받을 때 반드시 배열을 받기로 가정한 경우?
function x( a ){
var arr = a || [] ;

}
x();
x([1,2]);
예> 이벤트 처리시 IE와 다른 브라우저간의 처리방법이 다른 경우?
function eventHandle(e){
var e = e || window.event;
..
}
eventHandle(event); // 비 IE
eventHandle(); // IE

증감연산자

++ --
1씩 증감시키는 연산자.
전치이냐 후치이냐에 따라서 결과값이 다르게 산출된다.

3항연산자

하나의 조건을 정의하여 만족시에는 ‘참값’을 반환하고 만족하지 못
할 시에는 ‘거짓값’을 반환하여 단순비교에의해 변화를 유도하는 연
산자이다.

조건식?참값:거짓값

연산자 우선순위

기타연산자

if, switch case

for

for in, for of

for in 은 자바와 다르게 각 순회에서 index값을 반환한다
for of 는 각 각 순회에서 value값을 반환한다

 for(var num4 in myCars) {
		console.log("myCars " + myCars[num4]);
	}

	for(var x of myCars){
		console.log("myCars  x:" + x)
	}

json 생성과 접근

json 값을 for in 하면 각 순회에서 키값을 반환함
json의 value 접근은 json변수명[key값] 으로 접근가능하며 json변수명.key값으로는 불가능하다.

	var person = {"name":"홍길동", "age":20, "address":"서울"};

	for(var p in person){
		console.log(p);
		console.log("person 정보: " + p + " : " + person[p]); //ok
		console.log("person 정보: " + p + " : " + person.p); //ok	
	}

while, do while

함수

함수의 역할

  1. 일반적인 호출 가능한 형식으로서의 함수 (가장 일반적)
  2. 값으로서의 함수 (함수 객체)
  • 변수에 할당 가능
  • 다른 함수의 인자로 전달가능
  • 다른 함수의 반환값으로 사용가능.

함수를 정의하는 방법 3가지

가. 선언적 정의방법 ( 이름있는 함수 )
나. 함수 리터럴 ( 익명함수 )
다. Function 생성자 이용

함수를 변수에 저장

	function aaa(){
		console.log("2");
		return 100;
	}

	var x = aaa();  //호출

	var y = aaa;  // 함수 자체를 변수에 저장
	console.log("y========", y); // 함수의 구조를 출력
	y(); // 변수에 저장된 함수를 호출
  • 주의사항 : 따라서 함수 이름과 변수 이름도 구분해서 지어야한다.
    만약 함수와 같은 이름의 변수를 선언하면 해당 이름으로 함수에 접근할 수 없게 된다.

  • 함수가 선언되기 전에도 호출이 가능하다. 하지만 권장되는 방식은 아니다. 아무래도 함수가 선언되는 시기가 다른 것 같다.

익명함수

이름없는 함수, 자체로는 사용이 불가능.

	var num = function(){
		console.log("ㅎㅇ");
	}
	num();

위와 같은 익명함수가 선언되기 전에 사용하는 것은 불가능하다.
호이스팅으로 불려온 변수는 undefined이기 때문이다.

일급객체 : 리턴값, 변수, 매개변수로 전부 사용할 수 있는 객체

매개변수와 인자

자바스크립트는 함수에서 정의된 매개변수(parameter)와 호출하는 인자(argument)의 갯수가 일치하지 않아도 호출이 진행된다. 인자가 부족하면 해당 매개변수는 undefined가 된다.

  • 자바스크립트는 메소드 호출시에 파라미터 갯수를 체크하지 않는다.

함수의 매개변수는 arguments라는 내장변수에 배열의 형태로 저장된다.
해당 변수는 함수 내에서 일반적인 배열과 같이 사용할 수 있다.

	 function  one( x , y , z){
		 for( var i = 0 ; i < arguments.length ; i++){
			 console.log( arguments[i]);
			 }
		 }
	 one(10,20);
	 one(10,20,30);
	 one(10,20,30,40);

고급함수 형태 2가지

1. 중첩함수

특정 함수 내에서만 사용하는 기능이라면 외부에 노출시키지 않고 내부에 정의하여 사용할 수 있다.

var a = function(arg){      
var b = function(n){
 return n*100;
 }  
return b(arg);
 };
 //외부에서접근방법
var result = a(2);
 console.log(result);

중첩함수의 특징은 상위 함수에서 정의된 변수를 접근할 수 있다는 것이다.
외부에서는 접근할 수 없는 내부의 변수에 내부함수가 접근할 수 있다는 것을 이용하면 객체지향의 '은닉화(encapsulation)' 기법을 적용할 수 있다.

 //은닉화
var k = function(){
 var d = 10;
 var k2 = function(){
 return  d* 2;
 }
 return k2();
 }
 console.log("k() 호출: "+ k() ); //20

2. 콜백함수

특정함수 호출시 트리거(trigger) 형태로 자동으로 다른 함수를 호출하는 형태의 함수를 의미한다.
콜백함수 구조는 이벤트 처리시 매우 많이 사용되는 구조이다.

다른 함수를 파라미터로 받아서 내부에서 그것을 호출하고 있습니다. 자바스크립트에서는 가능합니다. 그리고 이걸 우리는 “콜백”이라고 하기로 했어요. 다른 함수의 파라미터로써 전달되는 함수를 콜백 함수라고 합니다. 그러나 그게 다는 아니에요.

자바스크립트는 코드를 위에서 아래로 순차적으로 실행합니다. 그러나, 코드가 다른 행위가 일어난 뒤에 실행되는 경우도 있고 순차적으로 실행되지 않을 때도 있습니다. 이런 걸 비동기 프로그래밍이라고 합니다.

콜백은 태스크가 끝나기 전에 함수가 실행되지 않는 것을 보장합니다. 다르게 말하자면 콜백은 그 태스크가 끝난 직후에 실행될 것입니다. 콜백은 비동기 자바스크립트 코드를 작성할 수 있도록 해주고 여러 문제와 에러들로부터 안전하게 지켜줍니다.

자바스크립트에서 콜백 함수를 만드는 방법은 어떤 함수의 파라미터로써 함수를 넘기고 어떤 행위나 태스크가 완료된 직후에 콜백 함수를 호출하는 것입니다.

유틸리티 함수

가. alert 함수

경고창을 화면에 보여줄 때 사용한다.
예> alert(값);- Prompt 힘수 : 화면에서 문자입력

나. setTimeout 함수

일정시간에 함수를 단한번 실행한다.
예> setTimeout(function(){
console.log("3초후에 출력");
},3000);

다. setInterval 함수

일정시간마다 반복해서 함수를 실행한다.
예>var interval = setInterval(function(){
console.log("3초후에 출력");
},3000);
clearInterval(interval);

라. 문자열을 숫자로, 실수로 명시적 변환 함수

예> var num = parseInt( “123” ); var f = parseFloat( “3.14” );

profile
코딩 프로?

0개의 댓글