자바스크립트(2)

9mond·2023년 8월 7일
0
post-thumbnail
post-custom-banner

1. Return문

function f(x, y){
            var z = x + y;
            if( z < 10 ){
                return; 
              // 자바스크립트 함수는 처리도중 return문을 만나면 실행 중단.
              // 이러한 특성을 이용하여 충족되지 않을 경우 등에 대한 처리 중단을 목적으로 return문을 사용할 수 있으면,
              //  리턴값 없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용된다.
            }
                return z;
        }
        document.write(f(1,2));
        document.write("<br>");
        document.write(f(10,20));
        f(1, 2);
        f(10,20);

2. 일치연산자(===, !==)

  • 일치 연산자 === 좌항과 우항이 '정확', '엄격'하게 같을 때 true, 다르면 false가 리턴된다.
  • 여기서는 정확하다는 말의 의미에 집중한다.
  • javascript, php는 비슷한 것을 같은 것으로 간주하기도 한다.

3. 함수

3-1. 함수의 정의(선언) 방법

	function 함수이름(){
		..실행할 구문..
	}
  • 함수를 정의하기 위해서는 function이라는 예약어 뒤에 함수의 이름과 괄호()를 사용하여 선언하고, 그 뒤에 대괄호{...}블록을 생성하여 실행할 구문을 기술한다.

3-2. 함수의 호출

	함수이름();

4. 화살표 함수

  • 함수 표현식 보다 단순하고 간결한 문법으로 함수를 만들 수 있는 방법

4-1. 매개변수 지정 방법

  • () => {...} // 매개 변수가 없을 경우
  • X => {...} // 매개 변수가 한 개인 경우, 소 괄호 생략 가능
  • (x, y) => {...} // 매개 변수가 여려 개인 경우, 소 괄호 생략 불가능

4-2. 함수 몸체 지정 방법

  • x => { return x * x; }
  • x =? x * x // 함수 몸체가 한 줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다.
    () => {		
    		var x = 10;
    		return x * x;
    }
  	    // 매개변수가 없는 경우
        var user = () => document.write('user');
        user();

        document.write("<br/>");

        //  매개변수가 하나인 경우
        var user2 = x => document.write(x);
        user2('javascript');

        var sayHi = () => alert("안녕하세요");
        sayHi();

        document.write("<br/>");
        
        // 간단하게 한 줄로 표현할 때 "{}" 생략 가능, 값이 반환된다.
        var user3 = (a,b) => a + b;
        document.write(user3(1,2));
        var user4 = (a,b) => {
            var c = 3;
            return a + b + c;
        }
        document.write(user4(10,11));
       // 18은 아무것도 입력하지 않았을 때의 기본값
       var age = prompt('나이를 알려주세요', 18);
       var welcome = (age < 18) ? 
           () => alert('안녕') :
           () => alert('안녕하세요');
       welcome();

5. var 변수 선언의 문제점

  • 같은 변수를 한 번 더 선언 했음에도 불구하고, 에러가 나오지 않고 각기 다른 값이 출력되는 것을 볼 수 있다.
  • 이는 유연한 변수 선언으로 간단한 테스트에는 편리할 수 있지만, 코드량이 많아진다면 어디에서 어떻게 사용될지 파악하기 힘들뿐더러 값이 바뀔 우려가 있다.
  • ES6 버전 이후에는 이를 보완하기 위해 추가된 변수 선언 방식인 let, const가 있다.
        var name = 'html';
        console.log(name);

        var name = 'javascript';
        console.log(name);

5-1. let vs const

  • let은 변수에 재할당이 가능하다.
  • const는 변수의 재선언, 변수 재할당이 불가능하다.
  • 재할당이 필요한 경우에 한정해 let을 사용한다.
  • 재할당이 필요없는 상수와 객체에는 const를 사용한다.
        let name = 'html';
        console.log(name);

        // 오류: SysntaxError
        // let name = 'javascript';
        console.log(name);

        name = "react";
        console.log(name);
        const name = 'html';
        console.log(name);

        // 오류: SysntaxError
        // const name = 'javascript';
        console.log(name);

        // TypeError
        name = "react";
        console.log(name);

6. 배열

  • 하나의 배열 안에는 같은 종류(데이터형)의 값들만 저장될 수 있다.

  • 배열을 만드는 방법
    -> let myarray = new Array(값1, 값2...);

    	-> let myarray = [값1, 값2...];
    
    	let myarray = ['HTML', 'CSS', 'JS'];

6-1. 데이터의 접근

  • 배열이름[일련번호] 형식으로 접근할 수 있다.

6-2. 빈 배열

  • 배열을 생성만 해주는 것.

  • 아무런 값이 젖아되어 있지 않은 형태로 만든 후 하나씩 값을 채워 나가는 것도 가능하다.

    	let myarray = new Array();
    	let myarray = [];
  • 0번째 칸부터 차례대로 값을 대입해 주어야만 사용할 수 있다.

    	myarray[0] = "HTML";
    	myarray[1] = "CSS";
let myarray = new Array("HTML", "CSS", "JavaScript");

        // 값 읽기
        document.write("<h1>" + myarray[0] + "</h1>");
        document.write("<h1>" + myarray[1] + "</h1>");
        document.write("<h1>" + myarray[2] + "</h1>");

        // 재할당
        myarray[0] = "user1";
        myarray[1] = "user2";
        myarray[2] = "user3";

        // document.write("<h1>" + myarray[0] + "</h1>");
        // document.write("<h1>" + myarray[1] + "</h1>");
        // document.write("<h1>" + myarray[2] + "</h1>");

        // for문, 배열이름.length
        for( let i = 0; i<myarray.length; i++ ){
            document.write( "<h2>" + myarray[i] + "<h2/>");
        }
        //  빈 배열 생성
        let myarray = new Array();

        //  반복문 사용해서 배열의 10칸에 각각 0~9까지 할당
        for( let i = 0; i<10; i++ ){
            myarray[i] = i;
        }
        document.write("<br/>");
        //  배열길이 출력
        document.write(myarray.length);

        document.write("<br/>");

        //  반복문 사용해서 각각의 값을 출력
        for( let i = 0; i<myarray.length; i++ ){
            document.write(myarray[i] + "<br>");
        }

7. 2차 배열생성

7-1. 2차 배열 생성

  • 방법1
    let myarray = new Array(
    new Array(값1, 값2..),
    new Array(값1, 값2..)
    ..
    );

  • 방법2
    let myarray = [
    [값1, 값2..],
    [값1, 값2..]
    ..
    ];

7-2. 2차배열 모양

let myarray = [
	["웹표준", "HTML5/CSS3", "반응형 웹"],
	["Javascript", "j!uery", "Ajax"],
];

7-3. 크기 조회하기

  • 행의 크기를 조회
    배열객체이름.length;

  • 열의 크기를 조회
    배열객체이름[n].length;

        let myarray = [
            ["웹표준", "HTML5/CSS3", "반응형 웹"],
            ["Javascript", "jQuery", "Ajax"],
    	];

        for( let i = 0; i<myarray.length; i++ ){
            for( let j = 0; j<myarray[i].length; j++ ){
                document.write("<h1>" + myarray[j][j] + "</h1>");
           }
        }

7-4. Array와 String의 관계

  • String 클래스의 split()함수는 파라미터로 전달된 문자열을 구분자로 삼아 문자열을 잘라내고, 그 결과를 배열로 변환하여 리턴한다.
           let str = "HTML, CSS, JavaScrip, jQuery";
           let data = str.split(",");
           for( let i=0; i<data.length; i++ ){
               document.write("<h1>" + data[i], "</h1>");
           } 
profile
개발자
post-custom-banner

0개의 댓글