Javascript : 반복문 - 일급 객체로서의 함수(First-Class Object)

      일급객체(First-Class Object)란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가르킨다.
      사용 시 다른 요소들과 아무런 차별이 없다는 것을 뜻한다.

  • 모든 일급 객체는 변수나 데이터를 담을 수 있어야 한다.
  • 모든 일급 객체는 함수의 파라미터로 전달할 수 있어야 한다.
  • 모든 일급 객체는 함수의 리턴값으로 사용할 수 있어야 한다.

 

      변수에 함수에 할당할 수 있다.

  • 함수가 마치 변수나 데이터에 담아 값으로 취급된다.
  • 함수가 나중에 호출하면 사용될 수 있도록 조치되었다.
1
2
3
4
5
6
7
const sayHello = function (){
    console.log('hello!');
}
 
// 옆으로 풀어서 쓰면.. 
 
const sayHello = function () { console.log('hello!'}
cs

 

      함수의 파라미터(인자)로 다른 함수에 전달 할 수 있어야 한다.

  • 콜백함수(매개함수) 형태로 자유롭게 전달이 가능하다. 
  • 고차함수 함수를 인자로 받거나 반환(return)
1
2
3
4
5
6
7
8
9
10
function callFunction(func){
    //매개변수로 받은 func(변수)가 사실 함수다.
    func(); 
}
 
const sayHello = function (){
    console.log('hello!');
}
 
callFunction(sayHello);
cs

callFunction(sayHello); 의 sayHello안에 const sayHello 에서 선언 된

function (){console.log('hello!')} 이 들어가고 

function callFunction(func) 이 호출될 때 (func)안에 sayHello가 들어가고 이게 func(); 가 받아서 실행  

 

 

      함수를 반환할 수 있다.

1
2
3
4
5
6
7
8
9
function creatAdder(num){
    return function(x){
        return x + num;
    };
}
 
 
const addFive = creatAdder(5);
console.log(addFive(10));
cs
1
2
3
4
5
6
7
8
const addFive = function(x){return x + 5;}; 
// function(x){ return x + num;}; 이 creatAdder(5)와 대체된다. num = 5 
 
console.log(addFive(10)); 
// addFive의 10이 x로 들어가면서
// addFive(function(10){return 10 + 5;};
 
// return x + sum = 10 + 5 = 15가 된다.
 
cs

 

      일급 객체의 속성으로써의 함수 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 일급객체로서의 함수
 
const person = {
    name : "철수",
    isMarried : true,
    age : 30,
    sayAge : function(){
        console.log("저는 " + this.age + "살 입니다.")
    },
    sayHello : () => {
        console.log(`안녕하세요. 나는 ${person.name}입니다.`)
    },
 
}
person.sayAge();
person.sayHello();
 
// 참고! this를 쓰려면 funtion을 써줘야하고
// ES6 문법으로 써주려면 this를 쓰는 경우 undefined가 나온다.  
function(){this.age}
()=> {person.age}
cs
  • 화살표 함수는 this를 바인딩하지 않는다.

 

      배열의 요소로 함수를 할당한다.

1
2
3
4
5
6
7
8
9
10
11
const myarr = [
    function(a, b){
        return a + b 
    },
    function(a, b){
        return a - b
    }
]
 
console.log(myarr[0](65))
console.log(myarr[1](75))
cs

 

 

      return을 함수로 하는 고차함수 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function multiPlyBy(num){
    return function (x){
        return x * num;
    };
}
 
function add(x, y){
    return x + y;
}
 
const multiPlyByTwo = multiPlyBy(2);
const multiPlyByThree = multiPlyBy(3);
 
console.log(multiPlyByTwo(10))     // 20
console.log(multiPlyByThree(20))   // 60
cs

 

multiPlyBy(num)에 num를 넘겨준다. multiplyByTwo = return function(x){return x * num;}과 동일한 셈이다.
console.log를 찍을 때 multiPlyByTwo()함수를 호출하면서 x값으로 10을 던져준다. return 될 때 x(10)* num(2) = 20이 출력된다.

 

 

    Javascript : ES6 문법 + 활용 패턴 알아보기

    목차

  1. 블록 범위 생성자 (Block-Scoped Constructs Let and Const)
  2. 화살표 함수 (Arrow Functions)
  3. 클래스 (Classes)
  4. 프로미스 (Promises)
  5. 비구조화 할당 (Destructuring Assignment)
  6. 템플릿 리터럴 (Template Literals)
  7. 향상된 객체 리터럴 (Enhanced Object Literals)
  8. 기본 매개 변수 (Default Parameters)
  9. 멀티 라인 문자열 (Multi-line Strings)
  10. 모듈 (Modules)

 

1.  블록 범위 생성자 (Block-Scoped Constructs Let and Const)

     함수 레벨 & 블록 레벨 스코프의 차이점

  • 함수 레벨 스코프(function-level scope) : 함수 블록 내에서 선언 된 변수는 함수 내에서만 접근 가능
  • 블록 레벨 스코프(block-level scope) : 함수를 포함한 모든 코드 블록(if문, for문, while문, 예외 처리 시 사용하는 try 등) 내에서 선언 된 변수는 코드 블록 내에서만 접근 가능

     var로 선언 된 변수의 문제점

 
      ES6문법이 나오기 전 기존의 변수 선언 키워드인 var는 함수 레벨 스코프를 가졌고, 함수를 제외한 다른 코드 블럭에서 개별적인
      스코프를 가질 수 없었기 때문에 개발자의 의도와 다르게 동작했다.

  • var는 전형적인 함수 레벨 스코프이다.
  • var 키워드 생략을 허용 : 의도치 않은 변수의 전역화가 되었다.
  • Hoisting : 변수를 선언하기 전 참조가 가능했다.
  • 변수 재 선언 허용 

      var, let, const의 차이점

구분 var let(변수) const(상수)
변수 선언 후 재 선언 가능 여부 O X X
할당 된 값에 재 할당 가능 여부 O O X
변수만 선언하고 변수 할당은 나중에 하는 경우 O O x
스코프 범위 함수 레벨 스코프 블록 레벨 스코프 블록 레벨 스코프

 

         예시) 변수에 선언 후 재 선언 시

 

let은 선언한 이후 재 선언이 불가능하다.

 

         예시) 변수에 할당 후 재 할당 시 

1
2
3
4
5
6
7
8
9
10
11
var A = "Hello World var"
= "var"
console.log(A);
 
let B = "Hello World let"
= "let"
console.log(B);
 
const C = "Hello World const"
= "const"
console.log(C)
cs

 

const는 상수인 변하지 않는 값으로 한번 할당한 값은 다시 할당이 불가하다.

 

         예시) 변수만 선언 후 변수 할당은 나중에 하는 경우

const 선언에 initializer(초기화) 값 누락 , 선언과 함께 할당도 해줘야 한다. 상수를 선언할 것이 아니라면 const를 사용하지 말고 let으로 변경해주자.

 

         예시) 스코프 범위

1
2
3
4
5
6
7
8
9
10
11
12
13
// 1. var - 함수 레벨 스코프
 
var a = "철수";
 
function myfun2(){
    b = "영희";
    console.log(a);
    console.log(b);
}
myfun2();
console.log(a);
console.log(b);
 
cs

 

var는 함수레벨 스코프로 함수 안 밖에서 선언 후 호출해도 출력된다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
// 2. let - 블록 레벨 스코프
 
let a = "철수";
 
function myfun2(){
    let b = "영희";
    console.log(a);
    console.log(b);
}
myfun2();
console.log(a);
console.log(b);
cs

 

let b는 함수안의 블록함수이기 때문에 함수 밖에서 호출 시 b는 not defined 되었다.

 

 

1
2
3
4
5
6
7
8
9
10
11
12
// 3. const - 블록 레벨 스코프
 
const a = "철수";
 
function myfun2(){
    const b = "영희";
    console.log(a);
    console.log(b);
}
myfun2();
console.log(a);
console.log(b);
cs

 

let b는 함수안의 블록함수이기 때문에 함수 밖에서 호출 시 b는 not defined 되었다.

 

 

 

 

 

2. 화살표 함수 (Arrow Functions)

     화살표 함수의 장점

  • 화살표 함수는 ES6에서 지원하는 새로운 함수 문법이며, 익명 함수이다. 기존의 function 문법에 비해 간결하다.
  • map, filter, reduce 등 내장함수와 함께 사용할 수 있다.

         예시) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// 일반적인 함수 선언
function myfnc(){
    // 자바스크립트 코드
};
var myfnc = function() {
    // 자바스크립트 코드
};
 
var myfnc = () => {
    return 1;
}
// 리턴문이 1줄인 경우에는 중괄호 생략이 가능
var myfnc = () => 1;
 
// 매개변수가 존재하는 경우 () 괄호 생략도 가능
var myfnc = (x) => 1;
// 괄호 생략
var myfnc = x => 1;
cs

 

 

 

 

3. 클래스 (Classes)

     작성대기

  • 작성대기

         예시) 

         예시) 

 

 

 

 

 

4. 프로미스 (Promises)

     작성대기

  • 작성대기

         예시) 

         예시) 

 

 

 

 

5. 비구조화 할당 (Destructuring Assignment)

     구조를 분해 후 할당한다.

  • de + structur (de = not, structure = 구조)
  • 중괄호 안의 객체의 배열이나 객체의 속성을 분해하여 그 값을 변수에 담아준다.

         예시 1)  오른쪽의 배열의 구조를 분해하여 왼쪽의 변수에 각각 할당한다.

1
2
3
4
let [value1, value2] = [1"new"];
 
console.log("1", value1);
console.log("2", value2);
cs

 

 

         예시 2) arr이라는 속성을 3개 가지고있는 배열을 선언 후 변수를 따로 선언해도 배열의 구조를 분해하여 각각 할당할 수 있다. 

1
2
3
4
5
6
let arr = ["value1""value2""value3"];
let [a, b, c] = arr;
 
console.log(a);
console.log(b);
console.log(c);
cs

 

 

         예시 3) arr의 속성이 3개 가진 배열에 할당하려는 변수가 4개가 된 경우 

1
2
3
let arr = ["value1""value2""value3"];
let [a, b, c, d] = arr;
console.log(d)
cs

 

변수 d는 초기값이 없네? 라고 자동인식하여 undefined로

 

         예시 3-1) d의 초기값을 미리 세팅해 줄 수도 있다.

1
2
3
let arr = ["value1""value2""value3"];
let [a, b, c, d=4= arr;
console.log(d)
cs

 

 

         예시 3-2) arr의 3번째 "value4" 가 이미 존재하는 경우 초기값 d=4를 세팅해줘도 "value4"로 출력된다.

1
2
3
let arr = ["value1""value2""value3""value4"];
let [a, b, c, d=4= arr;
console.log(d)
cs

 

 

 

 

 

6. 향상된 객체 리터럴 (Enhanced Object Literals) 

     구조 분해 문법

     객체, 배열 안의 원소 값을 바깥 변수로 한번에 빼서 사용하기 위한 기법

  • 객체 안의 각 속성을 구조분해하여 변수에 할당
  • 객체 안의 변수 이름을 새로운 변수이름으로 할당

         원래의 방식으로각 속성을 변수에 할당하기 vs ES6 문법 비교

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// Object
const user = {
    name : "철수",
    age : "30"
};
 
// 이전 방법
const userName1 = user.name;
const userAge1 = user.age;
console.log(userName1, userAge1) // 철수, 30
 
// ES6 문법 - 1
const {name, age} = user;
console.log(name, age); // 철수, 30
 
// ES6 문법 - 2
const {name : userName2, age : userAge2} = user;
console.log(userName2, userAge2) // 철수, 30
cs

 

         예시 1) 객체 안의 각 속성을 구조분해하여 변수에 할당 
                         객체를 분해 후 할당하는 경우 더이상 객체 형태가 아니게 된다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
// 일반적인 객체의 경우
let user = {
    name : "철수",
    age : 30
}
 
// 객체 분해 - 객체 모양으로 변수를 만들어주고, 객체와 key값이 일치하는 경우 변수에 속성을 할당한다.
let {name , age} = {
    name : "철수",
    age : 30
}
console.log("name =>"name// 철수 string
console.log("age =>", age) // 30 number
cs

 

변수와 객체의 key를 매칭하여 이름이 일치하는 경우 일치하는 이름의 객체의 속성을 가진다.

 

 

         예시 2) 객체 안의 변수 이름을 새로운 이름으로 할당하기 

1
2
3
4
5
6
7
8
9
10
11
12
13
// 객체를 새로운 변수 이름으로 할당
let user = {
    name : "철수",
    age : 30
}
 
let {
    name : newName,
    age : newAge
= user
 
console.log("newName=> ", newName)
console.log("newAge =>", newAge)
cs

 

새롭게 변경한 변수 이름으로 찾아주어야 한다.

 

            만약 새로운 변수 이름이 아닌  기존 변수 이름으로 찾는 경우?

1
2
3
4
5
6
7
8
9
10
11
12
13
// 객체를 새로운 변수 이름으로 할당하고 다시 name과 age로 호출하는 경우
let user = {
    name : "철수",
    age : 30
}
 
let {
    name : newName,
    age : newAge
= user
 
console.log("name=> "name)
console.log("age =>", age)
cs

 

name은 찾을 수 없다고 나온다.

 

         예시 3-1) 객체에 설정되지 않은 변수를 불러오는 경우 : undefined

 

1
2
3
4
5
6
7
8
9
let user = {
    name : "철수",
    age : 30
}
 
let {name, age, birthday} = user
console.log(name)
console.log(age)
console.log(birthday)
cs

 

birthday의 초기값이 없음으로 undefined

 

         예시 3-2) 객체에 설정되지 않은 변수의 초기값을 직접 설정해줄 수 있다.

1
2
3
4
5
6
7
8
9
let user = {
    name : "철수",
    age : 30
}
 
let {name, age, birthday = "today"= user
console.log(name)
console.log(age)
console.log(birthday)
cs

 

 

         예시3-3) 초기값을 설정했지만 이미 birthday가 존재한다면 이미 선언 된 "yesterday"가 출력된다.

1
2
3
4
5
6
7
8
9
10
let user = {
    name : "철수",
   age 30,
   birthday "yesterday"
}
 
let {name, age, birthday = "today"= user
console.log(name)
console.log(age)
console.log(birthday)
cs

 

 

 

 

 

7. 템플릿 리터럴 (Template Literals)

     목차

  • 문자열 표현식 삽입법(Expression interpolation)
  • 여러 줄 문자열(Multi-line strings)
  • Tagged templotes   --- 나중에 배우면 업데이트 예정
  • 중첩 템플릿(Nesting templates)   --- 나중에 배우면 업데이트 예정
  • 원래 문자열(Raw strings)   --- 나중에 배우면 업데이트 예정

 

        템플릿 리터럴 기본형 : '',"" 대신 `` 백틱으로 감싸준다.

1
2
const testvalue = "안녕하세요"
console.log(`hello world ${testvalue}`) // 변수와 문자열 조합
cs

 

         문자열 표현식 삽입법 : $와 중괄호{ }를 사용하여 표현식을 표기한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
// ES6 이전 문자열 표현 방식
var a = "영희"
var b = 29
var c = 3
 
let user2 = "저의 이름은 " + a + "이고 " + (b+c) + "살 입니다."
console.log(user2)  // 저의 이름은 영희이고 32살 입니다.
 
 
 
// ES6 이후 문자열 표현 방식
let name = "철수"
let age = 30
let age2 = 2
 
let user = `저의 이름은 ${name}이고 ${age+age2}살 입니다.`
console.log(user)  // 저의 이름은 철수이고 32살 입니다.
 
 
cs

 

     여러 줄 문자열(Multi-line strings)

1
2
3
4
5
6
7
8
9
10
//ES6 이전 문자열 표현 방식
console.log("첫번째 줄\n" + "두번째줄")
 
//ES6 이후 문자열 표현 방식
console.log(`첫번째 줄
두번째 줄
세번째 줄
자유롭다.`)
 
 
cs

 

 

 

8. 기본 매개 변수 (Default Parameters)

     작성대기

  • 작성대기

         예시) 

         예시) 

 

 

9. 멀티 라인 문자열 (Multi-line Strings)

     작성대기

  • 작성대기

         예시) 

         예시) 

 

10. 모듈 (Modules)

     작성대기

  • 작성대기

         예시) 

         예시) 

 

 

 

11. ES6 문법의 여러가지 기능

     단축 문자속성명(Shorthand property names)

      속성명(property)의 이름이 value값의 변수 명과 동일할 때 하나로 과감히 생략 가능

 

         예시) name 이름이 변수명 name과 동일하여 생략

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
const name = "철수"
const ageNew = "30"
 
const obj = {
    name : name,
   age : ageNew
}
// key와 value의 변수명이 동일한 경우 과감히 생략할 수 있다.
const obj2 = {
    name,
   age : ageNew

}
 
console.log(obj.name)
console.log(obj.age)
console.log(obj2.name)
console.log(obj2.age)
cs

 

 

 

         예시) 속성을 생략하여 배열처럼 보이지만 객체 형태라는 것을 명심하자.

1
2
3
4
5
6
7
8
9
10
const name = "철수"
const age = "30"
 
const obj = {
    name,
   age
}
// 다시 바꿔서 써보면..
// 배열처럼 보이지만 객체이다.
const obj2 = { name, age }
cs

 

 

     전개 구문, 전개 연산자(spread operator, spread syntax)

      기존의 배열과 객체에는 영향을 주지 않으면서 '배열', '객체' 구조는 벗어버리고 요소들을 펼쳐서 복사하여 이용하는 것

  • 배열 복사
  • 배열 복사 + 요소 추가
  • 객체 복사

 

         [배열] 배열 복사
          ( ...arr ) 를 해주면 기존의 배열 또는 객체의 요소를 그대로 복사해오고 ( ), { } 구조는 벗긴다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let arr = [123]
console.log(arr)  // [ 1, 2, 3]
console.log(...arr)  //  1, 2, 3
const arr1 = {name : "철수"}
const arr2 = {name : "영수"}
const arr3 = {name : "영희"}
const student = [arr1, arr2, arr3] // [ { name: '철수' }, { name: '영수' }, { name: '영희' } ]
 
// array copy 1
const student2 = [...student]
// array copy 2
const student3 = [...student2, {name : "민희"}]
 
console.log("student3 =>", student3) // [ { name: '철수' }, { name: '영수' }, { name: '영희' }, { name: '민희' } ]  
console.log("student2 =>", student2) // [ { name: '철수' }, { name: '영수' }, { name: '영희' } ]
console.log("student =>", student) // [ { name: '철수' }, { name: '영수' }, { name: '영희' } ]
 
arr1.name = "희애"
 
// array를 이미 복사했어도 복사해온 array의 값이 변경되는 경우 나머지 배열의 value도 모두 변경된다.
console.log("student3 =>", student3) // [ { name: '희애' }, { name: '영수' }, { name: '영희' }, { name: '민희' } ]
console.log("student2 =>", student2) // [ { name: '희애' }, { name: '영수' }, { name: '영희' } ]
console.log("student =>", student) // [ { name: '희애' }, { name: '영수' }, { name: '영희' } ]
cs

 

         [배열] 기존의 배열을 복사하면서 요소를 추가하는 경우 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let arr = [123]
console.log(arr)    // [ 1, 2, 3]
console.log(...arr)   //  1, 2, 3
 
// 이전 방법 , 기존 arr에 4를 추가해주고 싶은 경우 .push() 를 한다. 
// 기존 배열에 영향이 있다.
 
arr.push(4
console.log(arr)   // arr [ 1, 2, 3, 4]
 
// ES6 문법 - 5를 추가하자
// 새로운 변수에 배열을 복사하면서 요소를 추가했다.
 
let newArr = [...arr, 5]
console.log(newArr)   // newArr [ 1, 2, 3, 4, 5]
cs

 

         [객체] 객체 복사

1
2
3
4
5
6
7
8
9
let user = {
    name : "철수",
    age : 30
};
 
let user2 = {...user};
 
console.log(user)     // { name: '철수', age: 30 }
console.log(user2)  // { name: '철수', age: 30 }
cs

 

 

     나머지 매개변수(rest parameter)

      기존의 배열과 객체에는 영향을 주지 않으면서 '배열', '객체' 구조는 벗어버리고 요소들을 펼쳐서 복사하여 이용하는 것

 

         나머지 매개변수 '...args' 스프레드 문법 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// argument가 무엇인지는 모르지만 받을 준비가 되어있는 단계 - '...args'로 작성한다.
function examplefunc(a, b, c, ...args){
    console.log(a, b, c);  // 1 2 3
    console.log(...args);  // <출력 시 빈칸으로 아무것도 뜨지 않음>
}
examplefunc(123);
 
 
// '...args'로 작성해주어야 나머지 매개변수로 인식한다.
// 4 5 6 7 이 추가로 들어온다.
function examplefunc2(a, b, c, ...args){
    console.log(a, b, c);  // 1 2 3
    console.log(...args);  // 4 5 6 7
}
examplefunc2(123456 ,7);
 
 
// 스프레드 문법(...)을 찍지 않고 'args'로 작성하는 경우
// [ 4, 5, 6, 7 ]
//스프레드 문법을 제외하면 나머지 매개변수인지 인식하지 못함으로 배열 형태로 작성한다.
function examplefunc3(a, b, c, ...args){
    console.log(a, b, c);  // 1 2 3
    console.log(args);  // [ 4, 5, 6, 7 ]
}
examplefunc3(123456 ,7);
cs

 

 

 

 


      참고자료

   Javascript : 반복문 - ⑥ 중첩 for문

      반복문 코드를 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

1. for문, for in문
2. while문
3. do while문
4. breack문
5. continue문
6. 중첩 for문

 

6. 중첩 for문

    중첩 for문 

     중첩 for문은 fot문 안에 fo문을 사용하는 것이다.
     

      중첩for문 기본형

for (초기값; 조건식; 증감식){
    for(초기값; 조건식; 증감식){
        // 자바스크립트 로직;
    }
}

 

      중첩for문으로 구구단 만들기

for(let i = 3; i < 5; i++){
    for(let j = 1; j < 10; j++ ){
        console.log(`${i} x ${j} = ${i*j} `);
    }
}

 

 

 

 

 

 

   Javascript : 반복문 - ⑤ continue 문

      반복문 코드를 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

1. for문, for in문
2. while문
3. do while문
4. breack문
5. continue문
6. 중첩 for문

 

5. continue문

    continue문 

     continue문은 반복문에서만 사용 가능하다.
     ① while문에서 사용 시 : continue 다음에 오는 코드는 무시하고 바로 조건식으로 이동해 조건 검사를 진행한다.
     ② for문에서 사용 시 : continue 다음에 오는 코드는 무시하고 바로 증감식으로 이동하여 증감 연산을 실행한다. 
 

 

      ① while문에서 사용 시

let i = 0;

while( i < 10){
    if ( i > 2){
        if ( i % 2 === 0){
            continue;
        }
    }
    console.log(i);
    i++;
}

 

 

 

      ② for문에서 사용 시

for(let i = 0; i < 11; i++){
    if (i === 5){
        continue;
    }
    console.log(i)
}

if(i===5) 조건에 해당하여 코드는 무시하고 바로 증감시켰다.

   Javascript : 반복문 - ④ breack문

      반복문 코드를 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

1. for문, for in문
2. while문
3. do while문
4. breack문
5. continue문
6. 중첩 for문

 

 

4. breack문

    breack

     breack문은 반복문인 while문 fot문에서 실행하면 조건식과 상관없이 강제로 반복문을 종료시킨다.

 

      breack문 기본형 ①

for(초기값; 조건식; 증감식){
    breack; // 반복문을 강제로 종료한다.
    // 자바스크립트 코드
}

      breack문 기본형 ②

for(초기값; 조건식; 증감식){
    if (조건식){
        breack;
    }
    // 자바스크립트 코드
}
for(let i = 0; i < 11; i++){
    if (i === 5){
        breack;
    }
    console.log(i)
}

 

 

if(i === 5)가 되면{ }중괄호 안으로 들어가 breack문을 실행해버리고 반복문을 강제 종료하고 빠져나온다.



 

 

 

   Javascript : 반복문 - ③ do while문

      반복문 코드를 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

1. for문, for in문
2. while문
3. do while문
4. breack문
5. continue문
6. 중첩 for문

 

 

3. do while문

    do while

     do while문 : 한번은 무조건! 자바스크립트 코드를 실행하고, 조건식을 검사 후 코드를 실행한다.
     while문 : 조건식 만족 여부를 먼저 확인하고 중괄호 안의 자바스크립트 코드를 실행한다.

 

      do while문 기본형

do{
    //자바스크립트 로직;
    //증감값;
}while(조건값);


      do while문 동작 순서 : 자바스크립트 코드 로직 → 증감식 → 조건값 

do{
    console.log(i);
    i++;
}while( i < 10);

 

일단 console.log(i)인 0을 실행하고 증감값 i++를 시킨다. while에서 참이면 다시 do로 돌아간다.

 

   Javascript : 반복문 - ② while문

      반복문 코드를 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

1. for문, for in문
2. while문
3. do while문
4. breack문
5. continue문
6. 중첩 for문

 

 

2. while문

    while

     while문은 조건식을 만족할 때 까지 코드를 여러 회 반복하여 실행할 수 있다.
     while문은 조건식을 만족할 때 까지 중괄호 {}안의 자바스크립트 코드를 반복하여 실행한다.

 

 

 

      while문 기본형

while(조건값){
    // 자바스크립트 로직
    // 증감값
}

 

      while문 동작 순서 : 조건식 검사(만족 시) → 자바스크립트 로직  증감식   조건식 

let i = 0;

while(i < 10){
    console.log(i)
    i++;
}

 

while( i < 10 ) 조건식을 만족하는 동안 반복 실행

 

      while문 예시 : 3초과 100미만 숫자 중 5의 배수만 출력하자

 

▼ 내가 풀어본 식 .. 
     문제점 : 증감식(i++;)을 해주지 않아 무한 루프에 빠졌다. (언제 빠져나와..)

// <잘못 푼 예 1> 3초과 100 미만 숫자 중 5의 배수만 출력하는 예
let i = 0;
while( i < 100){
    if (i > 3){
        if( i % 5 === 0)
        i++;
    }
}
// <잘못 푼 예 2> 3초과 100 미만 숫자 중 5의 배수만 출력하는 예
let j = 3;
while( j < 100){
    if(j % 5 === 0)
    j++;
}

 

▼ 강의 문제 풀이 

let j = 3;
while( j < 100){
    if(j % 5 === 0 && j >= 5){
    // 5의 배수이려면 5보다 크거나 같아야 한다.
    console.log(j + "는 5의 배수입니다.")
    }
    j++;
}

 

 

▼ 강의 문제 풀이  궁금증 : 5의 배수이려면 5보다 크거나 같아야한다고 '&& j >= 5'를 포함시켰는데 지워도 실행이 잘 된다. 

let i = 0;
while(i < 100){
    if(i > 3){
        if(i % 5 === 0){
            console.log( i + "는 5의 배수입니다.")
        }
    }
    i++;
}

 

 

 

 

 

 

 

 

 

 

   Javascript : 반복문 - ① for문, for in 문

      반복문 코드를 이용하면 코드를 원하는 횟수만큼 반복하여 실행할 수 있다.

1. for문, for in문
2. while문
3. do while문
4. breack문
5. continue문
6. 중첩 for문

 

1. for문

    for문 

     for문은 조건식을 만족할 때까지 특정 코드를 반복하여 실행한다. 
     사용 방법은 while문과 같지만 while문 보다 사용하기 쉬워 접근성이 좋다.

 

      for문 기본형

for (초기값; 조건식; 증감식){
    // 자바스크립트 로직;
}

 

      for문 동작 순서 : 초기값 → 조건식 자바스크립트 로직 증감식  조건식 

// 초기값 : i라는 변수의 초기값은 0이다.
// 조건식 : i라는 변수가 10보다 작은 값일 때 반복적으로 수행한다.
// 증감식 : i라는 변수가 한 사이클(=중괄호 안의 자바스크립트 코드)이 종료하면 i+1을 하자.

for (let i = 0; i < 10; i++){
    console.log("for문이 실행되고 있다=>" + i);
}

 

 

조건식 i < 10; 이 false가 될때까지 자바스크립트 코드와 증감식을 반복 수행한다.

 

      배열을 이용한 fot문 작성법

const array = ["one", "two", "three", "four", "five"];

for(let i = 0; i < array.length; i++){
    console.log(i);
    console.log(array[i]);
}

 

array.length = 5 보다 작으면 true니까 자바스크립트 코드를 실행하고 증감시키자

 

 

      (예제) 0~10까지의 수 중에서 2의 배수만 console.log 하자. 


▼ 내가 풀이한 방법
     초기값 : i가 1부터 시작하고
     조건식 : i가 11보다 작을 때
     if 1. i를 2로 나누었을 때 나머지가 0이면 {
                 console.log(i)를 실행하자.
               } 

// 0~10까지의 수 중에서 2의 배수만 console.log를 찍어보자
for(let i = 1; i < 11; i++){
    if(i % 2 === 0){
        console.log(i)
    }
}

 

▼ 좀 더 좋은 더 나은 방법 :
     초기값 : i가 0부터 시작하고
     조건식 : i가 10보다 작거나 같을 때
     if 1. 만약 i가 2보다 크거나 같을 때
       if 2. i를 2로 나누었을 때 나머지가 0이면 {
                 console.log(i)를 실행하자.
               } 

// 0~10까지의 수 중에서 2의 배수만 console.log를 찍어보자
for(let i = 0; i <= 10; i++){
    if(i >= 2){
        if(i % 2 == 0){
            console.log(i)
        }
    }
    }

 

 

 

    for in 문 

     for in 문은 객체의 속성을 출력하는 문법이다.

 

 

      for in 문 기본형

for(let key in 배열객체){
    console.log(배열객체[key])
}

 

      for in 문 : 객체의 key와 객체의 value 값 출력하기 
                          배열객체[key] : value

let person = {
    name : "john",
    age : 30,
    gender : "male"
};

for(let key in person){
    console.log(key + ":" + person[key])
}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

2. while문

    for문

     변수는 데이터가 한

 

 

 

 

 

3. do while문

    for문

     변수는 데이터가 한

 

 

'Programming > Javascript' 카테고리의 다른 글

Javascript : 반복문 - ③ do while문  (0) 2023.04.07
Javascript : 반복문 - ② while문  (0) 2023.04.05
Javascript : 배열(Array)  (0) 2023.04.04
Javascript : 객체 - ① 내장객체  (0) 2023.04.03
Javascript : 객체  (0) 2023.04.03

   Javascript : 배열(Array)

1. 배열이란?
2. 배열 객체 생성 방법
3. 배열 객체 요소 선택하기(인덱스)
4. 배열 객체 메소드
5. 콜백 함수

 

 

1. 배열이란?

    배열(Array)

     변수는 데이터가 한개만 저장되었지만, 여러 개의 데이터를 하나의 장소에 저장하려면 배열 객체(Array Object)를 생성하면 된다.
     배열(配列)은 '나눌 배'와 '열거할 열'을 사용해 만든 글자로 하나의 저장소에 나눠서 데이터를 열거하라는 의미다.

// 변수에 담아주려면 하나 하나 따로 만들어야한다.
let user_no = 1.
    user_name = "이박사",
    user_age = 35,
    user_job = "연구원"
    user_addr = "서울"

// 배열 객체를 생성하면 한번에 해결 가능
let user_info = new Array(1, "이박사", 35, "연구원", "서울")

 

 

 

2. 배열 객체 생성 방법

    배열 객체를 생성하는 3가지 방법 : 세가지 방법 모두 결과는 동일하다.

// 배열객체를 생성하는 세가지 방법
 
// 배열객체 생성 방법_1
let 참조변수 = new Array( );
참조변수[0]=값1;
참조변수[1]=값2;
참조변수[3]=값3;
...
참조변수[n-1]=값n;
// 배열객체 생성 방법_2
let 참조변수 = new Array(값1, 값2, 값3, ... 값n);
// 배열객체 생성 방법_3
let 참조변수 = [값1, 값2, 값3, ... 값n];

 

    배열 객체 생성 방법_1

let bicycle = new Array();
bicycle[0] = 30;
bicycle[1] = "따르릉";
bicycle[2] = true

console.log(bicycle);
console.log(bicycle.length);

 

 

    배열 객체 생성 방법_2

let bicycle = new Array(30, "따르릉", true);

console.log(bicycle);
console.log(bicycle.length);

 

 

 

    배열 객체 생성 방법_3

let bicycle = [30, "따르릉", true];

console.log(bicycle);
console.log(bicycle.length);

 

 

 

 

3. 배열 객체 요소 선택하기

    배열 객체에 저장 된 데이터 가져오기(요소 접근)

참조변수[인덱스번호];
let bicycle = [30, "따르릉", true];

console.log(bicycle[0]);
console.log(bicycle[1]);
console.log(bicycle[2]);

 

 

0번째 방부터 시작해서 하나씩 차례대로 들어간다.

 

 

 

 

 

4. 배열 객체 메소드 

    배열 객체의 메소드 및 속성

종류 설명
join(연결문자)
배열 객체에 데이터를 연결 문자 기준으로 1개의 문자형 데이터로 반환한다.
concat( )
2개의 배열 객체를 하나로 결합한다.
unshift(new data)
배열 객체의 가장 앞의 인덱스에 새 데이터를 삽입한다.
push(new data)
배열 객체의 마지막 인덱스에 새 데이터를 삽입한다.
shift( )
배열 객체에 저장 된 데이터 중 첫번째 인덱스에 저장 된 데이터를 삭제한다.
pop( )
배열 객체에 저장 된 데이터 중 마지막 인덱스에 저장 된 데이터를 삭제한다.
splice( )
배열 객체의 지정 데이터를 삭제하고 그 구간에 새 데이터를 삽입할 수 있다.
sort( )
배열 객체의 데이터를 오름차순으로 정렬한다.
reverse( )
배열 객체의 데이터를 내림차순으로 정렬한다.
slice(index1, index2)
배열 객체의 데이터 중 원하는 인덱스 구간만큼 잘라서 배열 객체로 가져온다.
length( )
배열에 저장 된 총 데이터의 개수를 반환한다. (배열의 인덱스 개수)

 

 

    배열객체.join( );   :  배열에 저장 된 데이터의 총 길이를 확인하는 메소드

 

 

    배열객체.concat( );   :  2개의 배열 객체를 하나로 결합하는 메소드

 

 

 

    배열객체.unshift("배열객체 맨 앞 인덱스에 넣어줄 데이터");   :  첫번째 인덱스에 데이터 추가하는 메소드

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);

bicycle.unshift("철수");
console.log("2==>", bicycle);

 

 

.unshift 시 넣어주는 데이터가 0번째로 가면서 옆으로 밀어낸다.

 

 

    배열객체.push("배열객체 마지막 인덱스에 넣어줄 데이터");   :  마지막 인덱스에 데이터 추가하는 메소드

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);

bicycle.push("바퀴");
console.log("2==>", bicycle);

 

 

 

    배열객체.shift();   :  첫번째 인덱스의 데이터를 삭제하는 메소드

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);

bicycle.shift();
console.log("2==>", bicycle);

 

첫번째 index인 '30'이 삭제되었다.

 

 

    배열객체.pop( );   :  배열의 마지막을 삭제하는 메소드

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);

bicycle.pop();
console.log("2==>", bicycle);

 

마지막 index인 'true'가 삭제되었다.

 

 

    배열객체.splice(시작 위치 인덱스 번호, 종료 위치 인덱스 번호, "삭제 후 대체하여 새로 넣어 줄 값");   
    :  배열에 저장 된 지정 데이터를 삭제 후 새로운 데이터를 넣어주는 메소드

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);

bicycle.splice(1, 1,"타요")
console.log("2==>", bicycle);

1번 인덱스에 위치한 '따르릉'을 삭제 후 '타요'를 추가했다.

 

 

 

    배열객체.sort( );   :  배열에 저장 된 데이터의 총 길

 

 

    배열객체.reverse( );   :  배열에 저장 된 데이터의 총 길

 

 

    배열객체.slice( 시작 인덱스 번호, 종료 인덱스 번호);  :  배열에 저장 된 데이터를 잘라 새로운 배열 객체를 생성한다.

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);

let newBicycle = bicycle.slice(1,2)
console.log("2==>", newBicycle);

 

 

 

 

 

    배열객체.length( );   :  배열에 저장 된 데이터의 총 길이를 확인하는 메소드

let bicycle = [30, "따르릉", true];
console.log("1==>", bicycle);
console.log("2==>", bicycle.length);

 

 

 

 

 

 

5. 콜백 함수

    배열의 내부 요소를 활용한 콜백 함수

 

    배열객체.forEach( );   :  배열 내부의 요소를 사용하여 콜백(callback)함수를 호출

배열객체.forEach(function (value, index, array) {
    // 자바스크립트 실행 로직;
 })
let numbers = [1, 2, 3, 4, 5];
// 매개변수 자리에 함수를 넣는 것을 콜백 함수라고 한다.
numbers.forEach(function(item){
    console.log("item입니다=>" + item)
});
 

 

 

 

numbers의 배열 요소를 item에 한번씩 던져서 실행해 준다.

 

 

let numbers = [1, 2, 3, 4, 5];
numbers.forEach(function(value, index){
    console.log(`${index}번째 요소 : ${value}`)
});

 

 

 

 

 

 

 

    배열객체.map( );   :  콜백 함수에서 return한 값을 기반으로 새로운 배열을 만드는 함수
                                          map 함수는 반드시 return문을 사용하여야 한다.

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map(function(item){
    return item * 2;
});

console.log(newNumbers)

 

 

 

    배열객체.filter( );  : 콜백 함수에서 return 하는 값이 true인 것만 모아서 새로운 배열을 만드는 함수 

 

let numbers = [1, 2, 3, 4, 5];

let filtersNumber = numbers.filter(function(item){
    return item === 5
});

console.log(filtersNumber);

 

item의 value가 5인 것을 찾아라

 

let numbers = [1, 2, 3, 4, 5];

let filtersNumber = numbers.filter(function(item){
    return item !== 5
});

console.log(filtersNumber);

 

item의 value가 5가 아닌 것을 찾아라

 

 

    배열객체.find( );  :  콜백 함수에서 return 하는 값이 true인 단 하나의 요소만 찾는다.
                                        .filter와 유사하지만 조건문에 맞는 첫번째 요소를 찾아 return하고 종료한다.

let numbers = [1, 2, 3, 4, 5];

let result = numbers.find(function(item){
    return item > 3;
})

console.log(result);

'Programming > Javascript' 카테고리의 다른 글

Javascript : 반복문 - ② while문  (0) 2023.04.05
Javascript : 반복문 - ① for문, for in 문  (0) 2023.04.05
Javascript : 객체 - ① 내장객체  (0) 2023.04.03
Javascript : 객체  (0) 2023.04.03
Javascript : 선택문  (0) 2023.04.03

   Javascript : 객체 - ① 내장객체

    내장객체(Built - in Object)란?

     브라우저의 엔진에 내장 된 객체를 말하며, 필요한 경우 객체를생성하여 사용할 수 있다.
     내장객체에는 문자(string), 날짜(date), 수학(math), 정규 표현 객체(RegExp Object)가 있다.

 

 

    내장객체 생성하기

 

    문자열 객체

 

    내장객체 생성하기

 

    배열 객체

 

    수학 객체

 

    

'Programming > Javascript' 카테고리의 다른 글

Javascript : 반복문 - ① for문, for in 문  (0) 2023.04.05
Javascript : 배열(Array)  (0) 2023.04.04
Javascript : 객체  (0) 2023.04.03
Javascript : 선택문  (0) 2023.04.03
Javascript : 조건문  (0) 2023.04.03

   Javascript : 객체

    객체란?

     자바스크립트는 객체(object)기반의 언어로 객체는 기능과 속성을 가지고 있다.
     객체는 key : value pair 해준다.
     하나의 변수에 여러개의 값을 넣을 수 있다.

     자바스크립트의 객체와 메서드의 속성 기본은 다음과 같으며, 
     ① 객체의 메서드를 실행하고, ② 객체의 속성값을 가져오고 , ③ 객체의 속성값을 바꾼다.

// ① 객체의 메서드를 실행하기
객체.메서드();
//  ② 객체의 속성값을 가져오기
객체.속성;
// ③ 객체의 속성값을 바꿔주기
객체.속성 = ;

 

 

TV라는 객체의 메서드와 속성 방법을 예시로 들자면..

// ① 객체의 메서드 실행하기
tv.켜다(); 또는 tv.끄다();

tv.앞으로 전진해 (X)      // tv는 애초에 전진할 수 없으니까..
자동차.앞으로 전진해 (O)

// ② 객체의 속성값 가져오기 - 티비의 너비를 알고싶다면
tv.width;

// ② 객체의 속성값 가져오기 - 티비의 색상을 알고싶다면
tv.color;

// ③ 객체의 속성 값 바꾸기
tv.color = black;

 

 

    객체의 종류

     자바스크립트의 객체는 크게 내장 객체, 브라우저 객체 모델(BOM, Browser Object Mode), 문서 객체 모델(DOM,
      Document Object Model)로 나눌 수 있다.

객체의 종류 설명
내장객체 자바스크립트 엔진에 내장되어 필요한 경우 생성하여 사용할 수 있다.
문자(string), 날짜(date), 배열(array), 수학(math) 객체가 있다.
브라우저 객체 모델 BOM은 브라우저에 계층 구조로 내장되어 있는 객체를 뜻 한다.
window, screen, locaton. history, navigator 객체 등이 있으며, 브라우저에 포함된 객체를 나타낸다.
브라우저(window)는 document와 location객체의 상위 객체다. 
만약 자바스크립트를 이용해 현재 열려있는 사이트에서 다른 사이트로 이동하려면 location 객체에 참조 주소(href)속성을 바꾸면 된다. 
window.location.href="사이트 url"
문서 객체 모델 DOM은 HTML 문서 구조를 뜻한다.
HTML 문서의 기본 구조는 최상위 객체로 <html>이 있고, 하위 객체로 <head>와 <body>가 있다.
만약 자바스크립트를 이용해 img의 src 속성을 바꾸고 싶다면 지정 된 <img>를 선택해 src 속성을 바꾸면 된다. 
문서 객체 모델에서는 HTML의 모든 요소들을 문서 객체로 선택하여 자유롭게 속성을 바꿀 수 있고, 선택한 문서 객체에 원하는 스타일(CSS)를 적용할 수 있다.

 

 

 

1. 객체 생성 방법

    기본적인 객체 생성 방법

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

 

    생성자 함수를 이용한 객체 생성 방법

function person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new person("홍길동", 30, "남자");
let person2 = new person("홍길순", 29, "여자");

 

 

2. 객체에 접근하는 방법

    객체의 속성을 가져오는 방법

function person(name, age, gender){
    this.name = name;
    this.age = age;
    this.gender = gender;
}

let person1 = new person("홍길동", 30, "남자");
let person2 = new person("홍길순", 29, "여자");

// 객체의 속성을 가져오는 방법
console.log(person1.name);
console.log(person2.age);
console.log(person2.gender);
 
// 객체의 속성을 가져오는 방법 + console.log 찍을 때 순서도 넣기
console.log("1", person1.name);
console.log("2", person2.age);
console.log("3", person2.gender);

 

 

 

3. 객체 메소드(객체가 가진 여러가지 기능)

    Object.keys( );   : key를 가져오는 메소드

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

let keys = Object.keys(person);
console.log(keys)

 

리스트 형태로 출력한다.

 

    Object.values( );   :  value를 가져오는 메소드

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};


let values = Object.values(person);
console.log("values", values)

 

리스트 형태로 value를 출력한다.

 

    Object.entries( );   :  key와 value를 묶어서 리스트(배열)로 만든 배열(2차원 배열)

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};


let entries = Object.entries(person);
console.log("entries", entries)

 

key와 value를 리스트 형태로 묶어주는 것

 

    Object.assign( );   :  객체를 복사하는 것

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

// newPerson이라는 변수를 만들고 object.assign(복사해줄 대상, 복사할 대상)을 입력한다.
let newPerson = {};
Object.assign(newPerson, person)
console.log("newPerson", newPerson)

 

 

      객체를 복사하면서 속성값도 바꿔주기

let person = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

// newPerson이라는 변수를 만들고 object.assign(복사해줄 대상, 복사할 대상)을 입력한다.
let newPerson = {};
Object.assign(newPerson, person, {age : 22})
console.log("newPerson", newPerson)

 

기존 person은 30살이었지만, newPerson은 22살로 객체가 복사되었다.

 

 

 

    객체 비교하기
     객체는 크기가 크기때문에 메모리에 저장할 때 별도의 공간에 저장한다.
     person1과 person2의 값을 가지고 있는 것이 아니고, person1과 person2가 존재하는 별도 공간에 대한 주소만 가지고있다.
     person1과 person2의 내용은 같지만 주소만 가져오기 때문에 비교가 불가능하고 json을 통해 문자열화(json.stringify) 시키면
     비교가 가능하다. 

 

      객체 끼리 비교하기 = false

// 객체끼리 비교가 불가능하고 false가 나온다.
let person1 = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

let person2 = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};


console.log(person1 === person2);
 
 
// 변수에 담은 값끼리 비교할 때에는 true가 나온다.
let person01 = "홍길동";
let person02 = "홍길동";

console.log(person01 === person02);

 

객체끼리 비교할 때에는 false가 나온다.

 

      객체를 문자열 화 시켜서 비교하기 = true 가능

let person1 = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

let person2 = {
    name : "홍길동",
    age : 30,
    gender : "남자"
};

// JSON.stringify 객체의 속성을 문자열화 시켜서 비교하면 ture가 나올 수 있다.
console.log(JSON.stringify(person1) === JSON.stringify(person2));

 

 

 

    객체 병합

let person1 = {
    name : "홍길동",
    age : 30,

};

let person2 = {
    gender : "남자"
};


// person1과 person2의 중괄호를 모두 풀어 헤쳐서 name : "홍길동" age : 30 gender : 남자 로 중괄호 안에 넣어줘
// ... : spread operator
let perfectMan = {...person1, ...person2};
console.log(perfectMan)

 

   Javascript : 선택문

    선택문이란?

     선택문은 

 

 

    switch

    선택문인 switch문은 변수에 저장된 값과 switch문에 있는 경우(case)의 값을 검사하여 변수와 경우 값에서 일치하는 값이 있을 때
     그에 해당하는 코드를 실행한다.
     if문과 용도는 비슷하나 if문은 만족하는 데이터가 여러개인 경우에 주로 사용하고,
     switch문은 여러 경우의 값 중 일치하는 데이터를 찾아 그에 해당하는 코드를 실행시킬 때 사용한다.

     case를 쓰고 그 뒤에 break;를 써줘야 값에 맞는 조건에서 자바스크립트를 실행 후 빠져나올 수 있다.

let 변수 = 초기값;
switch(변수){
    case 값1 : 실행할 자바스크립트 코드1;
    break;

    case 값2 : 실행할 자바스크립트 코드2;
    break;

    case 값3 : 실행할 자바스크립트 코드3;
    break;

    case 값4 : 실행할 자바스크립트 코드4;
    break;

    default : 실행할 자바스크립트 코드5;
}

 

       switch문 예시 

let fruit = "사과";

switch(fruit) {
    case "사과" :
        console.log("사과입니다.")
        break;
    case "바나나" :
        console.log("바나나입니다.")
        break;
    case "키위" :
        console.log("키위입니다.")
        break;
    default :
        console.log("과일이 아닙니다.")
        break;
}

 

 

 

 

 

 

 

 

 

 

 

   Javascript : 조건문

    조건문이란?

     조건문은 조건식이 참(true)인지, 거짓(false)인지에 따라 자바스크립트 코드를 제어한다.
     조건문의 종류에는 if문, else문, if else문이 있다.

 

    if문

    if문은 조건식을 만족(true)할때 코드를 실행한다. 

if (ture가 되거나 false가 되는 조건식){
    자바스크립트 코드;
}

      if문 예시 

// y의 길이가 5보다 크거나 같으면 길이를 console.log로 출력하자

let y = "hello world"

if(y.length >= 5){
    console.log(y.length)
}

 

 

 

    else

    else문은 조건식을 만족할(true) 경우와 만족하지 않을(false) 경우에 따라 실행되는 코드가 달라진다.
     조건식에 만족하는 true와 만족하지 않을 때 나타나는 false 두가지 결과가 나올 수 있다.

if(true가 되거나 flase가 되는 조건식){
    true면 실행되는 자바스크립트 코드;
} else {
    else면 실행되는 자바스크립트 코드;
}

       else문 예시 

// x가 0보다 크면 양수, 0보다 작으면 음수로 출력하자.

let x = 10

if(x > 0){
    console.log('x는 양수입니다.');
} else {
    console.log('x는 음수입니다.');
}

 

// x가 0보다 크면 양수, 0보다 작으면 음수로 출력하자.

let x = -3

if(x > 0){
    console.log('x는 양수입니다.');
} else {
    console.log('x는 음수입니다.');
}

 

 

    else if

     else if문은 두가지 이상의 조건식(if, else if)과 정해 놓은 조건을 만족하지 않았을 때 실행되는 코드(else)로 이루어져 있다.

if(true가 되거나 flase가 되는 조건1){
    첫번째 조건이 만족(true) 실행되는 자바스크립트 코드;
} else if(조건2){
    두번째 조건에 만조하면 실행되는 자바스크립트 코드;
} else {
    첫번째 두번째 조건에 만족하지 않으면 실행하는 자바스크립트 코드;
}

 

       if else문 예시 

let x = 10;

if(x < 0){
    console.log('1');
} else if(x >= 0 && x < 10){
    console.log('2');
} else {
    console.log('3');
}

 

let x = -1;

if(x < 0){
    console.log('1');
} else if(x >= 0 && x < 10){
    console.log('2');
} else {
    console.log('3');
}

 

 

 

    중첩 if

     조건문 안에 조건문이 있으면 중첩 if문이라고한다.
      중첩 if문은 바깥쪽에 있는 조건문인 조건식1을 만족해야만 안쪽에 있는 조건문인 조건식2를 검사할 수 있다.
      만일 안쪽 if문의 조건식2를 만족하지 않으면 바깥쪽 조건문인 조건식1의 중괄호 안에있는 코드만 실행하고 종료한다.

if(조건식1){
} if(조건식2){
    조건식1이 만족해서 조건식2를 실행했을 만족하여 실행하는 자바스크립트 코드;
}

 

       중첩 if문 예시 

let age = 20;
let gender = "여성";


// 성인&학생 + 성별 구분
if(age >= 18){
    if(gender === "여성"){
        console.log("성인 여성입니다.")
    } else {
        console.log("성인 남성입니다.")
    }
} else{
    console.log("청소년입니다.")
    if(gender === "여성"){
        console.log("여학생 입니다.")
    } else{
        console.log("남학생 입니다.")
    }
}

 

 

    조건부 실행

     어떤 조건에 만족했을때에만 실행하는 것
      조건부 실행은 요즘 많이 사용되며 요즘스러운 개발 패턴이다.

 

       &&(and)조건부 실행 예시 
        x가 0보다 크면 (and) console.log를 실행하자.

let x = 10;

// 조건부 실행
x > 0 && console.log("x는 양수입니다.");

// 일반적인 if문
if(x > 0){
    console.log("x는 양수입니다.")
}

 

 

       ||(or)조건부 실행 예시 
       
y는 선언만 해주고, y가 존재하지 않을 경우 우측에 있는 값으로 세팅하자.

let y;    // y는 선언만 해준 상태로 undefined
let z = y || 20; // y가 undefined면 우측에 있는 값으로 세팅하자.

console.log(z);

 

 

 

    truthy한 값, flasy한 값

     truthy : 꼭 사실은 아니지만 사실 같은(실제로 사실이 아님)

if(0){
    console.log("hello")
}

if(""){
    console.log("hello")
}

if(null){
    console.log("hello")
}

if(NaN){
    console.log("hello")    
}

if(undefined){
    console.log("hello")    
}

if(false){
    console.log("hello")    
}

// if문의 조건 안에서 true만 실행된다.
if(true){
    console.log("hello")    
}

 

 

   Javascript : 스코프 및 화살표함수

 

1. 스코프(Scope) 

    스코프(Scope) 란?

     스코프의 사전적 의미는 '범위'이며, 변수 또는 함수가 어디까지 영향이 있는지 유효 범위를 뜻한다.

     전체 영역에 영향이 있다면 전역 변수, 함수 안에서만 영향이 있다면 지역 변수라고 한다.

   

    전역과 지역을 나누는 이유

    프로젝트의 규모가 크면 클 수록 여러 명의 개발자가 투입되는데, 이떄 만약 같은 이름의 전역변수나 전역함수를 사용하면
     충돌이 생기기 때문에
전역(Global)과 지역(Local)을 나누어야 충돌을 피할 수 있다.

함수명이 같아서 A개발자의 함수는 제거되고 B개발자의 함수만 실행된다.

   개발자A는 200이 출력될 것이라 예상하지만 개발자B가 만든 함수명과 이름이 같아서 B가 만든 것만 호출된다.

   이때 함수 안에 지역변수와 지역 함수를 선언하여 충돌을 방지할 수 있는 것이다.

 

개발자A와 개발자B가 즉시 실행 함수로 지역변수와 지역 함수를 선언하여 충돌을 방지한 예시

 

    전역 변수와 지역 변수의 개념 차이

  • 전역변수 : 자바스크립트 어디서든 사용할 수 있다.
  • 지역변수 : 함수 스코프 안에서만 사용할 수 있다.
    전역변수와 지역변수의 선언 방법   
 
// 전역변수
var A;

// 지역변수
function 함수명( ){
    var A;    
}

 

    전역 함수와 지역 함수의 차이

  • 전역함수 : 자바스크립트 어디서든 사용할 수 있다.
  • 지역함수 : 함수 스코프 안에서만 사용할 수 있다.
    함수 스코프 안에서 선언 된 함수는 지역함수가 되어 함수 스코프 안에서만 호출할 수 있다.
    함수 스코프 밖에서 호출되는 경우 함수 스코프에서 선언한 지역 함수가 아닌 전역함수가 호출되어 '전역함수'라는 경고창이 나타난다.
    전역함수와 지역함수의 사용 방법  
 
// 전역함수
function 함수명1( ){
    자바스크립트 코드;
   
}

// 지역함수
function 함수명2( ){
    function 함수명3( ){
        자바스크립트 코드;
    }  
}

 

 

 

 

2. 화살표 함수(Arrow Function)

   화살표 함수(Aroow Function) 이란?

     ES6부터 나타난 새로운 문법이다.

 

    일반 함수와 화살표 함수의 선언 기능은 같다.  
 
// 일반 함수 선언 기본
function myfnc(){
    return x + y
}

// 화살표 함수 기본
let arrowFun01 = (x, y) => {
    return x + y
}

 

    화살표 함수 - 한줄로 작성하기

  • 중괄호 안의 return x + y도 중괄호 밖으로 뺄 수 있다.
    화살표 함수 작성이 가능한 예)
 
// 화살표 함수 기본  - 한줄로 작성하기 가능
let arrowFun = (x, y) => {
    return x + y
}
 
// 화살표 함수 - 한줄로 작성하기 + 중괄호 생략이 가능
let arrowFun02 = (x, y) => x + y
 
 
    화살표 함수 작성이 불가능한 예)
 
.// 화살표 함수 작성이 불가능한 예) - 다른 로직이 복잡하게 들어있는 경우 중괄호를 생략할 수 없다.
let arrowFun01 = (x, y) => {
    console.log();
    return x + y
}
    매개변수가 1개라면 괄호도 생략할 수 있다.
 
// (예시) 기본형 - 매개변수가 1개일 때
function myfun01(x){
    return x;
}
 
// 매개변수가 1개일 때 - 1번
let arrowfun01 = (x) => x;

//매개변수가 1개일 때 - 2번 , 매개변수가 1개면 괄호도 없애줄 수 있다.
let arrowfun02 = x => x;

 

 

 

 

 

'Programming > Javascript' 카테고리의 다른 글

Javascript : 선택문  (0) 2023.04.03
Javascript : 조건문  (0) 2023.04.03
Javascript : 함수(function)  (0) 2023.04.01
Javascript : 연산자 - 6. 증감 연산자  (0) 2023.04.01
Javascript : 연산자 - 5. 삼항 조건 연산자  (0) 2023.04.01

   Javascript : 함수(function)

    함수 란?

     함수란 프로그램의 코드를 저장한 공간이다.

     변수를 선언하면 데이터 저장만 가능하지만 코드는 저장할 수 없는데, 함수를 사용하면 코드를 메모리에 저장해 두었다가
     필요할 때마다 호출하여 사용할 수 있다.    

     function 키워드를 사용해 선언하고, 출력문, 제어문 등의 코드를 저장하고 데이터를 반환한다.

     함수는 input과 output이 존재하는데 input : 매개변수(매개체가 되는 변수) , output : 반환값 이라고 한다.

 

    기본 함수 정의문

    함수 정의문은 항상 실행되는 것이 아닌, 함수가 메모리에 할당되어 대기하다가 함수가 호출되면 실행된다.

    예제 : 두개의 숫자를 입력 받아 덧셈한 후 내보내는 함수 - 함수 선언문
function 함수이름(x, y 매개변수) {
    // 함수 내부에서 실행할 로직
    return x + y;
}
함수이름(2, 3 매개변수);

함수 호출 및 실행 순서 1

① 1~5번까지 무시하고 지나감
② 6번 줄에서 myfnc(); 호출

③ 1번 줄로 넘어가서 myfnc();실행

④ console.log에 "hello"와 "world"를 찍어주고 
⑤ 함수 실행이 종료되면 7번 줄로 넘어간다.
⑥ 다시 1번줄로 넘어가서  myfnc();실행

 console.log에 "hello"와 "world"를 찍어준다.

 

 

    예제 : 두개의 숫자를 입력 받아 덧셈한 후 내보내는 함수 - 함수 표현식
let 함수이름 = function(x, y 매개변수){
    // 함수 내부에서 실행할 로직
    return x + y;
}
et 변수 = 함수이름(2, 3 매개변수);

함수 호출 실행 순서 2

① 1~3번까지 무시하고 지나감
② 4번 줄에서 myfnc(); 호출되면서 매개변수 값 x=3, y=4를 던져줌

return x + y 계산하고 계산이 끝나면

④ 5번 줄로 넘어가서 console.log(functionResult);를 찍어줌.

 

 

 

   Javascript : 연산자 - 6. 증감 연산자

 

6. 증감 연산자

  • 증감 연산자는 숫자형 데이터를 1씩 증가시키는 증가 연산자(++)와 반대로 1씩 감소시키는 감소 연산자(--)가 있다.
  • 증감 연산자는 피연산자가 1개만 필요한 단항 연산자이다.
  • 증감 연산자는 변수의 어느 위치에 오는가에 따라 결과값이 달라진다.
// 변수의 값을 1만큼 증가 시킬 때
변수++; 또는 ++변수;

// 변수의 값을 1만큼 감소 시킬 때
변수--; 또는 --변수;

 

 

   증가 연산자

let B = 10

// B의 값을 1만큼 증가시키고, 증가 된 B+1의 값을 A에 대입한다.
var A = ++B;
console.log(A);

// B의 값을 1만큼 증가시키고, 증가 된 B+1의 값을 A에 대입한다.
var A = B++;
console.log(A);

 

 

 

 

   감소 연산자

let B = 10

// B의 값을 1만큼 감소시키고, 감소 된 B-1의 값을 A에 대입한다.
var A = --B;
console.log(A);

// B의 값을 1만큼 감소시키고, 감소 된 B-1의 값을 A에 대입한다.
var A = B--;
console.log(A);

 

 

 

 

 

 

 

 

   Javascript : 연산자 - 5. 삼항 조건 연산자

 

5. 삼항 조건 연산자

  • 삼항 조건 연산자는 조건식(true 또는 false의 결과값을 반환)의 결과에 따라 실행 결과가 달라진다.
  • 연산을 위해 피연산자가 3개 필요하다.
  • 1항의 값이 true면 2항의 값으로 반환하고, 1항의 값이 false면 3항의 값으로 반환한다.

 

   3항 연산자 : a가 b보다 크면 ture ="javascript"를 , a가 b보다 크지 않다면 "false = hello"를 출력하자. 

var a = 10;
var b = 3;

 var result = a > b? "javascript" : "hello";
console.log(result);

 a 10이 b 3 보다 큰가? = true 

result = 2항의 javascript로 반환한다.

 

 

   3항 연산자 : y가 10보다 작은 경우 true = "작다",  y가 10보다 작지 않은 경우 false = "크다"를 출력하자.

let y = 20;

// 3항 연산자를 이용하여 y가 10보다 작은 경우 작다를 console.log에 출력하고,
// 10보다 큰 경우 크다를 console.log에 출력하자

let result1 = y < 10 ? "작다": "크다" ;
console.log(result1);

let result2 = y > 10 ? "작다": "크다" ;
console.log(result2);

 

 

 

   Javascript : 연산자 - 7. 연산자 우선 순위

 

7. 연산자 우선 순위

  • 일반적인 산수를 계산할 때와 같이 연산자에도 우선순위가 있다.
연산자 우선 순위
1. () ()
2. 단항 연산자 --, ++, ! 
3. 산술 연산자 *, /, %, +, - 
4. 비교 연산자 >, >=, <, <=, ==, ===, !==, !=
5. 논리 연산자 &&, ||
6. 대입(복합 대입) 연산자) =, +=, -=, *=, /=, %=

 

var a = 10
var b = 20
var c = 30
var d = 40

var result
result = a > b || b >= c || c > d;
// a 10은 b 20보다 크다 false ||or(또는) b 20은 c 30보다 크거나 같다 false ||or(또는) c 30은 d 40 보다 크다 false
// 결과 : false
console.log(result);

result = a > b || b >= c || c <= d;
// a 10은 b 20보다 크다 false ||or(또는) b 20은 c 30보다 크거나 같다 false ||or(또는) c 30은 d 40보다 작거나 같다 true
// 결과 : true
console.log(result);

result = a <= b && b >= c && c <= d;
// a 10은 b 20보다 작거나 같다 true &&and(그리고) b 20은 c 30보다 크거나 같다 false &&and(그리고) c 30은 d 40보다 작거나 같다 true
// 결과 : false
console.log(result);

result = a <= b && b <= c && c <= d;
// a 10은 b 20보다 작거나 같다 ture &&and(그리고) b 20은 c 30보다 작거나 같다 true &&and(그리고) c 30은 d 40보다 작거나 같다 true
// 결과 : true
console.log(result);

result = !(a > b);
// a 10은 b 20보다 크다 → true인데 반대 값을 반환한다.
// 결과 : false
console.log(result);

 

 

   Javascript : 연산자 - 4. 논리 연산자

 

4. 논리 연산자

  • 논리 연산자에는 ||(or), &&(and), !(not)이 있으며, 피연산자가 논리형 데이터인 true 또는 false로 반환한다.
종류 설명
|| or 연산자, 피연산자 중 값이 하나라도 true면 true로 반환한다.
&& and 연산자, 피연산자 중 값이 하나라도 false면 false로 반환한다.
! not 연산자, 단항 연산자, 부정 논리 연산자, 피연산자 값이 true면 반대로 false 값을 반환한다.

 

    논리 합(||) 연산자

  • 피연산자 값 중 하나라도 true인 경우 true로 반환한다.
  • 두 값이 모두 false라면 false로 반환한다.
console.log(true || true);
console.log(true || false);
console.log(false || true);
console.log(false || false);

 

 

 

    논리 곱(&&) 연산자

  • 피연산자 값이 모두 true일때 true를 반환하고, 둘 중 하나라도 false라면 false로 반환한다.
console.log(true && true);
console.log(true && false);
console.log(false && true);
console.log(false && false);

 

 

 

    논리 부정(!) 연산자

  • 피연산자 값이 true면 false로 반대 값을 반환한다.
console.log(!true);
console.log(!false);

 

 

let a = true;
console.log(!a);

 

 

 

 

 

 

 

   Javascript : 연산자 - 3. 비교 연산자

 

3. 비교 연산자

  • 비교 연산자는 '크다', '작다', '같다' 등 비교할 때 사용하는 연산자
  • 연산 된 결과 값을 true(참) 또는 false(거짓)의 논리형 데이터로 반환한다.
종류 설명 비고
A > B A가  B보다 크다.  
A < B A가 B보다 작다. A가 B보다 작으면 true
A가 B보다 크면 fasle
A >= B A가 B보다 크거나 같다.  
A <= B A가 B보다 작거나 같다. A가 B보다 작거나 같으면 true
A가 B보다 크거나 같으면 fasle
A == B A와 B는 같다. 데이터 type이 숫자형, 문자형 관계없이 숫자만 비교해서 일치하면  true를 반환한다. 
(예) 숫자형 10 == 문자형 10 / 숫자만 비교하고 일치하면 true
A != B A와 B는 다르다. 숫자를 비교할 경우 자료형은 숫자형, 문자형 관계없이 표기 된 숫자만 다르면 true를 반환한다. 
(예) 숫자형 10 == 문자형 20 은 두 값이 다름으로 true
       숫자형 10 == 문자형 10 은 두 값이 같은 것으로 인식되어 fasle로 반환한다.
A === B A와 B는 같다. 숫자를 비교할 경우 반드시 표기 된 숫자, 데이터 type도 일치해야만 true를 반환한다.
10과 "10"을 비교했을 경우 하나는 숫자형 10, 하나는 문자형 10 이므로 fasle를 반환한다.
(예) 숫자형 10 === 숫자형 10 두 값이 숫자와, type이 일치함으로 true
           숫자 10이 숫자 10과 같은가? true
A !== B A와 B는 다르다. 숫자를 비교할 경우 반드시 표기 된 숫자 또는 자료형이 일치하지 않아야 fasle를 반환한다.
(예) ① 숫자형 10 !== 숫자형 15 는 표기 된 숫자가 다름으로 true를 반환한다.
            숫자 10과 숫자 15가 다른가? / true
       ② 숫자형 10 !== 문자형 "10" 은 type이 다름으로 true를 반환한다.
            숫자 10과 문자형 10은 다른가? / true
       ③ 숫자형 10과 !== 숫자형 10은 숫자, type이 같음으로 fasle를 반환한다.
            숫자 10과 숫자 10은 다른가? / fasle

 

 

    비교 연산자 - '==', '!='

  • ==와 !=는 피연산자의 데이터 type이 비교 연산자의 실행 결과에 영향을 미치지 않는다. 
let a = 10
let b = "10"

console.log(a == 10); // true
console.log(b == 10); // true

 

 

 

    비교 연산자 - '===', '!=='

  • ===와 !==는 피연산자의 데이터 type에 따라 결과가 달라진다.
let a = 10
let b = "10"

console.log(a === 10); // true
console.log(b === 10); // false

 

 

+ Recent posts